Vue 中封装 websocket

let wsurl = 'ws://82.157.123.54:9010/ajaxchattest'
let ws = null
let weboscket_callback = null


//获取 websocket 推送的数据
let websocketonmessage = e => {
 return weboscket_callback(e)
}




// 连接成功
let websocketonopen = () => {
 console.log('连接 websocket 成功')
}




// 连接失败时重新连接
let websocketonerror = () => {
 initWebSocket()
}




// 断开链接后报错
let websocketclose = e => {
 console.log('断开连接', e)
}




// 手动关闭 websocket
let closewebsocket = () => {
 ws.close()
}




let initWebSocket = () => {
 //初始化 websocket
 ws = new WebSocket(wsurl)
 ws.onmessage = websocketonmessage
 ws.onopen = websocketonopen
 ws.onerror = websocketonerror
 ws.onclose = websocketclose
}




// 发送数据
let sendData = (data, callback) => {
 weboscket_callback = callback
 //  判断 data 数据类型
 if (typeof data == 'string') {
  data = data
 } else {
  data = JSON.stringify(data)
 }




 //  判断 websocket 的状态
 if (ws.readyState === ws.OPEN) {
  // 已经打开,可以直接发送
  ws.send(data)
 } else if (ws.readyState === ws.CONNECTING) {
  // 正在开启状态中,则 1 秒后重新发送
  setTimeout(() => {
   ws.send(data)
  }, 1000)
 } else {
  // 未打开，则开启后重新调用
  initWebSocket()
  sendData(data, callback)
 }
}




// 导出
export { initWebSocket, sendData, closewebsocket }

在组件中引用：

import { sendData, closewebsocket } from '../../utils/websocket'

 

在methods中:

// 用来接收 websocket 推送的数据

  test(e) {

   console.log(e.data)

  },

// 发送数据

send(){　　

   sendData('dfa', this.test)

   setTimeout(() => {

    closewebsocket()

   }, 3000)

   setTimeout(() => {

    sendData('重新发送', this.test)

   }, 5000)

   let i = 0

   setInterval(() => {

    sendData(i++, this.test)

   }, 6000)

}

 封装好的js文件：https://blog-static.cnblogs.com/files/lyt520/websocket.js

参考链接：https://blog.csdn.net/qq_39186346/article/details/81941664?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_v2~rank_aggregation-1-81941664.pc_agg_rank_aggregation&utm_term=vue%E9%A1%B9%E7%9B%AE%E5%B0%81%E8%A3%85websocket&spm=1000.2123.3001.4430