了解如何建立实时聊天

百变鹏仔 4天前 #JavaScript

文章标签实时

在本教程中，我们将指导您使用 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-tscd realtime-chat

2.安装所需的库

接下来，为我们的项目安装必要的库：

npm install @superviz/sdk uuid react-icons

3. 配置顺风

在本教程中，我们将使用 tailwind css 框架。首先，安装 tailwind 软件包。

npm install -d tailwindcss postcss autoprefixernpx 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";

说明：

2. 定义常量

定义 api 密钥、房间 id 和消息类型的常量。

const apikey = import.meta.env.vite_superviz_api_key as string; const room_id = 'realtime-chat'; type message = realtimemessage &amp; {     data: {         participantname: string;         message: string;     } }

说明：

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>([]);</message></any>

说明：

4. 初始化superviz

创建一个函数来初始化 superviz 并设置实时消息处理。

const initialize = usecallback(async () =&gt; {     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, () =&gt; {         channel.current = realtime.connect('message-topic');         channel.current.subscribe('message', (data: message) =&gt; {             setmessages((prev) =&gt; [...prev, data].sort((a, b) =&gt; a.timestamp - b.timestamp));        });     }); }, [initialized]);

说明：

5. 处理发送消息

创建一个向聊天发送消息的函数。

const sendmessage = usecallback(() =&gt; {     if (!channel.current) return;     channel.current.publish('message', {         message,         participantname: participant.current!.name,     });     setmessage(''); }, [message]);

说明：

6.使用effect hook进行初始化

使用 useeffect 钩子在组件挂载时触发初始化函数。

useeffect(()  =&gt;  {  initialize();},  [initialize]);

说明：

第三步：渲染聊天界面

最后返回用于渲染聊天界面的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) =&gt; (                         <div classname="{`${message.participantid" participant.current : w-full flex mb-2>                             <div classname="{`${message.participantid" participant.current : text-black p-2 rounded-lg max-w-xs>                                 <div classname="{`${message.participantid" participant.current : 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)}                         /&gt;                         <button classname="bg-purple-400 text-white px-4 py-2 rounded-full disabled:opacity-50" onclick="{sendmessage}" disabled>                             <iomdsend></iomdsend></button>                     </div>                 </main></div>         )

说明：

第 4 步：了解项目结构

以下是项目结构如何支持实时聊天应用程序的快速概述：

app.tsx：
聊天界面： 以聊天气泡的形式显示消息，并提供输入字段和发送按钮供用户发送消息。
实时通信： 使用 superviz 管理参与者之间的实时通信。

第 5 步：运行应用程序

1.启动react应用程序

要运行您的应用程序，请在项目目录中使用以下命令：

npm run dev

此命令将启动开发服务器并在默认 web 浏览器中打开您的应用程序。您可以与聊天界面互动，并在其他参与者加入时实时查看消息。

2. 测试应用程序

概括

在本教程中，我们使用 superviz 构建了一个实时聊天应用程序。我们配置了一个 react 应用程序来处理实时消息传递，使多个用户能够无缝通信。此设置可以扩展和定制，以适应需要实时通信的各种场景。

请随意探索 github 存储库中的完整代码和更多示例以了解更多详细信息。

文章推荐

了解如何建立实时聊天

先决条件

创建一个帐户

检索开发者令牌

第 1 步：设置您的 react 应用程序

1. 创建一个新的react项目

2.安装所需的库

3. 配置顺风

4. 设置环境变量

第 2 步：实现主应用程序

1. 实现app组件

2. 定义常量

3. 创建应用程序组件

4. 初始化superviz

5. 处理发送消息

6.使用effect hook进行初始化

第三步：渲染聊天界面

第 4 步：了解项目结构

第 5 步：运行应用程序

1.启动react应用程序

2. 测试应用程序

概括

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？