在本教程中，我们将指导您使用 superviz 构建实时聊天应用程序。实时聊天是现代 web 应用程序的一项重要功能，它使用户能够即时相互通信。无论您是在构建协作平台、客户支持工具还是社交网站，添加实时聊天都可以增强用户交互和参与度。
我们将演示如何设置一个简单的聊天界面，参与者可以在其中实时发送和接收消息。在本教程结束时，您将拥有一个功能齐全的聊天应用程序，您可以扩展和自定义该应用程序以满足您的特定需求。
让我们开始吧！
先决条件
要学习本教程，您将需要一个 superviz 帐户和一个开发者令牌。如果您已经拥有帐户和开发者令牌，则可以继续下一步。
创建一个帐户
要创建帐户，请访问 https://dashboard.superviz.com/register 并使用 google 或电子邮件/密码创建帐户。请务必注意，使用电子邮件/密码时，您将收到一个确认链接，您需要点击该链接来验证您的帐户。
检索开发者令牌
要使用 sdk，您需要提供开发者令牌，因为此令牌对于将 sdk 请求与您的帐户关联起来至关重要。您可以从仪表板检索开发和生产 superviz 令牌..
复制并保存开发者令牌，因为您在本教程的后续步骤中将需要它。
第 1 步：设置您的 react 应用程序
首先，您需要建立一个新的 react 项目，我们将在其中集成 superviz 进行实时通信。
1. 创建一个新的react项目
首先，使用 create react app with typescript 创建一个新的 react 应用程序。
npm create vite@latest realtime-chat -- --template react-ts cd realtime-chat
2.安装所需的库
接下来，为我们的项目安装必要的库：
npm install @superviz/sdk uuid react-icons
- @superviz/sdk: 用于集成实时通信功能。
- uuid： 用于生成唯一标识符的库，可用于创建唯一的参与者 id。
- react-icons： 用于在 react 应用程序中包含图标的库，此处用于发送按钮图标。
3. 配置顺风
在本教程中，我们将使用 tailwind css 框架。首先，安装 tailwind 软件包。
npm install -d tailwindcss postcss autoprefixer npx tailwindcss init -p
然后我们需要配置模板路径。在项目根目录中打开 tailwind.config.js 并插入以下代码。
/** @type {import('tailwindcss').config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
然后我们需要将 tailwind 指令添加到全局 css 文件中。 (src/index.css)
@tailwind base; @tailwind components; @tailwind utilities;
4. 设置环境变量
在项目根目录中创建一个 .env 文件并添加 superviz 开发人员密钥。此密钥将用于通过 superviz 服务验证您的应用程序。
vite_superviz_api_key=your_superviz_developer_key
第 2 步：实现主应用程序
在这一步中，我们将实现主要应用程序逻辑来初始化 superviz 并处理实时聊天消息。
1. 实现app组件
打开 src/app.tsx 并使用 superviz 设置主应用程序组件来管理聊天功能。
import { v4 as generateid } from 'uuid';
import { usecallback, useeffect, usestate, useref } from "react";
import supervizroom, { realtime, realtimecomponentevent, realtimemessage } from '@superviz/sdk';
import { iomdsend } from "react-icons/io";
说明：
- 导入： 从 react、superviz、uuid 和 react icons 导入必要的组件，用于管理状态、初始化 superviz 和渲染聊天界面。
2. 定义常量
定义 api 密钥、房间 id 和消息类型的常量。
const apikey = import.meta.env.vite_superviz_api_key as string;
const room_id = 'realtime-chat';
type message = realtimemessage & {
data: {
participantname: string;
message: string;
}
}
说明：
- apikey: 从环境变量中检索 superviz api 密钥。
- room_id: 定义 superviz 会话的房间 id。
- 消息： 扩展 realtimemessage 以包含参与者姓名和消息内容的类型。
3. 创建应用程序组件
设置主 app 组件并初始化状态变量和引用。
export default function app() {
const participant = useref({
id: generateid(),
name: 'participant-name',
});
const channel = useref<any | null>(null);
const [initialized, setinitialized] = usestate(false);
const [message, setmessage] = usestate('');
const [messages, setmessages] = usestate<message[]>([]);
说明：
- 参与者： 使用 useref 存储当前参与者的 id 和名称。
- 频道： 存储对实时通信频道的引用。
- 已初始化： 跟踪 superviz 是否已初始化。
- 消息&消息：管理当前输入的消息和聊天消息列表。
4. 初始化superviz
创建一个函数来初始化 superviz 并设置实时消息处理。
const initialize = usecallback(async () => {
if (initialized) return;
const superviz = await supervizroom(apikey, {
roomid: room_id,
participant: participant.current,
group: {
id: 'realtime-chat',
name: 'realtime-chat',
},
});
const realtime = new realtime();
superviz.addcomponent(realtime);
setinitialized(true);
realtime.subscribe(realtimecomponentevent.realtime_state_changed, () => {
channel.current = realtime.connect('message-topic');
channel.current.subscribe('message', (data: message) => {
setmessages((prev) => [...prev, data].sort((a, b) => a.timestamp - b.timestamp));
});
});
}, [initialized]);
说明：
- initialize: 初始化 superviz，设置实时组件，订阅消息主题。
- 实时： 处理聊天的实时通信。
- channel.current: 存储与“消息主题”通道的连接，消息在该通道中发布和订阅。
5. 处理发送消息
创建一个向聊天发送消息的函数。
const sendmessage = usecallback(() => {
if (!channel.current) return;
channel.current.publish('message', {
message,
participantname: participant.current!.name,
});
setmessage('');
}, [message]);
说明：
- sendmessage: 将当前消息发布到“message-topic”频道并重置消息输入。
6.使用effect hook进行初始化
使用 useeffect 钩子在组件挂载时触发初始化函数。
useeffect(() => {
initialize();
}, [initialize]);
说明：
- useeffect: 组件挂载时调用一次初始化函数，设置 superviz 环境和实时聊天。
第三步：渲染聊天界面
最后返回用于渲染聊天界面的jsx结构。
return (
<div classname='w-full h-full bg-gray-200 flex items-center justify-center flex-col'>
<header classname='w-full p-5 bg-purple-400 flex items-center justify-between'>
<h1 classname='text-white text-2xl font-bold'>realtime chat</h1>
</header>
<main classname='flex-1 flex w-full flex-col overflow-hidden'>
<div classname='flex-1 bg-gray-300 w-full p-2'>
{
messages.map((message) => (
<div classname={`${message.participantid === participant.current!.id ? 'justify-end' : 'justify-start'} w-full flex mb-2`}>
<div classname={`${message.participantid === participant.current!.id ? 'bg-purple-200' : 'bg-blue-300'} text-black p-2 rounded-lg max-w-xs`}>
<div classname={`${message.participantid === participant.current!.id ? 'text-right' : 'text-left'} text-xs text-gray-500`}>
{message.participantid === participant.current!.id ? 'you' : message.data.participantname}
</div>
{message.data.message}
</div>
</div> )) }
</div>
<div classname='p-2 flex items-center justify-between gap-2 w-full'>
<input
type="text"
placeholder="type your message..."
classname="flex-1 border rounded-full px-4 py-2 focus:outline-none"
value={message}
onchange={(e) => setmessage(e.target.value)}
/>
<button
classname='bg-purple-400 text-white px-4 py-2 rounded-full disabled:opacity-50'
onclick={sendmessage}
disabled={!message || !channel.current}
>
<iomdsend />
</button>
</div>
</main>
</div>
)
说明：
- 聊天界面： 显示聊天消息和带有发送按钮的输入字段。根据消息是由当前参与者还是其他人发送，消息的样式有所不同。
第 4 步：了解项目结构
以下是项目结构如何支持实时聊天应用程序的快速概述：
- app.tsx：
- 初始化 superviz 并设置实时聊天功能。
- 处理实时发送和接收聊天消息。
- 聊天界面： 以聊天气泡的形式显示消息，并提供输入字段和发送按钮供用户发送消息。
- 实时通信： 使用 superviz 管理参与者之间的实时通信。
第 5 步：运行应用程序
1.启动react应用程序
要运行您的应用程序，请在项目目录中使用以下命令：
npm run dev
此命令将启动开发服务器并在默认 web 浏览器中打开您的应用程序。您可以与聊天界面互动，并在其他参与者加入时实时查看消息。
2. 测试应用程序
- 实时消息传递： 在多个浏览器窗口或选项卡中打开应用程序以模拟多个参与者并验证消息是否实时发送和接收。
- 协作交互： 通过发送消息并观察所有参与者的聊天更新情况来测试应用程序的响应能力。
概括
在本教程中，我们使用 superviz 构建了一个实时聊天应用程序。我们配置了一个 react 应用程序来处理实时消息传递，使多个用户能够无缝通信。此设置可以扩展和定制，以适应需要实时通信的各种场景。
请随意探索 github 存储库中的完整代码和更多示例以了解更多详细信息。
