我没有使用socket.js这类封装好的websocket包,使用的是原生的
新建js文件,封装websocket
var global_callback = null;
var websock = null;
function initWebSocket() { //初始化weosocket
//ws地址
var wsuri = "ws地址";
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) {
if(global_callback!=null&&global_callback!=""&&global_callback!=undefined){
global_callback(JSON.parse(e.data));
}
// return 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("连接成功");
// heartbeat();
// login();
}
initWebSocket();
export{sendSock}
将文件引入main.js中去
import * as socketApi from './assets/js/plugin/socket.js'
Vue.prototype.socketApi = socketApi
在你需要使用websocket的页面进行调用
this.socketApi.sendSock(param, callback);
建议是将websocket定义在全局,否则你使用父子组件调用时就会每调用一次产生一个websocket对象(血泪史。。。。。)
与后台建立心跳连接,并登陆
methods:{
heartbeat() {
console.log("心跳");
this.socketApi.sendSock(
{
type: 0,
data: "heartbeat"
},
this.getData
);
},
login() {
this.token = CookieUtil.get("token");
this.socketApi.sendSock(
{
type: 1,
data: this.token
// data:"c8544265df58b50c6131bad8a4dc537b"
},
this.getData
);
},
},
created() {
clearInterval(window.timer);
this.heartbeat();
window.timer = setInterval(this.heartbeat, 130000);
},
mounted() {
let that = this;
this.$nextTick(function() {
that.login();
});
},
distroyed: function() {
clearInterval(window.timer);
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
clearInterval(window.timer);
console.log("已经清楚定时器");
next();
},
1、心跳和登陆都是后端写好的,前端只需要传入参数即可,没130s心跳一次,在离开页面时就停掉定时器,以防在访问其他页面时,会一直调用;我能想到的就是这个办法,如果有更好的办法麻烦告诉我
2、为什么将登陆和心跳分开写?按正常的话,是先有心跳了,才会登陆,然后根据vue的啥玩意(学名忘了),反正就是先是执行created,再执行mounted
3、getData
函数是获取后端传给我的数据
主要就是这些了,剩下的就是根据项目需求,传不同的参数获取不同的数据
遇到的问题
1、定时器调用(不知道算不算问题)
定时器函数 里面的参数是函数 不要加括号 加括号代表执行,应该当做变量传进去
2、name在初始化的时候没有值(这些都是后台传过来的值)
所以我就在data先定义了变量,然后再getData函数中赋值,这样就不会报错了
3、所选队伍与外面的显示内容一一对应
主要就是定义一下第三方变量,来获取数组下标和后台传来的teamId,上面的内容根据数组下标来确定对应的Id