websocket使用Share

一、背景

由于近期在公司项目中，业务涉及实时的通知，经过商讨决定接入websocket，分别使用在管理后台PC端接受消息，和在APP端接受订单消息。下面是具体的实现：

二、具体实现

WebSocket Component with Heartbeat Reconnection
├─ Properties
│  ├─ url: string - WebSocket服务器的URL
│  ├─ onOpen: function - 连接建立时的回调函数
│  ├─ onClose: function - 连接关闭时的回调函数
│  ├─ onMessage: function - 接收到消息时的回调函数
│  ├─ onError: function - 发生错误时的回调函数
│  ├─ heartbeatInterval: number - 心跳间隔时间（毫秒）
│  └─ reconnectInterval: number - 重连间隔时间（毫秒）
├─ Methods
│  ├─ connect(): void - 建立WebSocket连接
│  ├─ disconnect(): void - 关闭WebSocket连接
│  ├─ send(message: string): void - 发送消息给WebSocket服务器
│  └─ startHeartbeat(): void - 开始心跳检测
└─ Events
   ├─ onOpen: Event - 连接建立时触发的事件
   ├─ onClose: Event - 连接关闭时触发的事件
   ├─ onMessage: Event - 接收到消息时触发的事件
   └─ onError: Event - 发生错误时触发的事件

1、web端

实现思路：

• 实例化WebSocket对象，初始化连接服务器
• 打开链接，绑定消息监听函数、关闭函数、异常error函数，断开重连等
• 实现心跳检查
• 在登陆成功后连接后台，在收到消息后展示对应的消息徽标，播放音频文件
• 页面销毁后关闭websocket

代码如下：

业务内使用：

import { connectWebsocket, closeWebsocket } from '@/utils/websockt.js';
connectWebsocket(
  'wss://www.youjiayuanlvyou.com/wss/websocket/user', // 链接地址
  // 传递给后台的数据
  {},
  // 成功拿到后台返回的数据的回调函数
  data => {
    // 收到消息TODO:
  },
  // websocket连接失败的回调函数
  () => {
    // 链接失败回调
  }
);;

websockt.js 内详细实现：

// websocket实例
let wsObj = null;
// ws连接地址
let wsUrl = null;
// let userId = null;
// 是否执行重连 true/不执行 ； false/执行
let lockReconnect = false;
// 重连定时器
let wsCreateHandler = null;
// 连接成功，执行回调函数
let messageCallback = null;
// 连接失败，执行回调函数
let errorCallback = null;
// 发送给后台的数据
let sendDatas = {};


/**
 * 发起websocket请求函数
 * @param {string} url ws连接地址
 * @param {Object} agentData 传给后台的参数
 * @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
 * @param {function} errCallback ws连接错误的回调函数
 */
export const connectWebsocket = (url, agentData, successCallback, errCallback) => {
  wsUrl = url;
  createWebSoket();
  messageCallback = successCallback;
  errorCallback = errCallback;
  sendDatas = agentData;
}

// 手动关闭websocket （这里手动关闭会执行onclose事件）
export const closeWebsocket = () => {
  if (wsObj) {
    writeToScreen('手动关闭websocket');
    wsObj.close() // 关闭websocket
    // wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
    // 关闭重连
    lockReconnect = true;
    wsCreateHandler && clearTimeout(wsCreateHandler);
    // 关闭心跳检查
    heartCheck.stop();
  }
}

// 创建ws函数
const createWebSoket = () => {
  if (typeof (WebSocket) === 'undefined') {
    writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
    return false
  }
  // const host = window.location.host;
  // userId = GetQueryString("userId");
  // wsUrl = "ws://" + host + "/websoket" + userId;

  try {
    wsObj = new WebSocket(wsUrl);
    initWsEventHandle();
  } catch (e) {
    writeToScreen("连接异常，开始重连");
    // reconnect();
  }
}

const initWsEventHandle = () => {
  try {
    // 连接成功
    wsObj.onopen = (event) => {
      onWsOpen(event);
      heartCheck.start();
    }

    // 监听服务器端返回的信息
    wsObj.onmessage = function (event) {
      writeToScreen(`onWsMessage接收到服务器的数据: ${event.data}`);
      onWsMessage(event);
      heartCheck.start();
    }

    wsObj.onclose = (event) => {
      writeToScreen('onclose执行关闭事件');
      onWsClose(event);
    }

    wsObj.onerror = (event) => {
      writeToScreen('onerror执行error事件，开始重连');
      onWsError(event);
      reconnect();
    }
  } catch (err) {
    writeToScreen('绑定事件没有成功，开始重连');
    reconnect();
  }
}

