@ arkstack/ 实时

消费的客户 阿克斯达克 实时通知。 框架不可知核外加反应和Vue绑定 推进器 或者说 火地云通讯。 。 。 .

与 realtime 通知驱动程序 @arkstack/notifications,用于广播每个用户的频道(user.<id>该客户端订阅 .

安装

pnpm add @arkstack/realtime

然后安装您传输的客户端 SDK( 两者都是可选的对等依赖性—— 只安装您使用的一个):

pnpm add pusher-js   # Pusher transport
pnpm add firebase    # Firebase transport

使用量

创建客户端并订阅用户频道. subscribe编号 :forUser 解析到未订阅函数.

import { createRealtime } from '@arkstack/realtime'

const realtime = createRealtime({
  transport: 'pusher',
  pusher: {
    key: import.meta.env.VITE_PUSHER_KEY,
    cluster: 'mt1',
    authEndpoint: '/broadcasting/auth',
  },
})

const unsubscribe = await realtime.forUser(user.id, (notification) => {
  console.log(notification.title, notification.description)
})

// later
unsubscribe()
await realtime.disconnect()

客户事件

推进器私人和存在频道可以发送ephemeral客户端事件(往往) 叫做低语。 发送事件前订阅频道 :

const stopTyping = await realtime.listenForWhisper('private-room.7', 'typing', ({ userId }) =>
  console.log(`${userId} is typing`),
)

await realtime.whisper('private-room.7', 'typing', { userId: user.id })
stopTyping()

这个 client- 前缀自动添加。 Pusher 发送客户端事件过它 私人/现场频道。 Firebase 使用实时数据库发布同样内容 互联客户端的电平事件. 使用 listen(channel, event, handler) 财务报告和审定财务报表 trigger(channel, event, payload) 当您需要低级API时 确切的事件名称.

每个 notification 匹配服务器所播放的有效载荷 :

interface RealtimeNotification {
  id: string
  type: string | null
  title: string
  description: string
  actionText?: string | null
  actionLink?: string | null
  meta?: Record<string, unknown> | null
  read_at: string | null
  created_at: string
}

反应

import { useNotifications } from '@arkstack/realtime/react'

function Bell({ realtime, userId }) {
  const { notifications, latest, clear } = useNotifications(realtime, realtime.channelFor(userId), { limit: 20 })

  return (
    <span onClick={clear}>
      {notifications.length} · {latest?.title}
    </span>
  )
}

钩子会累积通知( 最新的第一个), 封顶于 limit,然后在卸载时或何时自动取消订阅 client编号 :channel 变化.

阴道

<script setup>
import { useNotifications } from "@arkstack/realtime/vue";

const props = defineProps(["realtime", "userId"]);
const { notifications, latest, clear } = useNotifications(
  props.realtime,
  props.realtime.channelFor(props.userId),
  { limit: 20 },
);
</script>

<template>
  <span @click="clear">{{ notifications.length }} · {{ latest?.title }}</span>
</template>

当组件范围被处理时,可堆放的不订阅自动进行.

基地

Firebase Cloud 消息传送给设备(通过 onMessage),因此通知用事件名称而不是频道匹配:

const realtime = createRealtime({
  transport: 'firebase',
  firebase: {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
    appId: import.meta.env.VITE_FIREBASE_APP_ID,
    messagingSenderId: import.meta.env.VITE_FIREBASE_SENDER_ID,
    databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
  },
})

Firebase 客户端活动记录如下: arkstack/client-events 实时 数据库出版后立即被移除. 配置消防基地安全 您认证的客户端可以读取和写入频道规则 。 覆盖 根为 firebase.clientEventsPath 需要的时候.

自定义运输

提供 transportFactory 以连接任何后端(原始 WebSocket, SSE, 测试双版,...):

import { createRealtime, type RealtimeTransport } from '@arkstack/realtime'

const transport: RealtimeTransport = {
  subscribe(channel, event, handler) {
    const socket = new WebSocket(`wss://example.test/${channel}`)
    socket.addEventListener('message', (e) => {
      const { event: name, payload } = JSON.parse(e.data)
      if (name === event) handler(payload)
    })

    return { channel, unsubscribe: () => socket.close() }
  },
  disconnect() {},
}

const realtime = createRealtime({ transportFactory: () => transport })

API 密码

• createRealtime(config) - 创建一个 RealtimeClient配置 : transport (单位:千美元)'pusher' | 'firebase', (中文(简体) ), event (默认) notification, (中文(简体) ), channelPrefix (默认) user., (中文(简体) ), pusher编号 :firebase 证书,或自定义 transportFactory。 。 。 .
• client.subscribe(channel, handler) 编号 : client.forUser(userId, handler) ——订阅;返回一个未订阅的函数.
• client.listen(channel, event, handler) ——听一听任意事件.
• client.listenForWhisper(channel, event, handler) 编号 : client.whisper(channel, event, payload) ——接收并发送Pusher客户端事件.
• client.trigger(channel, event, payload) ——通过支持它的运输机发出确切的事件名称.
• client.channelFor(userId) ——每个用户频道名.
• client.disconnect() ——拆解运输接通.
• @arkstack/realtime/react —— 说 useNotifications(client, channel, { limit? }) → { notifications, latest, clear }。 。 。 .
• @arkstack/realtime/vue —— 说 useNotifications(client, channel, { limit? }) → { notifications, latest, clear, stop }。 。 。 .

见 通知指南 用于服务器侧.

许可证

麻省理工学院