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:前端接受回调方法