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