socket前端使用方法，封装js

main.js

// 引入 socket_service

import SocketService from './utils/socket_service'

// 对服务端进行 webSocket的连接

SocketService.Instance.connect()

Vue.prototype.$socket = SocketService.Instance

socket_service.js

export default class SocketService {
  static instance = null
  static get Instance() {
    if (!this.instance) {
      this.instance = new SocketService()
    }
    return this.instance
  }

  // 和服务端连接的socket对象
  ws = null
  // 标识是否连接成功
  connected = false
  // 请求数据尝试的次数
  sendRetryCount = 0
  // 重新连接尝试的次数
  connectRetryCount = 0

  // 存储回到函数
  callBackMapping = {}

  // 定义连接服务器的方法
  connect() {
    // 连接服务器
    if (!window.WebSocket) return console.log('您的浏览器不支持 WebSocket')

    if (process.env.NODE_ENV === 'development') {
      this.ws = new WebSocket('ws://101.34.160.195:9998')