在开始搭建我们自己的实时聊天系统之前,我们需要思考几个问题:有多少用户?如何扩展?用户分布在哪里?如何确保消息的传递(低延迟,当然)?做过IM或者信令的朋友都知道,实时传输对服务器的要求很高。以社交APP为例,每秒需要处理几十万甚至更多的文字和图片的传输;在弱网络丢包的情况下,需要保证报文的完整性,同时保证报文已经送达;其中的技术原理和解决方案不是一个WebSocket可以涵盖的。就消息要到达的范围而言,系统不仅要有选择最优链路的能力,还要有多活链路。例如:一旦链接出现问题,消息可能无法传递。然而,真实的环境往往比我们想象的理想环境更恶劣、更残酷。与此同时,我们还要面对:网络丢包,用户数呈指数级增长而无法继续,甚至系统宕机等等。因此,构建什么样的聊天系统取决于我们产品的需求,根据需求选择集群部署数量、节点分布等诸多因素。实时聊天系统应具备的特性高并发低延迟消息必须达到弱网络抵抗集群部署消息推送(可选)实时聊天系统应具备的功能还增加了实时通讯模块图文传输,衍生出直播、主播PK等多种玩法,其中很大一部分是通过自定义实时消息来完成的。举个简单的例子:微信手机,A给B发一条消息,有状态,B收到或挂断操作后,状态会被锁定,无法更改,系统会把结果发给A。这个过程是呼叫呼叫邀请。总之,实时消息传递不仅可以给沟通带来便利,还可以帮助我们丰富业务流程。Vue3+Tailwind+RTM=实时聊天系统项目说明本项目业务代码为0,只能指定几个固定频道房间来演示群消息。如果需要,可以连接到自己的业务系统,替换掉项目中的随机的。头像、随机昵称、个性签名等数据;完善点对点消息、来电邀请等功能;同时也可以通过RTM的自定义消息进行广播,处理更复杂的情况。源码请查看GitHubDemoGiteeDemo使用Vite搭建Vue3项目使用Vite搭建Vue3项目,详见官方文档。创建项目#npm6.xnpminit@vitejs/appmy-chat-app--templatevue#npm7+,需要额外的双破折号:npminit@vitejs/appmy-chat-app----templatevue#yarnyarncreate@vitejs/appmy-chat-app--templatevueinstalldependenciescdmy-chat-appnpminstallnpmrundevTailWind+TailWindComponents=UI我们为什么选择tailwindcss?tailwindcss不仅省去了写css的时间,还免去了命名的麻烦。同时,tailwindComponents提供了很多免费的(用tailwind开发的)UI组件,我们可以从中找到一些现成的UI组件。为什么不这样做呢?例如:下面是我们从tailwindComponents中找到的一些聊天相关的组件。安装tailwindcssnpminstall-Dtailwindcss@latestpostcss@latestautoprefixer@latest自动生成tailwind配置文件npxtailwindcssinit-pconfiguretailwindcss这里不会做代码搬运工,具体请参考官方文档,中文请参考中文文档。集成RTM模块项目使用的RTMSDK,相关API请参考官方文档,您可以根据需要进行替换。安装RTMnpminstallar-rtm-sdk-DimportRTMSDKimportArRTMfrom"ar-rtm-sdk"创建客户端constrtmClient=ArRTM.createInstance(Config.RTM_APP_ID,{//设置日志级别logFilter:ArRTM.LOG_FILTER_OFF});登录RTM系统//随机用户ID,可以连接自己业务系统的UIDconstrandomUserId=''+Math.ceil(Math.random()*Math.pow(10,10));constuid=awaitrtmClient.login({uid:randomUserId});加入群组&监听群组消息回调//创建群组constrtmChannel=rtmClient.createChannel(group.groupId);//加入群组awaitrtmChannel.join();//监听群组消息rtmChannel.on("ChannelMessage",(message,peerId,messagePros)=>{if(message.text){//解析消息内容constmsgObj=JSON.parse(message.text);//TODO...(例如在页面上显示消息)}});根据业务扩展点对点消息对接业务系统后,可以使用业务中的UID作为RTM的UID登录,根据UID方向发送点对点消息。实时音视频通话与业务系统对接后,可以向指定UID的用户发起通话邀请。对方收到后,双方加入同一个音视频交流室。前提是项目需要集成音视频通讯模块。
