vue中封裝webSocket

在vue項目中，每個組件裏使用webSocket比較簡單，但是webSocket的使用是在整個項目中的時候呢，

我們就需要封裝成一個公共的文件；

1.新建一個 socket.js 文件

var websock = null;
var global_callback = null;
var serverPort = '5000';    //webSocket連接端口
 
 
function getWebIP(){
    var curIP = window.location.hostname;
    return curIP;
}
 
function initWebSocket(){ //初始化weosocket
    //ws地址
    var wsuri = "ws://" +getWebIP()+ ":" + serverPort;
    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("connection closed (" + e.code + ")");
}
 
function websocketOpen(e){
    console.log("連接成功");
}
 
initWebSocket();
 
export{sendSock}
2.在main.js中引入這個文件

//WebSocket封裝方法
import * as socketApi from './api/socket'
Vue.prototype.socketApi = socketApi

3.使用

this.socketApi.sendSock(agentData,this.getConfigResult);   【agentData：發送的參數；this.getConfigResult：回調方法】

4.文件目錄說明
原文：https://blog.csdn.net/qq_39186346/article/details/81941664