封装WebSocket消息推送！

前言

在做一些后台项目的时候，有时候需要前端去实时接收消息；一种比较原始的做法就是前端每隔一段时间主动去轮询服务器，如果用户较多的情况下，会给服务器造成一定的压力，而且访问的频率也无法准确把握，所以这种需求还是使用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