const onWsOpen = (event) => {
  writeToScreen('CONNECT');
  // // 客户端与服务器端通信
  // wsObj.send('我发送消息给服务端');
  // 添加状态判断，当为OPEN时，发送消息
  if (wsObj.readyState === wsObj.OPEN) { // wsObj.OPEN = 1 
    // 发给后端的数据需要字符串化
    wsObj.send(JSON.stringify(sendDatas));
  }
  if (wsObj.readyState === wsObj.CLOSED) { // wsObj.CLOSED = 3 
    writeToScreen('wsObj.readyState=3, ws连接异常，开始重连');
    reconnect();
    errorCallback();
  }
}
const onWsMessage = (event) => {
  const jsonStr = event.data;
  messageCallback(jsonStr);
}
const onWsClose = (event) => {
  writeToScreen('DISCONNECT');
  // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
  // e.code !== 1000  表示非正常关闭。
  // console.log('onclose event: ', event)
  if (event && event.code !== 1000) {
    writeToScreen('非正常关闭');
    errorCallback();
    // 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
    reconnect();
  }
}
const onWsError = (event) => {
  writeToScreen('onWsError: ', event.data);
  errorCallback();
}

const writeToScreen = (massage) => {
  console.log(massage);
}

// 重连函数
const reconnect = () => {
  if (lockReconnect) {
    return;
  }
  // writeToScreen('3秒后重连');
  lockReconnect = true;
  // 没连接上会一直重连，设置延迟避免请求过多
  wsCreateHandler && clearTimeout(wsCreateHandler);
  wsCreateHandler = setTimeout(() => {
    // writeToScreen('重连...' + wsUrl);
    createWebSoket();
    lockReconnect = false;
    writeToScreen('重连完成');
  }, 600000);
}

// 从浏览器地址中获取对应参数
const GetQueryString = (name) => {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  // 获取url中 ? 符后的字符串并正则匹配
  let r = window.location.search.substr(1).match(reg);
  let context = "";
  r && (context = r[2]);
  reg = null;
  r = null;
  return context;
}


// 心跳检查（看看websocket是否还在正常连接中）
let heartCheck = {
  timeout: 30000,
  timeoutObj: null,
  serverTimeoutObj: null,
  // 重启
  reset() {
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
    this.start();
  },
  // 停止
  stop() {
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
  },
  // 开启定时器
  start() {
    this.timeoutObj && clearTimeout(this.timeoutObj);
    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
    // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
    this.timeoutObj = setTimeout(() => {
      // writeToScreen("心跳检查，发送ping到后台");
      try {
        const datas = { ping: true };
        wsObj.send(JSON.stringify(datas));
      } catch (err) {
        // writeToScreen("发送ping异常");
      }
      // console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj)
      // 内嵌定时器
      this.serverTimeoutObj = setTimeout(() => {
        writeToScreen("没有收到后台的数据，重新连接");
        reconnect();
      }, this.timeout)
    }, this.timeout)
  }
}

2.、APP端（uniapp）

实现思路：

• 与上方基本相同，额外增加针对H5与APP不同的处理方式，APP使用uni内置websocket来创建链接

代码如下

使用上也与web端的不同

import WS from "./common/utils/webSocket.js";
if (this.ws) {
  await this.ws.closeSocket();
}
this.ws = new WS();
this.ws.getWebSocketMsg(res => {
  //  收到消息TODO:
})

// 在业务层页面中监听消息
uni.onSocketMessage((res) => {
  // 收到消息TODO:
});

websocket.js 内详细实现

// @/utils/websocket.js
import { isJSON } from "./utils.js";
import { socketUrl } from "../base.js";

