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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值