Vue中使用WebSocket通信

最新推荐文章于 2024-03-28 11:03:18 发布

chao-Cyril

最新推荐文章于 2024-03-28 11:03:18 发布

阅读量778

点赞数

文章标签： vue.js websocket javascript

本文链接：https://blog.csdn.net/qq_38305872/article/details/130322404

版权

1.首先判断浏览器是否支持WebSocket

if(typeof WebSocket != 'undefined'){
    console.log('支持webSocket通信')
}else{
    console.log('不支持webSocket通信')
}

2.创建 WebSocket 连接

// 创建 WebSocket 连接
var Websocketd = new WebSocket('ws://121.40.165.18:8800')

3.心跳检测和方法

var timeoutObj = null;
var heartCheck = {
    timeout: 5000,
    timeoutObj: null,
    reset: function(){
          clearInterval(timeoutObj);
          return this;
    },
    start: function(){
          timeoutObj = setInterval(function(){
            // 发送 WebSocket 消息
            Websocketd.send("11111");
          },this.timeout)
     }
}

4.接收消息

Websocketd.onopen = function(){
    console.log('连接成功');
    heartCheck.reset().start();
};
Websocketd.onmessage = function(event){
    console.log(event.data)
}

5.使用完销毁webSocket

if(Websocketd){
    Websocketd.close()
}

6.完整代码

if(typeof WebSocket != 'undefined'){
    console.log('支持webSocket通信')
}else{
    console.log('不支持webSocket通信')
}
// 创建 WebSocket 连接
var Websocketd = new WebSocket('ws://121.40.165.18:8800')
var timeoutObj = null;
var heartCheck = {
     timeout: 5000,
     timeoutObj: null,
     reset: function(){
          clearInterval(timeoutObj);
          return this;
     },
     start: function(){
          timeoutObj = setInterval(function(){
            // 发送 WebSocket 消息
            Websocketd.send("11111");
          },this.timeout)
     }
}
Websocketd.onopen = function(){
    console.log('连接成功');
    heartCheck.reset().start();
};
Websocketd.onmessage = function(event){
    console.log(event.data,66654)
}