vue(element ui) 使用websocket及心跳检测

248 阅读 0 评论 164 点赞

我是靠谱客的博主每日一库，最近开发中收集的这篇文章主要介绍vue(element ui) 使用websocket及心跳检测，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

vuex维护websocket并且进行心跳检测，断开进行重连等

业务需求

效果图（123张图分别为初始化连接，模拟网络断开进行重连，模拟网络恢复重新建立连接）

需要连接点（维护点）

一、登录调用方法

vuex里index进行注册

utils.js代码块，主要代码（备注会一行一行写清楚，请耐心查看）

app.vue中再次调用getUserInfo方法，避免浏览器强制刷新导致断开连接

页面使用（附效果图）

难点在于连接成功后onopen、onmessage方法心跳检测，以及onclose、onerror断开连接后进行重连。这块还添加了自己本身的另一个短连接口业务，所以会难梳理。不懂的还请vuex里代码每行注释进行通读。

通俗讲就是new WebSocket 建立连接后，在自带的方法里onopen(建立连接)、onmessage(收到推送消息)、onclose(连接断开)、onerror(连接发生错误)进行自己的业务流程。

业务需求

前后端分离，后端java。项目添加websocket消息推送，检测到数据更改前端进行数据捕获，并实时渲染。添加心跳检测机制实时检测连接是否断开，断开则重新连接。

项目业务：是在消息推送后返回一个有新消息提醒，然后再调用一个列表查询接口，用vuex维护起来，放到需要的页面进行展示及之后的业务流程

效果图（123张图分别为初始化连接，模拟网络断开进行重连，模拟网络恢复重新建立连接）

需要连接点（维护点）

登录后进行websocket连接。

浏览器强制刷新时websocket会自动断开，所以需要重新连接

代码维护在vuex中

一、登录调用方法

//去vuex，utils里调用getUserInfo方法

this.$store

.dispatch("utils/getUserInfo", { initSocket: true })

.then((res) => {

});

因为我的消息推送接口依赖于登录接口返回的id，所以我需要再登录成功回调后再进行我的webwocket连接方法。业务不同的小伙伴只需要把此方法放在登录成功的回调后即可

vuex里index进行注册

utils.js代码块，主要代码（备注会一行一行写清楚，请耐心查看）

//因为我本身的业务是在有新消息收到后再调用列表查询的接口，所以会引入框架的请求方法（无此需求的小伙伴不用理会）

import * as $http from '@/utils/request'

import { mapGetters } from 'vuex';

