一、前言
作为前后端分离项目,前后端交互是一个非常重要的功能。目前主流框架都是通过Socket实现，本系统自然也是实现了基于Signalr的前后端交互，并在此基础上实现了基于MQTT的前后端交互功能，MQTT相比socket业务场景更多更灵活，在物联网方向有着非常多的应用。在工业物联网方向，mqtt也是应用非常广泛，最为.neter来说学习mqtt很有必要。
二、基于Signalr
系统默认是用的Signalr做前后端通信，关于Signalr使用文档可以去看Furion的文档：https://furion.baiqian.ltd/docs/signalr。
2.1 后端部分
首先需要在启动时注册signalr服务和集线器。
新建一个集线器，在类名上加上MapHub特性，这样我们前端就能通过signalr连接到后端。
2.2 前端部分
前端的signalr基于"@microsoft/signalr": "^7.0.0" 可以在package.json中查看，关于signalr的连接也是非常简单，我封装在了utils文件夹下的signalr.js中
import { Modal } from 'ant-design-vue'
import sysConfig from '@/config/index'
import tool from '@/utils/tool'
import * as signalR from '@microsoft/signalr'
import * as signalrMessage from './mqtt/message'
//使用signalr
export default function useSignalr() {
const userInfo = tool.data.get('USER_INFO') //用户信息
let socketUrl = '/hubs/simple' //socket地址
if (sysConfig.VITE_PROXY === 'false') {
socketUrl = sysConfig.API_URL + socketUrl //判断是否要走代理模式，走了的话发布之后直接nginx代理
}
//开始
const startSignalr = () => {
//初始化连接
const connection = init()
// 启动连接
connection.start().then(() => {
console.log('启动连接')
})
}
//初始化
const init = () => {
console.log('初始化SignalR对象')
// SignalR对象
const connection = new signalR.HubConnectionBuilder()
.withUrl(socketUrl, {
accessTokenFactory: () => tool.data.get(sysConfig.ACCESS_TOEKN_KEY)
})
.withAutomaticReconnect({
nextRetryDelayInMilliseconds: () => {
return 5000 // 每5秒重连一次
}
}) //自动重新连接
.configureLogging(signalR.LogLevel.Information)
.build()
connection.keepAliveIntervalInMilliseconds = 15 * 1000 // 心跳检测15s
// connection.serverTimeoutInMilliseconds = 30 * 60 * 1000 // 超时时间30m
// 断开连接
connection.onclose(async () => {
console.log('断开连接')
})
//断线重新
connection.onreconnected(() => {
console.log('断线重新连接成功')
})
//消息处理
receiveMsg(connection)
return connection
}
//接收消息处理
const receiveMsg = (connection) => {
// 接收登出
connection.on('LoginOut', (data) => {
signalrMessage.loginOut(data)
})
}
//页面销毁
onUnmounted(() => {})
return { startSignalr }
}使用也是很简单，只需要在需要连接的页面引用usesignalr,在本系统中，我们需要全局监听，所以我在layout文件夹下的index.vue中启用signalr并封装一个方法用来连接signalr。
import useSignalr from '@/utils/signalr'
//连接signalr
connectSignalr() {
const { startSignalr } = useSignalr()
startSignalr()
}然后在页面created的最后连接signalr就行
F12查看控制台输出,登录系统之后,应该会提示连接singlar成功。
三、基于Mqtt
如果使用mqtt则需要一个mqtt broker来进行数据中转，前端和后端都是通过客户端的方式去连接服务端，然后再通过发布/订阅的方式进行数据交互。这里mqtt broker推荐使用emqx来搭建。
下载地址:https://www.emqx.com/zh/try?product=broker
后端mqtt客户端基于我自己封装的SimpleMQTT组件，gitee地址:https://gitee.com/zxzyjs/SimpleMQTT.git
前端基于"mqtt": "^4.3.7",可在package.json中查看。
3.1 MQTT配置
既然登录系统需要用户名/密码登录，那么连接mqtt服务器也应该需要账号密码才行，然而如果将账号密码信息写在前端配置文件中是不安全的，别有用心的人可能会盗取我们的用户名和密码。而且账号密码写死在前端也显得不那么灵活，如果账号密码修改了需要重新打包上传发布。基于以上两种情况，本系统将mqtt配置改为可配置化，用户可以在系统运维->系统配置->MQTT配置中配置域名和账号密码。
3.2 后端部分
首先需要在SimpleAdmin.Web.Core项目的配置文件中的WebSettings打开mqtt配置。
配置账号密码
系统会自动注册mqtt服务，连接mqttbroker
因为我们mqtt的连接信息都是存储在后端，前端想要连接就得通过接口获取连接信息，所以我们需要写一个接口来返回连接信息和订阅的主题。
3.3 前端部分
首先需要在配置文件中设置 VITE_MQTT = true
关于mqtt的封装可以在utils下的mqtt文件夹中找到。
mqtt.js
import * as mqtt from 'mqtt/dist/mqtt.min.js'
//mqtt客户端对象
export const mqttClient = ref()
//初始化操作
export const init = (url, options) => {
mqttClient.value = mqtt.connect(url, options) //连接mqtt
//报错
mqttClient.value.on('error', (error) => {
console.log('mqtt连接报错')
console.log(error)
})
//重连
mqttClient.value.on('reconnect', (error) => {
console.log('mqtt重连')
console.log(error)
})
}
//接收消息
export const link = (callback) => {
mqttClient.value.on('connect', callback)
}
//订阅
export const subscribes = (topics) => {
if (Array.isArray(topics)) {
//订阅频道
topics.forEach((topic) => {
subscribe(topic)
})
}
}
//订阅
export const subscribe = (topic) => {
mqttClient.value.subscribe(topic, (error) => {
if (!error) {
console.log(topic, '订阅成功')
} else {
console.log(topic, '订阅失败')
}
})
}
//取消订阅
export const unSubscribes = (topic) => {
mqttClient.value.unsubscribe(topic, (error) => {
if (!error) {
console.log(topic, '取消订阅成功')
} else {
console.log(topic, '取消订阅失败')
}
})
}
//接收消息
export const getMessage = (callback) => {
mqttClient.value.on('message', callback)
}
//关闭连接
export const close = () => {
console.log('关闭连接')
mqttClient.value.end()
mqttClient.value = null
}usemqtt.js
import { mqttClient, init, link, getMessage, close, subscribes } from '@/utils/mqtt/mqtt'
import mqttapi from '@/api/auth/mqttApi'
import * as mqttMessage from './message'
//使用mqtt
export default function useMqtt() {
let options = {
clientId: '',
username: '',
password: '',
clean: true,
keepalive: 60,
connectTimeout: 3000
}
//连接mqtt并订阅频道
const startMqtt = () => {
mqttapi.getParameter().then((res) => {
options.clientId = res.clientId
options.username = res.userName
options.password = res.password
console.log(options)
//mqtt初始化
init(res.url, options)
//连接成功
link(() => {
console.log('mqtt连接成功')
console.log(res.topics)
subscribes(res.topics)
//接收消息
receivceMessage()
})
})
}
//接收消息
const receivceMessage = () => {
getMessage((topic, message) => {
console.log(`收到主题${topic}的消息`)
const msg = JSON.parse(message.toString())
console.log(`消息为:${message}`)
// mqttMessage.loginOut(message)
const msgType = msg.MsgType
if (msgType === 'LoginOut') {
var clientIds = msg.Data.ClientIds
clientIds.forEach((clientId) => {
if (clientId == options.clientId) {
mqttMessage.loginOut(msg.Data.Message)
}
})
}
})
}
//页面销毁
onUnmounted(() => {
if (mqttClient.value) {
close()
}
})
return { startMqtt }
}在需要启用mqtt的页面引入usemqtt并封装成方法
import useMqtt from '@/utils/mqtt/usemqtt'
//连接mqtt
connectMqtt() {
const { startMqtt } = useMqtt()
startMqtt()
},这样在系统启动时就会启用mqtt而不是singalr
F12查看控制台输出,登录系统之后已经成功连上mqtt服务器并订阅了Topic
四、在线用户
通过即时通讯我们可以判断当前用户是否在线，原理非常简单，用户登录系统后，无论哪种方式后台都会收到当前token连接了，然后把当前连接的客户端ID存储到该token信息中的客户端id列表中，当用户关闭了浏览器或者网络断开了连接，则会将断开的客户端id从token中的客户端id列表中删除。在前端会话管理中只需要判断当前token的客户端id列表是否有数据就行了，如果有就是在线，如果没有就是离线。
4.1 Signalr方式
集线器里重写OnDisconnectedAsync和OnConnectedAsync方法
收到连接或断开的请求后更新redis
4.2 mqtt方式
对应signalr的OnConnectedAsync和OnDisconnectedAsync，mqtt叫做上线和下线，设备上线代表连接到服务器，设备下线代表断开服务器，通过emqx我们可以订阅上下线主题获取设备的上下线信息。所以我们需要启动一个客户端后台去订阅上下线事件，并且不能像iis那样会被回收，所以我们可以通过建立workerservice项目来后台运行。对应的SimpleAdmin.Background后台服务层。
MqttWorker中监听设备上下线主题，然后根据客户端id去更新redis就行了，原理和signalr一样。
