!50 add 新增 前端接入websocket接收消息 * add 新增 前端接入websocket接收消息

三个三

2023-11-02 a8a334b3c326610be70dd762978e8bf1a8766adc

!50 add 新增 前端接入websocket接收消息
*  add 新增 前端接入websocket接收消息

 src/lang/en_US.ts

@@ -18,6 +18,7 @@
    language: 'Language',
    dashboard: 'Dashboard',
    document: 'Document',
    message: 'Message',
    layoutSize: 'Layout Size',
    selectTenant: 'Select Tenant',
    layoutSetting: 'Layout Setting',

 src/lang/zh_CN.ts

@@ -17,6 +17,7 @@
    language: '语言',
    dashboard: '首页',
    document: '项目文档',
    message: '消息',
    layoutSize: '布局大小',
    selectTenant: '选择租户',
    layoutSetting: '布局设置',

 src/layout/components/Navbar.vue

@@ -27,6 +27,21 @@
            <svg-icon class-name="search-icon" icon-class="search" />
          </div>
        </el-tooltip>
        <!-- æ¶ˆæ¯ -->
        <el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom">
          <div>
            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
              <template #reference>
                <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
                  <svg-icon icon-class="message" />
                </el-badge>
              </template>
              <template #default>
                <notice></notice>
              </template>
            </el-popover>
          </div>
        </el-tooltip>
        <el-tooltip content="Github" effect="dark" placement="bottom">
          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
        </el-tooltip>
@@ -81,10 +96,14 @@
import { dynamicClear, dynamicTenant } from "@/api/system/tenant";
import { ComponentInternalInstance } from "vue";
import { TenantVO } from "@/api/types";
import notice from './notice/index.vue';
import useNoticeStore from '@/store/modules/notice';

const appStore = useAppStore();
const userStore = useUserStore();
const settingsStore = useSettingsStore();
const noticeStore = storeToRefs(useNoticeStore());
const newNotice = ref(<number>0);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

@@ -161,6 +180,11 @@
        commandMap[command]();
    }
}

//用深度监听 æ¶ˆæ¯
watch(() => noticeStore.state.value.notices, (newVal, oldVal) => {
  newNotice.value = newVal.filter((item: any) => !item.read).length;
}, { deep: true });
</script>

<style lang="scss" scoped>
@@ -169,6 +193,10 @@
  height:30px;
}

:deep(.el-badge__content.is-fixed){
    top: 12px;
}

.flex {
  display: flex;
}

 src/layout/components/notice/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,134 @@
<template>
  <div class="layout-navbars-breadcrumb-user-news" v-loading="state.loading">
    <div class="head-box">
      <div class="head-box-title">通知公告</div>
      <div class="head-box-btn" @click="readAll">全部已读</div>
    </div>
    <div class="content-box" v-loading="state.loading">
      <template v-if="newsList.length > 0">
        <div class="content-box-item" v-for="(v, k) in newsList" :key="k" @click="onNewsClick(k)">
          <div class="item-conten">
            <div>{{ v.message }}</div>
            <div class="content-box-msg"></div>
            <div class="content-box-time">{{ v.time }}</div>
          </div>
          <!-- å·²è¯»/未读 -->
          <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span>
          <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
        </div>
      </template>
      <el-empty :description="'消息为空'" v-else></el-empty>
    </div>
    <div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">前往gitee</div>
  </div>
</template>

<script setup lang="ts" name="layoutBreadcrumbUserNews">
import { ref } from "vue";
import { storeToRefs } from 'pinia'
import { nextTick, onMounted, reactive } from "vue";
import useNoticeStore from '@/store/modules/notice';

const noticeStore = storeToRefs(useNoticeStore());
const {readAll} = useNoticeStore();

// å®šä¹‰å˜é‡å†…容
const state = reactive({
  loading: false,
});
const newsList =ref([]) as any;

/**
 * åˆå§‹åŒ–数据
 * @returns
 */
const getTableData = async () => {
  state.loading = true;
  newsList.value = noticeStore.state.value.notices;
  state.loading = false;
};


//点击消息，写入已读
const onNewsClick = (item: any) => {
  newsList.value[item].read = true;
  //并且写入pinia
  noticeStore.state.value.notices = newsList.value;
};

// å‰å¾€é€šçŸ¥ä¸­å¿ƒç‚¹å‡»
const onGoToGiteeClick = () => {
  window.open("https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/");
};

onMounted(() => {
  nextTick(() => {
    getTableData();
  });
});
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb-user-news {
  .head-box {
    display: flex;
    border-bottom: 1px solid var(--el-border-color-lighter);
    box-sizing: border-box;
    color: var(--el-text-color-primary);
    justify-content: space-between;
    height: 35px;
    align-items: center;
    .head-box-btn {
      color: var(--el-color-primary);
      font-size: 13px;
      cursor: pointer;
      opacity: 0.8;
      &:hover {
        opacity: 1;
      }
    }
  }
  .content-box {
    height: 300px;
    overflow: auto;
    font-size: 13px;
    .content-box-item {
      padding-top: 12px;
      display: flex;
      &:last-of-type {
        padding-bottom: 12px;
      }
      .content-box-msg {
        color: var(--el-text-color-secondary);
        margin-top: 5px;
        margin-bottom: 5px;
      }
      .content-box-time {
        color: var(--el-text-color-secondary);
      }
      .item-conten {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
    }
  }
  .foot-box {
    height: 35px;
    color: var(--el-color-primary);
    font-size: 13px;
    cursor: pointer;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--el-border-color-lighter);
    &:hover {
      opacity: 1;
    }
  }
  :deep(.el-empty__description p) {
    font-size: 13px;
  }
}
</style>

 src/store/modules/notice.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,42 @@