const utils = {

namespaced: true,

state: { //声明变量，跟单页面data return声明一个意思

message: [],

readSysMsgList: [],

readSysMsgListLength: "",

wsUrl: '',

ws_heart: '', // ws心跳定时器

lockReconnect: false, //是否真正建立连接

timeoutnum: null //断开重连倒计时

getters: {},

mutations: {

//vuex突变，拿到维护的数据后交给对应的变量，供页面使用（可查看资料vuex用法）

unReadSysMsg(state, options) {

state.readSysMsgList = options

unReadSysMsglenght(state, options) {

state.readSysMsgListLength = options

actions: {

// 获取连接信息（在登录接口调用getUserInfo方法建立连接）

//getUserInfo有一个dispatch 参数，此参数目的为了调用actions中其他方法

getUserInfo({ state, commit, dispatch },) {

//先判断浏览器是否支持WebSocket

if (typeof WebSocket === "undefined") {

alert("您的浏览器不支持socket");

} else {

//提前判断 WebSocket是否已经建立，避免重复连接问题

if (this.socket) {

this.socket.close()

}

//WebSocket连接时我的地址需要拼接用户的id所以再此进行获取，也就是在登录时为啥把getUserInfo放在登录成功的回调中，无此需要的小伙伴可省略

let id = JSON.parse(localStorage.getItem('loginUserAllInfo')).user.id

// 实例化socket （长连接为ws地址格式）这一步就是建立连接(自行放入url即可)

this.socket = new WebSocket(`ws://xxx.xxx.xxx/${id}`);

//new WebSocket有很多内置的方法，onopen 就是证明连接已经成功，可以在此进行心跳检测

this.socket.onopen = () => {

console.log('websocket已连接');

//调用reset方法，reset方法是跟getUserInfo同级，在vuex中需要用dispatch进行调用（可参考actions里第二行注释解释，必须得有接收参数）。跟单页面中的this.reset（）同理

dispatch("reset")

//本项目业务，建立连接后先进行列表查询

$http.get("/task/sysMessage/getUnReadSysMsg").then((res) => {

console.log(res.data)

//列表查询的结果拿commit存到vuex当中，然后再给了state中的变量，到时候页面就可以直接拿到了。比如先把unReadSysMsg存起来，给了readSysMsgList ，然后页面获取数据的时候就可以this.readSysMsgList 稍后会有页面展示的代码

commit("unReadSysMsg", res.data);

commit("unReadSysMsglenght", res.data.length);

})

};

// 监听socket消息（主要内置方法，收到消息后会进行监听接收）

this.socket.onmessage = (msg) => {

// console.log('接收到新消息--------' + msg.data)

//同样调用reset进行心跳检测重置

dispatch("reset")

//本项目业务，主要心跳检测，我会在start方法里每隔30秒主动进行ping推送，看连接是否还存在，如果接收到pong到pong就证明是因为我主动推送消息拿到的监听结果，就不需要处理。如果接收到非pong则证明是后端有新消息推送过来，重新进行列表查询，刷新数据

if (msg.data == "pong") {

} else {

//直接返回数据的可避免此操作，直接拿到msg，commit存储好就可

$http.get("/task/sysMessage/getUnReadSysMsg").then((res) => {

commit("unReadSysMsg", res.data);

commit("unReadSysMsglenght", res.data.length);

console.log(res.data)

})

}

};

// 监听socket错误信息（websocket断开会进入此方法，需要进行重连）

this.socket.onclose = function (e) {

console.log('关闭了')

//断开连接后调用reconnect进行重新连接

dispatch("reconnect")

};

// WebSocket发生错误

this.socket.onerror = function (e) {

//断开连接后调用reconnect进行重新连接

dispatch("reconnect")

console.log("WebSocket发生错误");

};

}

//重新连接（断开跟错误后都需要进行重连操作）

reconnect({ dispatch }) {

var that = this;

if (that.lockReconnect) {

// 是否真正建立连接

return;

}

that.lockReconnect = true;

//没连接上会一直重连，设置延迟避免请求过多

that.timeoutnum && clearTimeout(that.timeoutnum);

// 如果到了这里断开重连的倒计时还有值的话就清除掉

that.timeoutnum = setTimeout(function () {

console.log('重启中')

//然后新连接（dispatch照样进行方法getUserInfo的调用）

dispatch('getUserInfo')

that.lockReconnect = false;

}, 60000);

//建立连接及有新消息接收后进行心跳重置

reset({ dispatch }) {

//重置心跳

var that = this;

//清除时间（清除心跳计时）

clearInterval(that.ws_heart)

//重启心跳

dispatch("start")

//心跳检测

start({ dispatch }) {

//实时推送ping消息，查看连接是否断开

this.ws_heart = setInterval(() => {

let actions = "ping"

this.socket.send(JSON.stringify(actions));

}, 30000)

}

export default utils

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

以上主要代码已完毕

app.vue中再次调用getUserInfo方法，避免浏览器强制刷新导致断开连接

mounted() {

//退出登录后会把localStorage清空，避免控制台报错

if (JSON.parse(localStorage.getItem('loginUserAllInfo'))) {

let userId = JSON.parse(localStorage.getItem('loginUserAllInfo')).user.id

if (userId) {

this.$store

.dispatch("utils/getUserInfo", { initSocket: true })

.then(() => {

});

}

} else {

}

页面使用（附效果图）

//页面可直接使用数据，放到想用到的地方

<div>

</div>

</template>

//引入vuex

import { mapActions, mapState } from 'vuex'

export default {

computed: {

//获取vuex中存放的数据

...mapState("utils", ["readSysMsgList","readSysMsgListLength"]),

}

//贴入本项目的业务代码（主要看我el-table遍历data :data="this.readSysMsgList"直接就可渲染）

<el-dialog :modal="false" title="您的消息" :visible.sync="moreFlag" class="tableLocation">

<el-table :data="this.readSysMsgList" height="200" @row-click="rowClick">

<el-table-column align="center" width="40">

</template>

</el-table-column>

<el-table-column property="messageType" label="消息类型" width="70">

</template>

</el-table-column>

<el-table-column property="content" label="消息内容"></el-table-column>

</el-table>

</el-dialog>

</div>

</template>

注：此方法为原生方法，如感觉繁琐还可查看"socket.io-client"，"vue-socket.io"插件使用，但我本项目用的时候不知是不是因为后台是java写的，在后端给的地址基础上，会自动拼接EIO = 3＆transport = websocket这个参数，导致匹配不到接口报404，让后端把后几个参数写死解决方法也没走通，又回到了原生方法，有兴趣的可自行尝试