Vue中websocket的使用方法

2022-12-15 17:30:09 浏览数 (1)

初始化WebSocket以及其他可能用到的方法

代码语言：javascript复制
//初始化WebSocket
initWs() {
  if(typeOf(WebSocket) === "undefined") {
    //浏览器不支持WebSocket
    return false
  } else {
    this.socket = new WebSocket() //括号中填写后端提供的路径
    this.socket.onopen = this.open 
    this.socket.onerror = this.error
    this.socket.onmessage = this.getMessage
  }
},
//监听socket连接
open() {},
//监听socket连接
error() {},
//接收数据
getMessage(data) {}, //data为后端发过来的数据
//发送数据
send() {
  this.socket.send(data)
},
//监听socket连接关闭
close() {}
在data中初始化变量 mounted生命周期中调用初始化方法
代码语言：javascript复制
data() {
  return {
    socket: ""
  }
},
mounted() {
  this.initWs()
},
destoryed() {
  this.socket.onclose = this.close
}
具体内容可参考如下链接WebSocket文档
解决WebSocket兼容性可参考如下链接解决WebSocket兼容性
data socket web 兼容性 生命周期

0 人点赞