封装文件

封装思路参考来源：websocket（一）封装使用

/**
 * @desc webSocket
 * @param {Object} callbackSet 回调集合，用于接收到消息返回到相关页面
 */

const WBT = function (callbackSet) {
  const protocol = window.location.protocol == 'http:' ? 'ws://' : 'wss://'
  const host = window.location.host
  // 接口地址url
  this.url = protocol + host + '/websocket/katsuki' //ws://xxx.com/websocket/katsuki
  // socket对象
  this.socket = null
  // 重连延迟
  this.socketTime = null
  // 重连状态 避免不间断的重连操作
  this.isReconnect = false
  // 断开连接
  this.isClose = false

  // 心跳包，到时间断开重连来保持长链接
  this.heartCheck = {
    timeout: 120000,
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function () {
      clearTimeout(this.timeoutObj)
      clearTimeout(this.serverTimeoutObj)
      return this
    },
    start: function (ws) {
      const self = this
      this.serverTimeoutObj = setTimeout(() => {
        let token = window.localStorage.getItem('token')
        let send = { topic: 'katsuki-websocket', tags: 'HELLO', token: token, param: '' }
        if (ws) {
          ws.send(JSON.stringify(send))
          self.timeoutObj = setTimeout(function () {
            ws.close()
          }, self.timeout)
        }
      }, this.timeout)
    },
  }

  // 自定义ws连接函数：服务器连接成功
  this.onopen = (e) => {
    this.heartCheck.reset().start(this.socket)
    console.log('Socket连接已经打开')
  }
  // 自定义ws消息接收函数：服务器向前端推送消息时触发
  this.onmessage = (msg) => {
    this.heartCheck.reset().start(this.socket)
    try {
      let value = JSON.parse(msg.data)
      if (value instanceof Object && value.actionCode) {
        this.handleEvent(value, callbackSet)
      }
    } catch (error) {
      console.error('获取信息失败', error)
    }
  }
  // 自定义ws异常事件：ws报错后触发
  this.onerror = () => {
    console.log('error')
    this.reConnect()
  }
  // 自定义ws关闭事件：ws连接关闭后触发
  this.onclose = () => {
    if (!this.isClose) {
      this.heartCheck.reset()
      this.reConnect()
      console.log('reConnect')
    }
  }

  this.shutDown = () => {
    this.isClose = true
    this.heartCheck.reset()
    this.socket.close()
    console.log('Socket连接已断开')
  }

  this.initWs()
}

// 初始化websocket连接
WBT.prototype.initWs = function () {
  window.WebSocket = window.WebSocket || window.MozWebSocket
  // 检测浏览器支持
  if (!window.WebSocket) {
    console.error('错误: 浏览器不支持websocket')
    return
  }
  // 这里是用户登录才触发socket，根据需要做判断
  let token = window.localStorage.getItem('token')
  if (token) {
    this.socket = new WebSocket(this.url)

    this.socket.onopen = (e) => {
      let send = { topic: 'katsuki-websocket', tags: 'HELLO', token: token, param: '' }
      this.socket.send(JSON.stringify(send))
      this.onopen(e)
    }
    this.socket.onmessage = (msg) => {
      this.onmessage(msg)
    }
    this.socket.onerror = (e) => {
      this.onerror(e)
    }
    this.socket.onclose = (e) => {
      this.onclose(e)
    }
    return this
  } else {
    this.reConnect()
  }
}

// 断线重连
WBT.prototype.reConnect = function () {
  if (this.isReconnect) return
  if (this.socketTime) {
    clearTimeout(this.socketTime)
  }
  this.isReconnect = true
  // 没连上会一直重连，设置延迟避免请求过多
  this.socketTime = setTimeout(() => {
    this.initWs()
    this.isReconnect = false
  }, 2000)
}

// 处理消息
WBT.prototype.handleEvent = function (value, callbackSet) {
  const action = value.actionCode // 和后台约定的处理
  // 根据 action和actionCode处理事件
  if (this.handleAction[action]) this.handleAction[action](value, callbackSet)
}

WBT.prototype.handleAction = {
  // 某消息接收成功
  'katsuki-success': (value, callbackSet) => {
    const param = value ? JSON.parse(value.actionParam) : null
    callbackSet.functionName(param) // 将参数传递到页面
  },
}

export { WBT }

// 调用
import { WBT } from '@/utils/socket'
const socket = new WBT(cb)

socket.io

socket.io聊天室小案例 git
网上也有不少教程，这里就不搬砖了，网上找的一个简单使用案例，第三方引入调用，兼容性好，其jq引用地址换成国内cdn即可

最后

以上就是苗条菠萝为你收集整理的webscoket封装封装文件socket.io的全部内容，希望文章能够帮你解决webscoket封装封装文件socket.io所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。