前言
在做一些后台项目的时候,有时候需要前端去实时接收消息;一种比较原始的做法就是前端每隔一段时间主动去轮询服务器,如果用户较多的情况下,会给服务器造成一定的压力,而且访问的频率也无法准确把握,所以这种需求还是使用websocket来解决。
下面我们就从0到1封装一套websocket消息推送功能模块。
一、需求梳理
我们还是使用class来封装,该模块需要提供以下功能:
- WebSocket对象的创建
- WebSocket对象的关闭
- 启用心跳机制,避免断连
- 消息推送,接收到消息后进行业务逻辑处理
- 重连机制,如果断连后尝试一定次数的重连,超过最大次数后仍然失败则关闭连接
下面我们就逐一实现这些功能。
二、功能实现
1.创建WebSocket类
新建WebSocketManager.js文件,创建一个WebSocketManager类,同时初始化一些参数,具体代码如下:
export default class WebSocketManager {
constructor(url = null, userId = null, receiveMessageCallback = null) {
this.socket = null // WebSocket 对象
this.pingTimeout = null // 心跳计时器
this.reconnectTimeout = 5000 // 重连间隔,单位:毫秒
this.maxReconnectAttempts = 10 // 最大重连尝试次数
this.reconnectAttempts = 0; // 当前重连尝试次数
this.id = userId //用户ID(业务逻辑,根据自己业务需求调整)
this.url = url // WebSocket 连接地址
this.receiveMessageCallback = receiveMessageCallback // 接收消息回调函数
}
}
2.初始化WebSocket对象
初始化完成后,我们先实现一个initialize方法,在这里我们要监测一下使用时候是否传入了webSocket连接的服务器地址、用户id等;如果没有问题,则连接WebSocket
export default class WebSocketManager {
constructor() {
// ...省略
}
/**
* 初始化
*/
async start() {
if( this.url && this.id){
// 连接WebSocket
this.connectWebSocket()
}else{
console.error('WebSocketManager erros: 请传入连接地址和用户id')
}
}
}
该处使用的url网络请求的数据。
3.创建WebSocket连接
初始化完成后,我们就开始来实现一下WebSocket连接,标准的WebSocket构造函数以url作为其第一个参数,第二个参数是可选的,这里根据服务端那边的约定去进行处理即可,这里要求传入用户id+一个随机值去生成唯一标识符。
export default class WebSocketManager {
constructor() {
// ...省略
}
/**
* 创建WebSocket连接
*/
connectWebSocket() {
// 通过id生成唯一值(服务端要求,具体根据自己业务去调整)
let id = `${this.id}-${Math.random()}`
// 创建 WebSocket 对象
this.socket = new WebSocket(this.url, id)
// 处理连接打开事件
this.socket.addEventListener('open', event => {
// 心跳机制
this.startHeartbeat()
})
// 处理接收到消息事件
this.socket.addEventListener('message', event => {
this.receiveMessage(event)
})
// 处理连接关闭事件
this.socket.addEventListener('close', event => {
// 清除定时器
clearTimeout(this.pingTimeout)
clearTimeout(this.reconnectTimeout)
// 尝试重连
if (this.reconnectAttempts < this.maxReconnectAttempts) {
this.reconnectAttempts++
this.reconnectTimeout = setTimeout(() => {
this.connectWebSocket()
}, this.reconnectTimeout)
} else {
// 重置重连次数
this.reconnectAttempts = 0
console.error('WebSocketManager erros: Max reconnect attempts reached. Unable to reconnect.')
}
})
// 处理 WebSocket 错误事件
this.socket.addEventListener('error', event => {
console.error('WebSocketManager error:', event)
})
}
}
4.接收消息
export default class WebSocketManager {
constructor() {
// ...省略
}
/**
* 接收到消息
*/
receiveMessage(event) {
// 根据业务自行处理
console.log('receiveMessage:', event.data)
this.receiveMessageCallback && receiveMessageCallback(event.data)
}
}
这里我们只简单处理一下,接收到消息后,我们根据消息内容做不同的处理。
4.关闭连接
如果用户要退出登录,我们可以写一个方法来实现关闭连接,同时清除定时器以及当前重连尝试次数,具体代码如下:
export default class WebSocketManager {
constructor() {
// ...省略
}
/**
* 关闭连接
*/
closeWebSocket() {
this.socket.close()
// 清除定时器 重置重连次数
clearTimeout(this.pingTimeout)
clearTimeout(this.reconnectTimeout)
this.reconnectAttempts = 0
}
}
4.关闭连接
导入WebSocketManager后,我们就可以使用它了,如下所示:
export default class WebSocketManager {
constructor() {
// ...省略
}
/**
* 关闭连接
*/
closeWebSocket() {
this.socket.close()
// 清除定时器 重置重连次数
clearTimeout(this.pingTimeout)
clearTimeout(this.reconnectTimeout)
this.reconnectAttempts = 0
}
}
总结
以上就是使用WebSocket的一个简单例子,具体实现根据业务需求进行调整即可