IM聊天系统的前端架构

来源:简书 分类: 文章浏览史 发布时间:2020-08-24 20:57:42 最后更新:2020-08-24 浏览:41
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-24 20:57:42

最近几个月团队主要开发了基于websocket的网页版即时聊天IM系统,主要满足客服与用户之前的沟通及问题反馈,包含消息分发,通讯录,日程,任务等功能模块,保证PC在线用户在听课,购买课程,问题反馈等方面的咨询和沟通及时高效的反馈到客服及专区管理员。

IM.png
IM.png

IM即时消息分发,同时包含通讯录,可以进行文字、语音、图片、附件、小视频等聊天,功能基本参照网页版微信、QQ、钉钉这类的应用,面向用户C端更多一点。前端采用了web浏览器嵌入模式,后端采用了IM服务器和接口服务器架构,IM服务器专门负责消息的分发和推送,接口服务器负责所有业务的处理。发开要求:满足基本业务需求,要有丰富的IM交互,开放的结构,能让其自由接入到现有的Web系统。


IM主要基于websocket通讯协议开发的,首先要弄明白WS协议的原理和机制。

WebSocket协议是基于TCP协议并遵从HTTP协议的握手规范的一种通讯协议,其通过发送连接请求,握手,验证握手信息这三个步骤与服务器建立WebSocket连接。

发送连接请求
客户端通过一个格式为:ws://host:port/的请求地址发起WebSocket连接请求,并由JavaScript实现WebSocket API与服务器建立WebSocket连接,其中host为服务器主机IP地址或域名,port为端口。为了让本客服系统能够在不同浏览器建立WebSocket连接,在发送连接请求前,需要开启SockJS的支持,创建一个全双工的信道。

建立websocket连接
建立连接后,可在客户端使用JavaScript实现相关的WebSocket API。相关实现接口如下表:

实现方式 说明

New WebSocket(“ws://host:port/”);   发起与服务器建立WebSocket连接的对象
websocket.onopen()=function(){} 接收连接成功建立的响应函数
websocket.onerror()=function(){}    接收异常信息的响应函数
websocket.onmessage()=functionm(event){}    接收服务器返回的消息函数
websocket.onclose()=function(){}    接收连接关闭的响应函数
sendMessage(event.data)=function(data){}    发送消息函数
websocket.close()=function(){}  连接关闭函数

本地缓存

IM的聊天消息采用本地缓存,能有效的的提高性能

项目功能模块主要分为

  • 主体业务类
  • websocket消息推送
  • websocket消息接受
  • 工具函数类
  • dom模板渲染类
  • 本地存储类
  • 页面交互效果类
  • 操作日志类
  • 消息模板类
php技术微信