web 技术分享| 一人一天一个可移植的实时聊天系统

在开始打造我们自己的实时聊天系统之前，我们需要先思考🤔几个问题：

• 用户体量大概多少？如何扩容？

• 用户分布的区域？

• 如何保证消息（低延时、必）送达？

做过 IM 或信令的小伙伴都知道，实时传输对服务端有着颇高的要求。就以社交 APP 为例，每秒种要处理成百上千甚至更多的文字和图片的传输；弱网丢包的情况要保证消息的完整性的同时还要确保消息已送达；这其中的技术原理和解决方案不是一个 WebSocket 所能涵盖的。

就消息必达而言，系统除了要有择优链路能力以外，还要具备多活链路。比如：一旦有一条链路出现问题，那么该消息就不一定能够送达。然而现实环境往往必我们想象中理想环境来的更糟糕和残酷，与此同时我们还要面对：网络丢包、用户量指数上升并发上不去，甚至系统宕机等等。

因此，要打造一个怎样的聊天系统，取决于我们产品的需求，根据需要选择集群部署的数量、节点的分布等诸多因素。

实时聊天系统应具备的特性

• 高并发

• 低延时

• 消息必达

• 弱网抗性

• 集群部署

• 消息推送（可选）

实时聊天系统应具备的功能

• 点对点消息

• 群组消息

• 呼叫邀请

现在的社交 APP 玩法十分丰富，提供图文传输还加入了实时通讯模块，衍生出了直播连麦、主播 PK 等诸多玩法，其中很大一部分都是通过自定义实时消息来完成。举个简单的例子：微信电话，A 给 B 发送一条带状态的消息、B 接收或者挂断操作之后，状态会被锁定之后无法变更，系统再将结果发送给 A，这个过程我们称之为呼叫邀请。

总之，实时消息不仅能带来通讯便利，同时还能辅助我们丰富我们的业务流程。

Vue3 + Tailwind + RTM = 实时聊天系统

项目说明

本项目 0 业务代码，因此只能通过指定几个固定的频道房间，来演示群组消息，大家如果有需要可以对接自己的业务系统替换项目中的随机头像、随机昵称、个性签名等数据；完善点对点消息、呼叫邀请等功能；同时还可以通过 RTM 的自定义消息进行广播处理更多复杂的情形。

源码

源码请查看

• GitHub Demo
  

• Gitee Demo
  

使用 Vite 构建 Vue3 项目

使用 Vite 构建一个 Vue3 项目，详情参考官方文档。创建项目

# npm 6.xnpm init @vitejs/app my-chat-app --template vue
# npm 7+, 需要额外的双横线：npm init @vitejs/app my-chat-app -- --template vue
# yarnyarn create @vitejs/app my-chat-app --template vue

安装依赖

cd my-chat-app
npm installnpm run dev

TailWind + TailWindComponents = UI

为什么我们要选择 tailwindcss ？tailwindcss 不仅节省了编写 css 的时间，还避免了命名烦恼，同时tailwindComponents 提供了很多免费（使用 tailwind 开发）的 UI 组件，我们可以从中找到一些现成的 UI 组件，何乐而不为呢？比如：下面是我们从tailwindComponents 查找到的一些 chat 相关的组件。

安装 tailwindcss

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

自动生成 tailwind 的配置文件

npx tailwindcss init -p

配置 tailwindcss 这里就不做代码的搬运工了，详情请参考官方文档 ，中文请参考中文文档。

集成 RTM 模块

项目使用的 RTM SDK，相关 API 请查看官方文档，大家可以根据需求替换。

安装 RTM

npm install ar-rtm-sdk -D

导入 RTM SDK

import ArRTM from "ar-rtm-sdk"

创建客户端

const rtmClient = ArRTM.createInstance(Config.RTM_APP_ID, {  // 设置日志级别  logFilter: ArRTM.LOG_FILTER_OFF});

登录 RTM 系统

// 随机用户 ID，可以对接自己业务系统中的 UIDconst randomUserId = '' + Math.ceil(Math.random() * Math.pow(10, 10));const uid = await rtmClient.login({  uid: randomUserId});

加入群组 &监听群组消息回调

// 创建群组const rtmChannel = rtmClient.createChannel(group.groupId);// 加入群组await rtmChannel.join();// 监听群组消息rtmChannel.on("ChannelMessage", (message, peerId, messagePros) => {  if (message.text) {    // 解析消息内容    const msgObj = JSON.parse(message.text);    // TODO...(例如，将消息显示到页面上)  }});

根据业务拓展

• 点对点消息当对接业务系统后，可以使用业务中的 UID 作为 RTM 的 UID 登录，可以根据 UID 定向发送点对点消息。

• 实时音视频通话当对接业务系统后，可以向指定 UID 的用户发起呼叫邀请，在对方接收之后，双方加入同一个音视频通讯的房间，前提是项目需要集成音视频通讯的模块。