websocket封装，有心跳和断开重联功能

原创

于 2020-08-27 11:45:59 发布 · 647 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

本文介绍如何创建一个WebSocket封装库，包括实现心跳检测和断开连接后的自动重连功能。首先在websocket文件夹下创建index.js，然后在main.js中全局引入并配置。最后展示了在Vue组件中如何调用和使用这个封装好的WebSocket服务。

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

一、新建文件夹websocket，在文件夹中新建index.js文件。

index.js文件如下

import store from '../store'

const socket = {
  $ws: null,  // websocket对象
  lockReturn: false,  // 重连锁
  timeout: 60 * 1000 * 5, // 5分钟重连
  timeoutObj: null, // setInterval()定时器id
  timeoutNum: null, // setTimeout()定时器id
  // 设置webSocket长连接初始化需要的参数
  params: {
    baseUrl: 'ws://' + store.state.domain, // base url
    page: '', // 页面参数
    handleMsg: null // 处理websocket消息的回调函数
  },

  /**
   * @description: 设置webSocket长连接初始化需要的参数
   * @param {string} page 页面
   * @param {function} handleMsg 处理接收的消息的回调函数
   * @return: 
   */
  setParams(page, handleMsg) {
    this.params.page = page
    this.params.handleMsg = function (data) {
      // 处理接收的消息的回调函数
      handleMsg.call(this, data)
    }
  },

  /**
   * @description: 初始化webSocket长连接
   * @return: 
   */
  initWebSocket: function () {
    let url = this.params.baseUrl + this.params.page + '/' + store.state.token
    console.log(url)