ruoyi-nbcio-plus基于vue3的flowable的websocket消息组件的升级修改（一）

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5）： http://122.227.135.243:9888

1、在navbar.vue里增加消息组件

<!-- 消息 --><el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom"><header-notice id="message" class="right-menu-item hover-effect" /></el-tooltip>

就是在右上角显示消息图标bell

2、HeadNotice.vue文件vue3版本修改如下：

<template><div><a-popover trigger="click" placement="bottomRight" :autoAdjustOverflow="true" :arrowPointAtCenter="true"overlayClassName="header-notice-wrapper" @visibleChange="handleHoverChange":overlayStyle="{ width: '400px', top: '50px' }"><template #content><a-spin :spinning="loadding"><a-tabs><a-tab-pane :tab="msg1Title" key="1"><a-list><a-list-item :key="index" v-for="(record, index) in notice1"><div style="margin-left: 5%;width: 50%"><p><a @click="showNoticeList(record)">{{ record.titile }}</a></p><p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p></div><div style="text-align: right"><a-tag @click="showNoticeList(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag><a-tag @click="showNoticeList(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag><a-tag @click="showNoticeList(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag></div></a-list-item><div style="margin-top: 5px;text-align: center"><a-button @click="toMyNotice()" type="dashed" block>查看更多</a-button></div></a-list></a-tab-pane><a-tab-pane :tab="msg2Title" key="2"><a-list><a-list-item :key="index" v-for="(record, index) in notice2"><div style="margin-left: 5%;width: 50%"><p><a @click="showNoticeList(record)">{{ record.titile }}</a></p><p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p></div><div style="text-align: right"><a-tag @click="showNoticeList(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag><a-tag @click="showNoticeList(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag><a-tag @click="showNoticeList(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag></div></a-list-item><div style="margin-top: 5px;text-align: center"><a-button @click="toMyNotice()" type="dashed" block>查看更多</a-button></div></a-list></a-tab-pane><a-tab-pane :tab="msg3Title" key="3"><a-list><a-list-item :key="index" v-for="(record, index) in notice3"><div style="margin-left: 5%;width: 50%"><p><a @click="showNoticeList(record)">{{ record.titile }}</a></p><p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p></div><div style="text-align: right"><a-tag @click="showNoticeList(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag><a-tag @click="showNoticeList(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag><a-tag @click="showNoticeList(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag></div></a-list-item><div style="margin-top: 5px;text-align: center"><a-button @click="toMyNotice()" type="dashed" block>查看更多</a-button></div></a-list></a-tab-pane></a-tabs></a-spin></template><span @click="fetchNotice" class="header-notice"><a-badge :count="msgTotal"><svg-icon icon-class="bell" style="width: 18px;height:18px;" /></a-badge></span><show-notice ref="showNoticeRef" @ok="modalFormOk"></show-notice><dynamic-notice ref="showDynamNoticeRef" :path="openPath" :formData="formData" /></a-popover></div>
</template><script setup lang="ts">import ShowNotice from './ShowNotice.vue'import useUserStore from '@/store/modules/user';import DynamicNotice from './DynamicNotice'import { ElNotification } from "element-plus";import { listByUser, updateUserIdAndNotice } from "@/api/system/notice";const router = useRouter();const userStore = useUserStore();const loadding = ref(false)const hovered = ref(false)const notice1 = ref<any>([])const notice2 = ref<any>([])const notice3 = ref<any>([])const msg1Count = ref("0")const msg2Count = ref("0")const msg3Count = ref("0")const msg1Title = ref("通知(0)")const msg2Title = ref("")const msg3Title = ref("")const stopTimer = ref(false)let   websock : any = null; // websocket 实例const lockReconnect = ref(false)const formData = ref<any>({})const openPath = ref('')const showDynamNoticeRef = ref(DynamicNotice)const showNoticeRef = ref(ShowNotice)const loadData = () => {try {// 获取系统消息listByUser().then((res) => {console.log("listByUser res",res);if (res.code == 200) {notice1.value = res.data.anntMsgList;msg1Count.value = res.data.anntMsgTotal;msg1Title.value = "通知(" + res.data.anntMsgTotal + ")";notice2.value = res.data.sysMsgList;msg2Count.value = res.data.sysMsgTotal;msg2Title.value = "系统消息(" + res.data.sysMsgTotal + ")";notice3.value = res.data.todealMsgList;msg3Count.value = res.data.todealMsgTotal;msg3Title.value = "待办消息(" + res.data.todealMsgTotal + ")";}}).catch(error => {console.log("系统消息通知异常", error); //这行打印permissionName is undefinedstopTimer.value = true;console.log("清理timer");});} catch (err) {stopTimer.value = true;console.log("通知异常", err);}}const fetchNotice = () => {if (loadding.value) {loadding.value = falsereturn}loadding.value = truesetTimeout(() => {loadding.value = false}, 200)}const showNoticeList = (record: any) => {updateUserIdAndNotice({noticeId: record.noticeId}).then((res) => {if (res.code == 200) {loadData();}});hovered.value = false;if (record.openType === 'component') {openPath.value = record.openPage;formData.value = {id: record.busId};showDynamNoticeRef.value.detail(record.openPage);} else {console.log("showNoticeList showNoticeRef",showNoticeRef.value)showNoticeRef.value.detail(record);}}const toMyNotice = () => {router.push({path: '/personal/mynotice'});}const modalFormOk = () =>{}const handleHoverChange = (visible: any) => {hovered.value = visible;}const initWebSocket = () => {// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于httpsvar userName = userStore.name;//var url = import.meta.env.VITE_APP_WS_API + "/websocket/" + userName  + "?Authorization=Bearer " + getToken() + "&clientid=" + import.meta.env.VITE_APP_CLIENT_ID;var url = import.meta.env.VITE_APP_WS_API + "/websocket/" + userName;console.log("initWebSocket url=",url);websock = new WebSocket(url);websock.onopen = websocketOnopen;websock.onerror = websocketOnerror;websock.onmessage = websocketOnmessage;websock.onclose = websocketOnclose;}const websocketOnopen = () => {console.log("WebSocket连接成功");}const websocketOnerror = (e) => {console.log("WebSocket连接发生错误");reconnect();}const websocketOnmessage = (e) => {console.log("-----接收消息-------", e);console.log("-----接收消息-------", e.data);var data = eval("(" + e.data + ")"); //解析对象if (data.cmd == "topic") {//系统通知loadData();ElNotification({ //websocket消息通知弹出title: 'websocket消息通知',message: data.msgTxt,type: 'success',duration: 1000})} else if (data.cmd == "user") {//用户消息loadData();ElNotification({title: 'websocket消息通知',message: data.msgTxt,type: 'success',duration: 1000})}}const websocketOnclose = (e) => {console.log("connection closed (" + e + ")");if (e) {console.log("connection closed (" + e.code + ")");}reconnect();}const websocketSend = (text) => { // 数据发送try {websock.send(text);} catch (err) {console.log("send failed (" + err.code + ")");}}const openNotification = (data) =>{var text = data.msgTxt;const key = `open${Date.now()}`;ElNotification({title: '消息提醒',message: text,type: 'success',duration: 1000})}const reconnect = () => {if (lockReconnect.value) return;lockReconnect.value = true;//没连接上会一直重连，设置延迟避免请求过多setTimeout(function() {console.info("尝试重连...");initWebSocket();lockReconnect.value = false;}, 5000);}const showDetail = (key, data) => {ElNotification[key].close();var id = data.msgId;getAction(url.queryById, {id: id}).then((res) => {if (res.success) {var record = res.result;showNotice(record);}})}const msgTotal = computed(() => {return parseInt(msg1Count.value) + parseInt(msg2Count.value) + parseInt(msg3Count.value);})onMounted(() => {loadData();initWebSocket();})onUnmounted(() => {websocketOnclose('');})
</script><style lang="css">.header-notice-wrapper {top: 50px !important;}
</style>
<style lang="less" scoped>.header-notice {display: inline-block;transition: all 0.3s;span {vertical-align: initial;}}
</style>

