本封装方式只是真对目前自己所在公司当下业务需求，后期可能会修改，本文仅仅只作为学习记录。

使用方式

主要使用的方式有4种，建立连接 io()、关闭连接 WS.close()、发送信息使用 WS.send() / io().send() 、监听 WS.on() / io().on() 

  1. import { WSMessageTypeMap, WS, io } from '@/utils/webSocket'
  3. // ---------------------建立连接 -----------------------------
  4. io({...})
  5. // ---------------------关闭连接 -----------------------------
  6. WS.close() 或者 WS.close(()=>{}) // 支持回调
  8. // ---------------------发送 -----------------------------
  9. WS.send({
  10.   type:WSMessageTypeMap['订单状态通知'], // type:必填
  11.   data?:{}
  12. },function (){
  13.   //回调方法
  14. })
  16. // ---------------------监听 -----------------------------
  17. WS.on(WSMessageTypeMap['订单状态通知'],function (){
  18.   //回调方法
  19. })
  20. // 或着
  21. WS.on(WSMessageTypeMap['订单状态通知'],[function (){
  22.   //回调方法
  23. }])

封装过程

WebSocketClient

用于创建 webSocket 实例，并建立连接。

HeartBeat

用于心跳检测，主动向后端发送消息，当一定时间内没有收到后端恢复，就会断开重连。

