WebSocket在聊天界面的使用，以及踩的一些移动端的坑 (上)

---

最近在开发一个客服页面，其中包括移动端和pc端。主要运用WebSocket进行与后台进行聊天通讯(当然不兼容WebSocket的使用的是轮询的方式)！

一、WebSocket相比http轮询的优点和缺点?

优点

• websocket是一种长连接双向通迅的方式，不需要前端一直发送http请求询问后台，客服是否有消息回复。同样的也减少了客户的网络带宽和计算资源。

缺点

• 各个浏览器的兼容性不一致，以及服务器长期维护长连接需要一定的成本。
• WebSocket只能传输字符串

二、WebSocket API介绍

详细的API可以查看MDN, 我这里只介绍我在项目里用到的。https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

• WebSocket相当于就是一个构造函数 new WebSocket('ws://localhost:8080')相当于创建了一个websocket链接

• WebSocket.readyState监听WebSocket的连接状态,

  • 0 表示正在连接
  • 1 表示已经连接并可以通讯了
  • 2 表示正在关闭连接
  • 3 表示连接已经关闭或者连接失败

• WebSocket.onopen连接成功后会走进此方法

• WebSocket.onerror 连接失败回调函数

• WebSocket.onclose连接关闭的回调函数

• WebSocket.onmessage服务器推送消息之后的回调函数

• WebSocket.close()主动关闭当前连接

• WebSocket.send()发送消息给后台

三、WebSocket运用中的注意事项（后期会将实现方式单独写一篇文章）

• Websocket需要与后台实现一个ping,pong的心跳保持，用于监测服务器是否已经断开连接。
• WebSocket在移动端会有很多种场景导致连接会断开，所以需要实现一个websocket断开与重连的功能。
• WebSocket发送消息后，后台是否收到或者是否发送给第三方，需要实现一个消息确认机制，实现逻辑大概是(使用发布订阅模式)前端发送消息的时候带一个uuid并且订阅这个uuid,当后台收到后会返回一个确认消息指令带上这个uuid，然后前端 就可以根据之前订阅接受到的回调写上消息确认的逻辑了。