手写Vue的WebSocket原生插件

最新推荐文章于 2025-06-20 17:38:52 发布

原创最新推荐文章于 2025-06-20 17:38:52 发布 · 941 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#WebSocket #vue #原生

随笔&笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个基于WebSocket的通信方案，包括自动重连机制及心跳包的实现细节。通过设定重连次数和间隔，确保了网络不稳定时的连接稳定性。同时，通过定期发送心跳包监测连接状态，确保了长连接的活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其中应该加上重连机制的，思路是断开之后n秒启动重连，重连就是其中执行 open方法就行，重连几次之后，如果还没有成功就关闭重连机制

import store from '@/store'
import qs from 'qs'
import {getCookieToken} from '@/utils/auth'
const {ws} = store.getters.apiConfig

class Websocket {
  message = () => {}
  opts = {
    query: {}
  }
  hbHandler = {}
  constructor (url, autoConnect) {
    this.url = url
  }
  init () { //  初始化
    this._on('open', this._connectHandler)
      ._on('message', this._messagehandler)
      ._on('close', this._disconnectHandler)
      ._on('error', this._errorHandler)
  }
  open () { //  打开WebSocket的按钮
    this.setOpenQuery({
      authToken: getCookieToken()
    })
    this.$io = new WebSocket(this._wsUrl())
    this.init()
  }
  close () { // 关闭WebSocket的按钮
    this.closeWs()
  }
  closeWs () {
    if (this.$io) {
      this.$io.close()
      clearInterval(this.hbHandler) //  定时器要关掉
      this._off('open', this._connectHandler)
        ._off('message', this._messagehandler)
        ._off('close', this._disconnectHandler)
        ._off('error', this._errorHandler)
    }
  }
  commit (action) { //  向服务端传信息，这里只用作心跳包
    let data = {action}
    this.$io && (this.$io.readyState === 1) && this.$io.send(JSON.stringify(data))
    if ((this.$io && (this.$io.readyState === 2)) || (this.$io && (this.$io.readyState === 3))) {
      this.close()
    }
  }
  _on (eventName, handler) {
    this.$io.addEventListener(eventName, handler)
    return this
  }
  _off (eventName, handler) {
    this.$io.removeEventListener(eventName, handler)
    return this
  }
  setOpenQuery (query = {}) { //  token
    this.resetOptions({query})
  }
  resetOptions (opts) {
    Object.assign(this.opts, opts)
  }
  _wsUrl () { //  这里拼接的，很low
    return this.url + '?' + qs.stringify(this.opts.query)
  }
  _connectHandler = (event) => {
    console.log('连接->正常')
    this._heartBeat()
  }
  _heartBeat () { //  心跳包
    this.hbHandler = setInterval(() => {
      this.commit('heartbeat')
    }, 10000)
  }
  _messagehandler = (event) => { // 接收到的信息
    let meg = JSON.parse(event.data)
    meg.data && this.message(meg.data) // 这里是执行的事件，需要传进来
  }
  _disconnectHandler = (event) => {
    //  断开
    this.close()
  }
  _errorHandler = () => {
    //  连接错误
    this.close()
  }
}
export default {
  install (Vue, options) { // 自己个挂的插件
    Vue.prototype.$ws = new Websocket(ws)
  }
}