vue项目中使用webSocket

vue 组件以及公共js 方法全局使用的时候，我们需要进行对逻辑进行封装实现。 之前在公司项目中接触视频通信以及消息推送涉及到webSocket，简单对webSocket进行提取处理，仅供参考。

项目路径： 对于公共api方法我们需要单独建立文件夹 注：api中主要放我们项目中公共部分的方法之类，如正则，websock等。

1，首先我们需要建立 webSocket.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 webSocket from ‘./api/webSocket’ Vue.prototype.webSocket = webSocket

3，在项目中使用 this.socketApi.webSocket(agentData,this.getConfigResult); 注：参数说明： agentData：需要向后端发送的参数； this.getConfigResult：前端接受回调方法