vue项目中使用webSocket进行数据实时传输
在vue中怎样正确封装使用webSocket在vue项目中,每个组件里使用webSocket比较简单,但是webSocket的使用是在整个项目中的时候呢,我们就需要封装成一个公共的文件;1.新建一个 socket.js 文件var websock = null;var global_callback = null;var serverPort = '5000';//webSocket连接端口fun
·
在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.文件目录说明
更多推荐
已为社区贡献7条内容
所有评论(0)