SDK Realtime & Channels New

const channel = dypai.realtime.channel('orders-updates')

channel
  .on('postgres_changes', { event: '*', table: 'orders' }, (payload) => {
    console.log('Event:', payload.eventType) // INSERT, UPDATE, or DELETE
    console.log('New data:', payload.new)
    console.log('Old data:', payload.old)
  })
  .subscribe()

// Only new orders
channel.on('postgres_changes', { event: 'INSERT', table: 'orders' }, callback)

// Only status changes
channel.on('postgres_changes', {
  event: 'UPDATE',
  table: 'orders',
  filter: 'status=eq.completed'
}, callback)

const channel = dypai.realtime.channel('room-1')

// Listen
channel.on('broadcast', { event: 'typing' }, (payload) => {
  console.log(`${payload.user} is typing...`)
})

channel.subscribe()

// Send
channel.send('typing', { user: 'John' })

const channel = dypai.realtime.channel('room-1')

channel.on('presence', { event: 'sync' }, () => {
  const users = channel.presenceState()
  console.log('Online:', Object.keys(users))
})

channel.subscribe()

// Announce yourself
channel.track({ user_id: '123', name: 'John' })

import { useRealtime } from '@dypai-ai/client-sdk/react'

function OrderList() {
  const { data: orders, refetch } = useEndpoint('list_orders')

  useRealtime('orders', {
    onInsert: () => refetch(),
    onUpdate: () => refetch(),
    onDelete: () => refetch(),
  })

  return <ul>{orders?.map(o => <li key={o.id}>{o.status}</li>)}</ul>
}

import { useChannel } from '@dypai-ai/client-sdk/react'

function Editor() {
  const { presences, broadcast, memberCount } = useChannel('doc:abc', {
    presence: { name: 'Alice' },
    onBroadcast: (msg) => {
      if (msg.event === 'cursor') updateCursor(msg.sender, msg.payload)
    },
  })

  return <span>{memberCount} online</span>
}

import { useChannelMessages } from '@dypai-ai/client-sdk/react'

function TeamChat({ channelId }) {
  const { messages, send, isLoading, isConnected } = useChannelMessages(channelId)

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <b>{m.sender_email}</b>: {m.content}
        </div>
      ))}
      <input onKeyDown={e => {
        if (e.key === 'Enter') { send(e.target.value); e.target.value = '' }
      }} />
    </div>
  )
}

import { useChannels } from '@dypai-ai/client-sdk/react'

function ChannelList() {
  const { channels, createChannel } = useChannels()

  return (
    <div>
      {channels.map(ch => <div key={ch.id}>{ch.name} ({ch.member_count})</div>)}
      <button onClick={() => createChannel('General', [], 'public')}>New</button>
    </div>
  )
}

// DM — calling twice with same users returns the existing channel
const dm = await createChannel('Alice ↔ Bob', ['bob-user-id'], 'dm')

import {
  DypaiProvider, useAuth, useChannelMessages, useChannels, useChannel
} from '@dypai-ai/client-sdk/react'
import { dypai } from './lib/dypai'

function App() {
  return (
    <DypaiProvider client={dypai}>
      <Chat />
    </DypaiProvider>
  )
}

function Chat() {
  const { user } = useAuth()
  const myName = user?.email?.split('@')[0] || 'anonymous'
  const { channels, createChannel } = useChannels()
  const [activeId, setActiveId] = useState(channels[0]?.id)

  return (
    <div className="flex">
      <aside className="w-56">
        {channels.map(ch => (
          <button key={ch.id} onClick={() => setActiveId(ch.id)}>
            # {ch.name}
          </button>
        ))}
        <button onClick={() => createChannel('New Channel')}>+</button>
      </aside>
      {activeId && <ChatRoom channelId={activeId} myName={myName} />}
    </div>
  )
}

function ChatRoom({ channelId, myName }) {
  const { messages, send, isLoading, isConnected } = useChannelMessages(channelId)
  const { presences } = useChannel(`channel:${channelId}`, {
    presence: { name: myName },
  })

  // Typing indicator
  const [typingUsers, setTypingUsers] = useState(new Set())
  const { broadcast } = useChannel(`channel:${channelId}:typing`, {
    onBroadcast: (msg) => {
      if (msg.event === 'typing' && msg.payload.name !== myName) {
        setTypingUsers(prev => new Set(prev).add(msg.payload.name))
        setTimeout(() => setTypingUsers(prev => {
          const next = new Set(prev); next.delete(msg.payload.name); return next
        }), 2000)
      }
    },
  })

  const [input, setInput] = useState('')

  return (
    <div className="flex-1 flex flex-col">
      <div className="p-2 border-b flex justify-between">
        <span>{isConnected ? '● Live' : '○ Offline'}</span>
        <span>{Object.values(presences).map(p => p.data?.name).join(', ')}</span>
      </div>

      <div className="flex-1 overflow-y-auto p-4 space-y-2">
        {isLoading && <p>Loading...</p>}
        {messages.map(m => (
          <div key={m.id}>
            <b>{m.sender_email}</b>: {m.content}
          </div>
        ))}
        {typingUsers.size > 0 && (
          <p className="text-sm italic">{[...typingUsers].join(', ')} typing...</p>
        )}
      </div>

      <div className="p-3 border-t">
        <input
          value={input}
          onChange={e => { setInput(e.target.value); broadcast('typing', { name: myName }) }}
          onKeyDown={e => { if (e.key === 'Enter') { send(input); setInput('') } }}
          placeholder="Type a message..."
          className="w-full border rounded px-3 py-2"
        />
      </div>
    </div>
  )
}

// Unsubscribe from a specific channel
channel.unsubscribe()

// Remove all subscriptions
dypai.realtime.removeAllChannels()