最终结果：

  1. // 业务类型:0-心跳检测;1-订单状态通知;2-接驾路线通知;3-服务中订单查询。。。。后期会组件扩展增多
  2. export const WSMessageTypeMap = {
  3.   HeartBeat: 0,
  4.   订单状态通知: 1,
  5.   接驾路线通知: 2,
  6.   服务中订单查询: 3,
  7.   司机到达时间: 4,
  8. }
  9. const replaceUrl = (url, opts) => {
  10.   url += '/websocket?'
  12.   for (const key in opts) {
  13.     // HeartBeatTimeout 心跳时间不处理
  14.     if (opts.hasOwnProperty(key) && key != 'HeartBeatTimeout') {
  15.       url = url + `${key}=${opts[key]}&`
  16.     }
  17.   }
  18.   // console.log('🚀 ~ file: webSocket.js ~ line 10 ~ replaceUrl ~ url', url)
  19.   // TODO: 需要支持wss，ws明文传输在生产环境太危险了
  20.   url = url
  21.     .slice(0, -1)
  22.     .split('//')
  23.     .join('/')
  24.     .replace('https:/', 'wss://')
  25.     .replace('http:/', 'ws://')
  26.   return url
  27. }
  29. /**
  30.  *  HeartBeat 心跳检测，防止websocket中途断开，断开后重连
  31.  * @param {object} websocketClient websocketClient实例
  32.  * @param {number} timeout 心跳时间，默认10s
  33.  */
  34. class HeartBeat {
  35.   _timeout = 10000
  36.   _timeoutObj = null
  37.   _serverTimeoutObj = null
  38.   _websocketClient = null
  39.   constructor(websocketClient, timeout) {
  40.     this._websocketClient = websocketClient
  41.     this._timeout = timeout || this._timeout
  42.     this.reset()
  43.     this.start()
  44.   }
  45.   reset() {
  46.     clearTimeout(this._timeoutObj)
  47.     clearTimeout(this._serverTimeoutObj)
  48.     return this
  49.   }
  50.   start() {
  51.     const self = this
  52.     this._timeoutObj && clearTimeout(this._timeoutObj)
  53.     this._serverTimeoutObj && clearTimeout(this._serverTimeoutObj)
  54.     this._timeoutObj = setTimeout(function () {
  55.       // 这里发送一个心跳，后端收到后，返回一个心跳消息，
  56.       // onmessage拿到返回的心跳就说明连接正常
  57.       self._websocketClient.send({ type: WSMessageTypeMap['HeartBeat'] })
  58.       self._serverTimeoutObj = setTimeout(function () {
  59.         // console.log('🚀 ~ file: webSocket.js ~ line 61 ~ HeartBeat ~ setTimeout', '主动关闭连接')
  60.         // 如果超过一定时间还没重置，说明后端主动断开了
  61.         self._websocketClient.close() // 如果onclose会执行reconnect，我们执行close()就行了.如果直接执行 reconnect 会触发onclose导致重连两次
  62.       }, self._timeout)
  63.     }, self._timeout)
  64.   }
  65. }
  66. /**
  67.  * @param {string} url 指定创建连接的地址，默认为 process.env.BASE_API
  68.  * @param {object} opts 指定配置项
  69.  */
  70. export class WebSocketClient {
  71.   _websocket
  72.   _token
  73.   _path // 路径
  74.   _opts
  75.   _readyState
  76.   _isConnected // 是否连接
  77.   openList = [] // 连接成功回调队列
  78.   wsCallbackMap = new Map() // 回调Map
  79.   closewebsocketCallback = () => {} // websocket 关闭回调函数
  80.   _lockReconnect = false // 避免重复连接
  81.   _tt
  82.   HeartBeat = null // 心跳检测对象
  83.   constructor(opts, url) {
  84.     if (WS) return WS
  85.     this._opts = opts
  86.     this.createWebSocket(url)
  87.   }
  88.   createWebSocket(url) {
  89.     if (this._websocket) {
  90.       return this._websocket
  91.     }
  92.     this._path =
  93.       this._path || replaceUrl(url || process.env.BASE_API, this._opts)
  94.     try {
  95.       if ('WebSocket' in window) {
  96.         this._websocket = new WebSocket(this._path)
  97.       } else if ('MozWebSocket' in window) {
  98.         // Note: 新版的FirFox已经没有这个构造函数了  99.0 (64 位)
  99.         // eslint-disable-next-line no-undef
  100.         this._websocket = new MozWebSocket(this._path)
  101.       }
  102.       this.init()
  103.     } catch (e) {
  104.       this.reconnect()
  105.       // eslint-disable-next-line no-console
  106.       console.error('createWebSocket error', e)
  107.     }
  108.   }
  109.   /**
  110.    * 初始化
  111.    */
  112.   init() {
  113.     this.HeartBeat =
  114.       this.HeartBeat || new HeartBeat(this, this._opts.HeartBeatTimeout)
  115.     // websocket 连接成功
  116.     this._websocket.onopen = () => {
  117.       // console.log('🚀 ~ file: webSocket.js ~ line 104 ~ WebSocketClient ~ init ~ onopen',)
  118.       this._isConnected = true
  119.       // 执行连接成功的回调
  120.       const f = this.openList.shift()
  121.       typeof f === 'function' && f()
  122.     }
  123.     this._websocket.onmessage = (event) => {
  124.       const data = JSON.parse(event.data)
  125.       if (
  126.         process.env.NODE_ENV === 'development' &&
  127.         data.type !== WSMessageTypeMap['HeartBeat']
  128.       ) {
  129.         // eslint-disable-next-line no-console
  130.         console.log(
  131.           '🚀 ~ file: webSocket.js ~ line 111 ~ WebSocketClient ~ init ~ onmessage',
  132.           data
  133.         )
  134.       }
  135.       // 重启心跳检测
  136.       this.HeartBeat.reset().start()
  137.       // 执行所有回调
  138.       const wsCallbackMap = this.wsCallbackMap.get(data.type)
  139.       wsCallbackMap && wsCallbackMap.forEach((callback) => callback(data.data))
  140.     }
  141.     this._websocket.onclose = () => {
  142.       // console.log('🚀 ~ file: webSocket.js ~ line 113 ~ WebSocketClient ~ init ~ onclose',)
  143.       this._isConnected = false
  144.       this.HeartBeat.reset()
  145.       this.reconnect()
  146.     }
  147.     this._websocket.onerror = () => {
  148.       // console.log('🚀 ~ file: webSocket.js ~ line 118 ~ WebSocketClient ~ init ~ onerror')
  149.       this._isConnected = false
  150.       this.reconnect()
  151.     }
  153.     // 其他异常情况处理
  154.     // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
  155.     window.onbeforeunload = function () {
  156.       this.close()
  157.     }
  159.     // 处理手机手机熄屏后会中断
  160.     document.addEventListener('visibilitychange', () => {
  161.       let hiddenTime
  162.       if (document.visibilityState == 'hidden') {
  163.         // 记录页面隐藏时间
  164.         hiddenTime = new Date().getTime()
  165.       } else {
  166.         const visibleTime = new Date().getTime()
  167.         // 页面再次可见的时间-隐藏时间>10S,重连
  168.         if ((visibleTime - hiddenTime) / 1000 > 10) {
  169.           // 主动关闭连接
  170.           this.close()
  171.           // 1.5S后重连 因为断开需要时间，防止连接早已关闭了
  172.           setTimeout(() => {
  173.             this.reconnect()
  174.           }, 1500)
  175.         } else {
  176.           //
  177.         }
  178.       }
  179.     })
  180.   }
  181.   /**
  182.    * 收集回调函数，当收到服务器消息时，会执行对应的回调函数
  183.    * @param {*} callback 回调函数，可以是一个回调函数队列数组
  184.    * @param {*} method 回调队列名称，对应前后的交互数据的 type
  185.    */
  186.   on(method, callback) {
  187.     const tm = this.wsCallbackMap.get(method)
  188.     if (tm) {
  189.       Array.isArray(callback) ? tm.push(...callback) : tm.push(callback)
  190.     } else {
  191.       const t = Array.isArray(callback) ? [...callback] : [callback]
  192.       this.wsCallbackMap.set(method, t)
  193.     }
  194.   }
  195.   /**
  196.    * 删除回调函数
  197.    * @param {*} method 回调队列名称，对应前后的交互数据的 type
  198.    */
  199.   removeOn(method) {
  200.     this.wsCallbackMap.delete(method)
  201.   }
  202.   /**
  203.    * 主动向后端发送消息
  204.    * @param {*} data 发送的数据 格式必须为: {type:1,data:{}},type为必须的字段,因为是根据type来收集回调函数
  205.    * @param {Functon} callback 发送成功后后端返回数据执行回调函数
  206.    * data : {
  207.    *  type: 0, // WSMessageTypeMap[key]
  208.    *  data: {} // 需要发送的数据
  209.    * }
  210.    */
  211.   send(data, callback = () => { }) {
  212.     const cheapFunction = () => {
  213.       data.data = { ...data.data }
  214.       if (data.type !== WSMessageTypeMap['HeartBeat']) {
  215.         this.removeOn(`send_${data.type}`) // 删除回调函数,必须先删除，否则会导致多次执行
  216.         this.on(`send_${data.type}`, callback)
  217.       }
  218.       this._websocket.send(JSON.stringify(data))
  219.       if (data.type !== WSMessageTypeMap['HeartBeat']) {
  220.         // 重启心跳检测 方式发送不是心态检测内容时候，没有收到信息，导致心跳检测失效
  221.         this.HeartBeat.reset()
  222.       }
  223.     }
  224.     // 如果连接成功，直接发送
  225.     if (this._isConnected) {
  226.       cheapFunction()
  227.     } else {
  228.       // 添加在openList 延迟执行
  229.       this.openList.push(() => {
  230.         setTimeout(() => {
  231.           cheapFunction()
  232.         }, 1000)
  233.       })
  234.     }
  235.   }
  236.   /**
  237.    * 关闭连接
  238.    */
  239.   close(closewebsocketCallback) {
  240.     this.closewebsocketCallback =
  241.       closewebsocketCallback || this.closewebsocketCallback
  242.     this._websocket.close()
  243.     this._lockReconnect = true
  244.     this._isConnected = false
  245.     this._path = undefined
  246.     this._websocket = null
  247.     this.closewebsocketCallback()
  248.   }
  249.   /**
  250.    * 重连
  251.    * @returns
  252.    */
  253.   reconnect() {
  254.     // console.log('🚀 ~ file: webSocket.js ~ line 185 ~ WebSocketClient ~ reconnect ~ reconnect')
  255.     if (this._isConnected) return
  256.     this._lockReconnect = true
  257.     this.tt && clearTimeout(this.tt)
  258.     // 没连接上会一直重连，设置延迟避免请求过多
  259.     this.tt = setTimeout(() => {
  260.       // console.log('🚀 ~ file: webSocket.js ~ line 194 ~ WebSocketClient ~ this.tt=setTimeout ~ setTimeout',)
  261.       this._lockReconnect = false
  262.       this._websocket = null
  263.       this.createWebSocket()
  264.     }, 4000)
  265.   }
  266. }
  268. let WS = null
  270. /**
  271.  * 默认创建websocketClient 方法
  272.  * @param {*} opts 配置对象
  273.  */
  274. const io = (opts) => {
  275.   // 一定要判断是否已经创建过WebSocketClient，否则会导致重复创建
  276.   if (WS) return WS
  277.   const userInfoEtravel = {
  278.     ...JSON.parse(sessionStorage.getItem('userInfoEtravel')),
  279.   }
  280.   opts = {
  281.     token: userInfoEtravel.token,
  282.     ID: userInfoEtravel.staffId,
  283.     HeartBeatTimeout: 3000,
  284.     ...opts,
  285.   }
  286.   WS = new WebSocketClient(opts)
  287.   return WS
  288. }
  290. /**
  291.  *
  292.  *  @param {Object} WS WS 为 WebSocketClient 实例，可以通过创建 io() 获取
  293.  *  @param {Function} io io 为 默认 创建 WebSocketClient 实例的方法，可自定义自己的创建方法
  294.  *
  295.  *
  296. // ---------------------建立连接 -----------------------------
  297. io({...})
  298. // ---------------------关闭连接 -----------------------------
  299. WS.close() 或者 WS.close(()=>{}) // 支持回调
  301. // ---------------------发送 -----------------------------
  302. WS.send({
  303.   type:WSMessageTypeMap['订单状态通知'], // type:必填
  304.   data?:{}
  305. },function (){
  306.   //回调方法
  307. })
  309. // ---------------------监听 -----------------------------
  310. WS.on(WSMessageTypeMap['订单状态通知'],function (){
  311.   //回调方法
  312. })
  313. // 或着
  314. WS.on(WSMessageTypeMap['订单状态通知'],[function (){
  315.   //回调方法
  316. }])
  317.  *
  318.  */
  319. export { WS, io }