vue项目中使用webSocket

最新推荐文章于 2024-07-29 22:01:22 发布

一个不会写code的程序猿

最新推荐文章于 2024-07-29 22:01:22 发布

阅读量802

点赞数 1

分类专栏：前端文章标签： websocket vue.js

本文链接：https://blog.csdn.net/m0_57997374/article/details/120305347

版权

本文介绍了如何在Vue项目中全局封装并使用WebSocket，包括在组件内部的调用和应用。

摘要由CSDN通过智能技术生成

项目全局封装webSocket

// 引入webScoket包
import SockJs from 'sockjs-client'

// 创建一个socket类并抛出
export default class Socket {
  constructor (param = {}) {
    this.param = param
    this.reconnectCount = 0
    this.socket = null
    this.taskRemindInterval = null
    this.lockReconnect = false
    this.timeout = 12
    this.lastMessageTime = null
  }

  // 连接webScoket
  connection = () => {
    let { socketUrl } = this.param

    this.lastMessageTime = null

    // 检测当前浏览器决定用什么socket
    if ('WebSocket' in window) {
      this.socket = new WebSocket(socketUrl)
    } else {
      this.socket = new SockJs(socketUrl)

      window.onbeforeunload = function () {
        this.socket.close()
      }
    }

    this.socket.onopen = this.onopen
    this.socket.onmessage = this.onmessage
    this.socket.onclose = this.onclose
    this.socket.onerror &#