简单封装websocket

whyczyk

2021-09-07 69f949b70f1cd2c80a9738afe602905b18e72e0b

简单封装websocket

 src/assets/js/socket.js

New file
@@ -0,0 +1,67 @@
import getWsUrl from "@/assets/js/getWsUrl";
var websock = null;
var global_callback = null;

function initWebSocket(action,port){ //初始化weosocket
    //ws地址
    const wsUri = getWsUrl(action, port);
    websock = new WebSocket(wsUri);
    websock.onmessage = function(e){
        websocketonmessage(e);
    } 
    websock.onclose = function(e){
        websocketclose(e);
    }
    websock.onopen = function () {
        websocketOpen();
    }
    
    //连接发生错误的回调方法
    websock.onerror = function () {
        console.log("WebSocket连接发生错误");
    }
}
 
// 实际调用的方法
function sendSock(agentData,callback){  
    global_callback = callback;
    if (websock.readyState === websock.OPEN) {
        //若是ws开启状态
        websocketsend(agentData)
    }else if (websock.readyState === websock.CONNECTING) {
        // 若是 正在开启状态，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData,callback);
        }, 1000);
    }else {
        // 若未开启 ，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData,callback);
        }, 1000);
    }
}
 
//数据接收
function websocketonmessage(e){ 
    global_callback(JSON.parse(e.data));
}
 
//数据发送
function websocketsend(agentData){
    websock.send(JSON.stringify(agentData));
}
 
//关闭
function websocketclose(e){
    console.log("WebSocket已关闭");
}
 //WebSocket连接成功
function websocketOpen(e){
    console.log("WebSocket连接成功");
}

function close(){
  websock.close()
}
 
export{sendSock,initWebSocket,close}

 src/main.js

@@ -21,6 +21,9 @@
import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css';

import * as socket from '@/assets/js/socket'
Vue.prototype.$socket = socket

Vue.prototype.$layer = layer(Vue);

// 注册全局自定义组件

 src/pages/home/topoGraph.vue

@@ -819,6 +819,10 @@
            }
        },
        mounted() {
            // this.$socket.initWebSocket("/device", "")
            // this.$socket.sendSock(null, (res) => {
            //     console.log(res)
            // });
            this.searchAll()
            setInterval(() => {
                this.searchAll()
@@ -888,6 +892,7 @@
        },
        destroyed() {
            diagram.stop();
            // this.$socket.close();
        }
    }
</script>