存在对流组件

用于管理存在功能的 Convex 组件,即实时更新 在“房间”中的用户列表,包括他们上次上网时的状况.

在没有任何民意测验的情况下有效派驻人员可能十分困难 每次用户发送心跳消息时,不重复运行查询. 这个 部门通过单一的全部署工作人员落实存在(a) 批发工人 睡觉 直到下一次会话超时到期, 这样客户端只能收到更新 当用户加入或离开房间时,心跳不会安排任何工作.

此组件最常用的用例是通过使用Presence hook,它 注意向服务器发送心胸信息并优雅 关闭标签时断开用户.

安装

npm install @convex-dev/presence

实例

见 example 对于如何使用此组件的简单示例的目录. 这个 example-with-auth 目录显示如何使用组件 认证.

有个主机版 example-with-auth 时间 https:// presence.previews.convex.dev 页面存档备份,存于互联网档案馆。 。 。 .

使用量

首先,在您的 Convex 应用程序中添加组件:

convex/convex.config.ts

import { defineApp } from "convex/server";
import presence from "@convex-dev/presence/convex.config.js";

const app = defineApp();
app.use(presence);
export default app;

convex/presence.ts

import { mutation, query } from "./_generated/server";
import { components } from "./_generated/api";
import { v } from "convex/values";
import { Presence } from "@convex-dev/presence";

export const presence = new Presence(components.presence);

export const heartbeat = mutation({
  args: {
    roomId: v.string(),
    userId: v.string(),
    sessionId: v.string(),
    interval: v.number(),
  },
  handler: async (ctx, { roomId, userId, sessionId, interval }) => {
    // TODO: Add your auth checks here.
    return await presence.heartbeat(ctx, roomId, userId, sessionId, interval);
  },
});

export const list = query({
  args: { roomToken: v.string() },
  handler: async (ctx, { roomToken }) => {
    // Avoid adding per-user reads so all subscriptions can share same cache.
    return await presence.list(ctx, roomToken);
  },
});

export const disconnect = mutation({
  args: { sessionToken: v.string() },
  handler: async (ctx, { sessionToken }) => {
    // Can't check auth here because it's called over http from sendBeacon.
    return await presence.disconnect(ctx, sessionToken);
  },
});

A 类 Presence 反应组件可以从您的客户端代码中即时化 这个:

src/App.tsx

import { api } from "../convex/_generated/api";
import usePresence from "@convex-dev/presence/react";
import FacePile from "@convex-dev/presence/facepile";

export default function App(): React.ReactElement {
  const [name] = useState(() => "User " + Math.floor(Math.random() * 10000));
  const presenceState = usePresence(api.presence, "my-chat-room", name);

  return (
    <main>
      <FacePile presenceState={presenceState ?? []} />
    </main>
  );
}

这用的是基本的 FacePile 包含在这个软件包中的组件,但您可以 很容易复制此代码并使用 usePresence 直接钩线执行您的 自己的风格.

反应原生支持

如果您在使用 React Natural ,请安装这些可选的依赖性 :

npx expo install react-native expo-crypto

然后导入 usePresence 钩从 @convex-dev/presence/react-native数字 :

import { usePresence } from "@convex-dev/presence/react-native";

说明: 组件目前没有反应原生 等同,但你可以很容易地创建自己的.

其他功能

系统组件接口 Presence 类的定义 src/client/index.ts它包括维持存在的额外职能 状态,用于查询特定用户或房间的存在.

例如,你可以使用 listUser 函数来检查用户是否在线 房间.

联系或加入 Convex迪斯科德社区 如果你有任何问题或反馈!