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