3、ShowNotice.vue文件vue3版本修改如下：

<template><n-modal:title="title":width="modelStyle.width":visible="visible":bodyStyle ="bodyStyle"@cancel="handleCancel"><template #footer><a-button key="back" @click="handleCancel">关闭</a-button><a-button v-if="recordDetail.openType==='url'" type="primary" @click="toHandle">去处理</a-button></template><a-card class="daily-article" :loading="loading"><a-card-meta:title="recordDetail.noticeTitle":description="'发布人：'+recordDetail.sender + ' 发布时间： ' + recordDetail.sendTime"></a-card-meta><a-divider /><span v-html="recordDetail.noticeContent" class="article-content"></span></a-card></n-modal>
</template><script setup lang="ts" name="ShowNotice">import NModal from './NModal'const router = useRouter();const title = ref("通知消息")const recordDetail = ref<any>({})const visible = ref(false)const loading = ref(false)const bodyStyle = ref({padding: "0",height:(window.innerHeight*0.8)+"px","overflow-y":"auto",})const modelStyle = ref({width: '60%',style: { top: '20px' },fullScreen: false})const detail = (record: any) => {visible.value = true;recordDetail.value = toRaw(record);}const handleCancel = () => {visible.value = false;}const toHandle = () => {if(recordDetail.value.openType==='url'){visible.value = false;//链接跳转router.push({path: recordDetail.value.openPage})}}//暴露detail方法defineExpose({detail});onMounted(() => {console.log("ShowNotice visible",visible)})</script><style lang="less" scoped>.announcementCustomModal{.ant-modal-header {border: none;display: inline-block;position: absolute;z-index: 1;right: 56px;padding: 0;.ant-modal-title{.custom-btn{width: 56px;height: 56px;border: none;box-shadow: none;}}}.daily-article{border-bottom: 0;}}.daily-article {.article-button {font-size: 1.2rem !important;}.ant-card-body {padding: 18px !important;}.ant-card-head {padding: 0 1rem;}.ant-card-meta {margin-bottom: 1rem;}.article-content {p {word-wrap: break-word;word-break: break-all;text-overflow: initial;white-space: normal;font-size: .9rem !important;margin-bottom: .8rem;}:deep(a) {color: #1890ff;}}}
</style>