码迷,mamicode.com
首页 > Web开发 > 详细

Vue 中封装 websocket

时间:2021-06-23 17:04:51      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:open   return   send   color   ==   i++   数据   json   message   

// 创建 websocket.js 文件夹
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
 if (typeof data == ‘string‘) {
  data = data
 } else {
  data = JSON.stringify(data)
 }
 switch (ws.readyState) {
  case 0:
   setTimeout(() => {
    ws.send(data)
   }, 1000)
   break
  case 1:
   ws.send(data)
   break
  case 3:
   initWebSocket()
   setTimeout(() => {
    ws.send(data)
   }, 1000)
   break
 }
}
initWebSocket()
export { 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)
}

Vue 中封装 websocket

标签:open   return   send   color   ==   i++   数据   json   message   

原文地址:https://www.cnblogs.com/lyt520/p/14921989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!