在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