vue项目中使用webSocket进行数据实时传输

在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.文件目录说明