【Abp VNext】实战入门（五）：【12】前端管理界面 vue-element-admin —— 【客户端】全局使用WebSocket
一、前言：
API接口每次调用都要走一个完整的握手流程，服务端不能通过API主动向前端客户端发送信息； 针对频繁轮询的情况比较消耗资源；
WebSocket只需建立一次连接，并保持长连接状态，客户端服务端可双向通信，通信简单快捷，资源消耗小。
WebSocket通常用于即时通讯方面的需求。
二、前端全局使用WebSocket：
每个页面可以单独创建WebSocket连接，但是没有必要去做重复操作，所以先把牌坊立好：咱要全局使用
WebSocket服务端后续写篇文章讲一下；
1、根目录创建 /js_sdk/websocket.js ：
//websocket.js
import Vue from 'vue'
// 1、用于保存WebSocket 实例对象
export const WebSocketHandle = undefined
// 2、外部根据具体登录地址实例化WebSocket 然后回传保存WebSocket
export const WebsocketINI = function(websocketinstance) {
this.WebSocketHandle = websocketinstance
this.WebSocketHandle.onmessage = OnMessage
}
// 3、为实例化的WebSocket绑定消息接收事件：同时用于回调外部各个vue页面绑定的消息事件
// 主要使用WebSocket.WebSocketOnMsgEvent_CallBack才能访问 this.WebSocketOnMsgEvent_CallBack 无法访问很诡异
const OnMessage = function(msg) {
// 1、消息打印
// console.log('收到消息：', msg)
// 2、如果外部回调函数未绑定 结束操作
if (!WebSocket.WebSocketOnMsgEvent_CallBack) {
console.log(WebSocket.WebSocketOnMsgEvent_CallBack)
return
}
// 3、调用外部函数
WebSocket.WebSocketOnMsgEvent_CallBack(msg)
}
// 4、全局存放外部页面绑定onmessage消息回调函数:注意使用的是var
export const WebSocketOnMsgEvent_CallBack = undefined
// 5、外部通过此绑定方法 来传入的onmessage消息回调函数
export const WebSocketBandMsgReceivedEvent = function(receiveevent) {
WebSocket.WebSocketOnMsgEvent_CallBack = receiveevent
}
// 6、封装一个直接发送消息的方法：
export const Send = function(msg) {
if (!this.WebSocketHandle || this.WebSocketHandle.readyState !== 1) {
// 未创建连接 或者连接断开 无法发送消息
return
}
this.WebSocketHandle.send(msg)// 发送消息
}
// 7、导出配置
const WebSocket = {
WebSocketHandle,
WebsocketINI,
WebSocketBandMsgReceivedEvent,
Send,
WebSocketOnMsgEvent_CallBack
}
// 8、全局绑定WebSocket
Vue.prototype.$WebSocket = WebSocket
2、项目根目录main.js添加全局引入：
import Vue from 'vue'
import App from './App'
import '@/js_sdk/websocket' // 全局引入 WebSocket 通讯组件
new Vue({
el: '#app',
//..............
render: h => h(App)
})
3、在根目录app.vue 中初始化WebSocket相关登录操作：
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
created() {
// 因为我的页面有缓存机制，用户下次有可能直接打开某个登录后才能访问的页面 比如F5刷新了某个页面 需要重连
// 又比如后端服务器因为什么原因突然中断了一下 也需要重新连接WebSocket
// 每3秒检测一次websocket连接状态 未连接 则尝试连接 尽量保证网站启动的时候 WebSocket都能正常长连接
setInterval(this.WebSocket_StatusCheck, 3000)
},
methods: {
// 1、WebSocket连接状态检测：
WebSocket_StatusCheck() {
if (!this.$WebSocket.WebSocketHandle || this.$WebSocket.WebSocketHandle.readyState !== 1) {
console.log('Websocket连接中断，尝试重新连接:')
this.WebSocketINI()
}
},
// 2、WebSocket初始化：
async WebSocketINI() {
// 1、浏览器是否支持WebSocket检测
if (!('WebSocket' in window)) {
console.log('您的浏览器不支持WebSocket!')
return
}
// 2、从后台提取WebScoket服务器连接地址：根据自己业务接口获取 或者直接跳过 下面直接写死
const tmpResource = await this.$Api.Resource.Get('OtherSets_WebSocket_Address').then(res => {
return res
})
const tmpWebsocketSrverAddress = tmpResource.value//可以直接赋值如：ws://127.0.0.1:1234
// 3、创建Websocket连接
const tmpWebsocket = new WebSocket(tmpWebsocketSrverAddress)
// 4、全局保存WebSocket操作句柄：main.js 全局引用
this.$WebSocket.WebsocketINI(tmpWebsocket)
// 5、WebSocket连接成功提示
tmpWebsocket.onopen = function(e) {
console.log('webcoket连接成功')
}
//6、连接失败提示
tmpWebsocket.onclose = function(e) {
console.log('webcoket连接关闭：', e)
}
}
}
}
</script>
<style lang="scss"></style>
3、在需要使用WebSocket的vue页面中调用WebSocket向后端发送消息：
//test.vue
Btn_Test_Click() {
//发送消息
this.$WebSocket.WebSocketHandle.send('曾经沧海难为水，除却浓妆皆是鬼！')
this.$WebSocket.Send('悟已往之不谏，杀鸡取卵扯蛋！')
}
4、如果页面需要接收消息回调：
created() {
this.$WebSocket.WebSocketBandMsgReceivedEvent(this.WebSocket_OnMesage) // 绑定消息回调事件
},
method:{
WebSocket_OnMesage(msg) {//实际消息回调事件
console.log('收到服务器消息：', msg.data)
}
}
三、总结：
封装测试弄了大半天，写篇文章再总结一下，一天就这么过去了；
讲道理2020年春节前后14天家也没回，留在宁波哪儿也没去，一个人吃着泡面没日没夜的赶项目，真心好累；
不过核心功能封装好了好了，用起来是真的很舒服，很开心；
有帮助小伙伴们记得点个赞鼓励一下哟！