class WebSocketClass {
  constructor(url = socketUrl) {
    this.lockReconnect = false; // 是否开始重连
    this.wsUrl = ""; // ws 地址
    this.globalCallback = null; // 回调方法
    this.userClose = false; // 是否主动关闭
    this.createWebSocket(url);
    // 心跳相关
    this.timeout = 30000;
    this.timeoutObj = null;
    this.serverTimeoutObj = null;
  }
  // 初始化
  initEventHandle() {
    /**
     * 监听WebSocket连接打开成功
     */

    // #ifdef H5
    this.ws.onopen = (event) => {
      this.start();
      console.log("WebSocket连接打开");
    };
    // #endif

    // #ifdef APP-PLUS
    this.ws.onOpen((res) => {
      this.start();
      console.log("WebSocket连接打开");
    });
    // #endif

    /**
     * 连接关闭后的回调函数
     */

    // #ifdef H5
    this.ws.onclose = (event) => {
      if (!this.userClose) {
        this.reconnect(this.wsUrl); //重连
      }
    };
    // #endif

    // #ifdef APP-PLUS
    this.ws.onClose(() => {
      if (!this.userClose) {
        this.reconnect(this.wsUrl); //重连
      }
    });
    // #endif

    /**
     * 报错时的回调函数
     */

    // #ifdef H5
    this.ws.onerror = (event) => {
      this.reconnect(this.wsUrl); //重连
    };
    // #endif

    // #ifdef APP-PLUS
    this.ws.onError(() => {
      this.reconnect(this.wsUrl); //重连
    });
    // #endif

    /**
     * 收到服务器数据后的回调函数
     */

    // #ifdef H5
    this.ws.onmessage = (event) => {
      if (isJSON(event.data)) {
        const jsonobject = JSON.parse(event.data);

        this.globalCallback(jsonobject);
      } else {
        this.globalCallback(event.data);
      }
      this.start();
    };
    // #endif

    // #ifdef APP-PLUS
    this.ws.onMessage((event) => {
      console.log("收到消息", event.data);
      if (isJSON(event.data)) {
        const jsonobject = JSON.parse(event.data);

        this.globalCallback(jsonobject);
      } else {
        this.globalCallback(event.data);
      }
      this.start();
    });
    // #endif
  }
  createWebSocket(url) {
    // #ifdef H5
    if (typeof WebSocket === "undefined") {
      this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
      return false;
    }
    // #endif

    // #ifdef APP-PLUS
    if (typeof uni.connectSocket === "undefined") {
      this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
      return false;
    }
    // #endif

    this.wsUrl = url;
    try {
      // 创建一个this.ws对象【发送、接收、关闭socket都由这个对象操作】

      // #ifdef H5
      this.ws = new WebSocket(this.wsUrl);
      this.initEventHandle();
      // #endif

      // #ifdef APP-PLUS
      this.ws = uni.connectSocket({
        url: this.wsUrl,
        success: (data) => {
          console.log("websocket连接成功");
          this.start();
          this.initEventHandle();
        },
      });
      // #endif
    } catch (e) {
      this.reconnect(url);
    }
  }

  // 关闭ws连接回调
  reconnect(url) {
    if (this.lockReconnect) return;
    this.ws.close();
    this.lockReconnect = true; // 关闭重连，没连接上会一直重连，设置延迟避免请求过多
    setTimeout(() => {
      this.createWebSocket(url);
      this.lockReconnect = false;
    }, 1000);
  }

  // 发送信息方法
  webSocketSendMsg(msg) {
    this.ws &&
      this.ws.send({
        data: msg,
        success: () => {
          console.log("消息发送成功");
        },
        fail: (err) => {
          console.log("关闭失败", err);
        },
      });
  }

  // 获取ws返回的数据方法
  getWebSocketMsg(callback) {
    this.globalCallback = callback;
  }

  // 关闭ws方法
  closeSocket() {
    if (this.ws) {
      this.userClose = true;
      this.ws.close({
        success: (res) => {
          console.log("关闭成功", res);
        },
        fail: (err) => {
          console.log("关闭失败", err);
        },
      });
    }
  }

  writeToScreen(massage) {
    console.log(massage);
  }
  // 心跳
  start() {
    this.timeoutObj && clearTimeout(this.timeoutObj);
    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
    // 有效时间（timeout）之内如果没有收到后台的消息，则认为是连接断开了，需要重连
    this.timeoutObj = setTimeout(() => {
      this.writeToScreen("心跳检查，发送ping到后台");
      try {
        const datas = { ping: true };
        this.webSocketSendMsg(JSON.stringify(datas));
      } catch (err) {
        this.writeToScreen("发送ping异常");
      }
      // console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj)
      // 内嵌定时器
      this.serverTimeoutObj = setTimeout(() => {
        this.writeToScreen("没有收到后台发送得消息， 重新连接")
        this.reconnect(this.wsUrl)
      }, this.timeout)
    }, this.timeout)
  }
  reset() {
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
    this.start();
  }
  // 停止
  stop() {
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
  }
}
export default WebSocketClass;

下面是我在某APP项目中的实践