WebScoket

最新推荐文章于 2022-11-09 14:41:47 发布

原创最新推荐文章于 2022-11-09 14:41:47 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

接口数据的异步请求专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用WebSocket创建与服务器的实时双向通信。通过初始化WebSocket对象，设置onopen、onmessage、onclose和onerror事件处理器，实现数据的发送与接收，以及错误和连接状态的管理。在接收到服务器消息时，进行JSON解析并打印到控制台。

初始化

var ws = new WebSocket("wss://echo.websocket.org");

onopen：指定连接成功后的回调函数
send：向服务器发送数据

ws.onopen = function () {
  ws.send('Hello Server!');
}

onmessage：指定接收服务器返回数据后的回调函数

ws.onmessage = function(event) {
};

onclose：指定连接关闭后的回调函数

ws.onclose = function(event) {
};

onerror：指定报错时的回调函数

ws.onerror = function(event) {
};

实例：

 methods: {
   initWebSocket () {
     this.ws = new WebSocket('wss://??????????????')
     this.ws.onopen = this.webSocketOnOpen
     this.ws.onmessage = this.webSocketOnMessage
     this.ws.onerror = this.webSocketOnError
     this.ws.onclose = this.webSocketOnClose
   },
   webSocketOnOpen () {
     var messageObj = {
       'msgcode': 100,
       'msgname': 'session',
       'message': this.session
     }
     var msg = JSON.stringify(messageObj)
     this.ws.send(msg)
   },
   webSocketOnMessage (e) {
     let data = JSON.parse(e.data)
     console.log(data)
   },
   webSocketOnError () { // 连接错误就重连连接
     this.initWebSocket()
   },
   webSocketOnClose (e) {
     console.log('断开连接', e)
   }

 },
 mounted () {
   this.initWebSocket()
 }