最近在开发一个客服页面,其中包括移动端和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
,然后前端 就可以根据之前订阅接受到的回调写上消息确认的逻辑了。