IM聊天系统的前端架构

最近几个月团队主要开发了基于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模板渲染类
• 本地存储类
• 页面交互效果类
• 操作日志类
• 消息模板类