import { defineStore } from 'pinia';

interface NoticeItem {
  title?: string;
  read: boolean;
  message: any;
  time: string;
}

export const useNoticeStore = defineStore('notice', () => {
  const state = reactive({
    notices: [] as NoticeItem[]
  });

  const addNotice = (notice: NoticeItem) => {
    state.notices.push(notice);
  };

  const removeNotice = (notice: NoticeItem) => {
    state.notices.splice(state.notices.indexOf(notice), 1);
  };

  //实现全部已读
  const readAll = () => {
    state.notices.forEach((item) => {
      item.read = true;
    });
  };

  const clearNotice = () => {
    state.notices = [];
  };
  return {
    state,
    addNotice,
    removeNotice,
    readAll,
    clearNotice
  };
});

export default useNoticeStore;

 src/utils/websocket.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,132 @@
/**
 * @module initWebSocket åˆå§‹åŒ–
 * @module websocketonopen è¿žæŽ¥æˆåŠŸ
 * @module websocketonerror è¿žæŽ¥å¤±è´¥
 * @module websocketclose æ–­å¼€è¿žæŽ¥
 * @module resetHeart é‡ç½®å¿ƒè·³
 * @module sendSocketHeart å¿ƒè·³å‘送
 * @module reconnect é‡è¿ž
 * @module sendMsg å‘送数据
 * @module websocketonmessage æŽ¥æ”¶æ•°æ®
 * @module test æµ‹è¯•æ”¶åˆ°æ¶ˆæ¯ä¼ é€’
 * @description socket é€šä¿¡
 * @param {any} url socket地址
 * @param {any} websocket websocket å®žä¾‹
 * @param {any} heartTime å¿ƒè·³å®šæ—¶å™¨å®žä¾‹
 * @param {number} socketHeart å¿ƒè·³æ¬¡æ•°
 * @param {number} HeartTimeOut å¿ƒè·³è¶…时时间
 * @param {number} socketError é”™è¯¯æ¬¡æ•°
 */

import { getToken } from '@/utils/auth';
import useNoticeStore from '@/store/modules/notice';

const { addNotice } = useNoticeStore();

let socketUrl: any = ''; // socket地址
let websocket: any = null; // websocket å®žä¾‹
let heartTime: any = null; // å¿ƒè·³å®šæ—¶å™¨å®žä¾‹
let socketHeart = 0 as number; // å¿ƒè·³æ¬¡æ•°
const HeartTimeOut = 10000; // å¿ƒè·³è¶…时时间 10000 = 10s
let socketError = 0 as number; // é”™è¯¯æ¬¡æ•°

// åˆå§‹åŒ–socket
export const initWebSocket = (url: any) => {
  socketUrl = url;
  // åˆå§‹åŒ– websocket
  websocket = new WebSocket(url + '?Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID);
  websocketonopen();
  websocketonmessage();
  websocketonerror();
  websocketclose();
  sendSocketHeart();
  return websocket;
};

// socket è¿žæŽ¥æˆåŠŸ
export const websocketonopen = () => {
  websocket.onopen = function () {
    console.log('连接 websocket æˆåŠŸ');
    resetHeart();
  };
};

// socket è¿žæŽ¥å¤±è´¥
export const websocketonerror = () => {
  websocket.onerror = function (e: any) {
    console.log('连接 websocket å¤±è´¥', e);
  };
};

// socket æ–­å¼€é“¾æŽ¥
export const websocketclose = () => {
  websocket.onclose = function (e: any) {
    console.log('断开连接', e);
  };
};

// socket é‡ç½®å¿ƒè·³
export const resetHeart = () => {
  socketHeart = 0;
  socketError = 0;
  clearInterval(heartTime);
  sendSocketHeart();
};

// socket心跳发送
export const sendSocketHeart = () => {
  heartTime = setInterval(() => {
    // å¦‚果连接正常则发送心跳
    if (websocket.readyState == 1) {
      // if (socketHeart <= 30) {
      websocket.send(
        JSON.stringify({
          type: 'ping'
        })
      );
      socketHeart = socketHeart + 1;
    } else {
      // é‡è¿ž
      reconnect();
    }
  }, HeartTimeOut);
};

// socket重连
export const reconnect = () => {
  if (socketError <= 2) {
    clearInterval(heartTime);
    initWebSocket(socketUrl);
    socketError = socketError + 1;
    // eslint-disable-next-line prettier/prettier
    console.log('socket重连', socketError);
  } else {
    // eslint-disable-next-line prettier/prettier
    console.log('重试次数已用完');
    clearInterval(heartTime);
  }
};

// socket å‘送数据
export const sendMsg = (data: any) => {
  websocket.send(data);
};

// socket æŽ¥æ”¶æ•°æ®
export const websocketonmessage = () => {
  websocket.onmessage = function (e: any) {
    const msg = JSON.parse(e.data) as any;
    if (msg.type === 'heartbeat') {
      resetHeart();
    }
    if (msg.type === 'ping') {
      return;
    }
    addNotice({
      message: msg,
      read: false,
      time: new Date().toLocaleString()
    });
    return msg;
  };
};

 src/views/index.vue

@@ -96,6 +96,11 @@
</template>

<script setup name="Index" lang="ts">
import { initWebSocket } from '@/utils/websocket';

onMounted(() => {
  initWebSocket("ws://"+window.location.host+import.meta.env.VITE_APP_BASE_API+"/resource/websocket");
});

const goTarget = (url:string) => {
  window.open(url, '__blank')

 vite.config.ts

@@ -28,6 +28,7 @@
        [env.VITE_APP_BASE_API]: {
          target: 'http://localhost:8080',
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
        }
      }