首页 > 文章 > 前端

了解如何建立实时聊天

来源：dev.to

时间：2024-10-11 15:48:52 455浏览收藏

哈喽！今天心血来潮给大家带来了《了解如何建立实时聊天》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

了解如何建立实时聊天

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

说明：