1.websocket 方法

import { message } from 'ant-design-vue'
import i18n from '@/langs/index.js'
let socket = null
let handleMessage = null
let handleErr = null
//初始化连接websocket,监听websocket各状态
function initSocket(url) {
  if (typeof WebSocket === 'undefined') {
    message.error(i18n.t('public.websocket.noWebSocket'))
  }
  socket = new WebSocket(url)
  socket.onopen = (e) => {
    socketOnOpen()
  }
  socket.onmessage = (e) => {
    socketOnMessage(e)
  }
  socket.onerror = (e) => {
    socketOnError()
  }
  socket.onclose = (e) => {}
}

//连接成功后的操作
function socketOnOpen(e) {}

//接收到websocket传过来message后的操作
function socketOnMessage(e) {
  //handleMessage为组件中传过来的自定义的方法,判断是否传递过来该方法
  if (handleMessage) {
    handleMessage(JSON.parse(e.data))
  }
}

//连接错误后的操作
function socketOnError(e) {
  if (handleErr) {
    handleErr()
  }
}

//向websocket传递参数数据
function socketSend(data) {
  setTimeout(() => {
    if (socket.readyState === 1) {
      socket.send(JSON.stringify(data))
    } else if (socket.readyState === 3) {
      message.error(i18n.t('public.websocket.connectFailed'))
    }
  }, 500)
}

/** 发送websocket请求
 * @param {String} url 连接的websocket地址
 * @param {Object} data 需要传递的参数
 * @param {Function} handleData 获取websocket传过来的数据后的处理函数
 * @param {Function} handleError websocket连接出错后的处理函数
 */
export function connectSocket(url, data, handleData, handleError) {
  handleMessage = null
  handleErr = null
  if (handleData) {
    handleMessage = handleData
  }
  if (handleError) {
    handleErr = handleError
  }
  initSocket(url)
  socketSend(data)
}

//关闭webSocket
export function closeSocket() {
  if (socket) {
    socket.close()
  }
}

2. 使用

import { connectSocket, closeSocket } from './socket.js'

convert() {
 let data = {}
 let socketUrl = ''
 connectSocket(socketUrl, data, this.handleMessage)
},
handleMessage(data) {
 console.log(data)
}