websocket 重新封装

Author: puhui999

src/api/system/notice.js

@@ -42,3 +42,11 @@ export function delNotice(noticeId) {
     method: 'delete'
   })
 }
+
+// 推送公告
+export function pushNotice(noticeId) {
+  return request({
+    url: '/system/notice/push?id=' + noticeId,
+    method: 'post'
+  })
+}

src/views/infra/webSocket/index.vue

@@ -16,8 +16,19 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-form-item label="发给谁" size="small">
+        <el-select v-model="sendUserId" placeholder="请选择">
+          <el-option label="所有人" :value="null"/>
+          <el-option
+              v-for="item in userList"
+              :key="item.id"
+              :label="item.nickname"
+              :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item label="发送内容" size="small">
-        <el-input type="textarea" v-model="message" :rows="5"/>
+        <el-input type="textarea" v-model="sendText" :rows="5"/>
       </el-form-item>
       <el-form-item label="" size="small">
         <el-button type="success" @click="send">发送消息</el-button>
@@ -33,35 +44,73 @@
 </template>
 
 <script>
-import store from "@/store";
 import {getNowDateTime} from "@/utils/ruoyi";
+import {getAccessToken} from "@/utils/auth";
+import {listSimpleUsers} from "@/api/system/user";
 
 export default {
   data() {
     return {
-      url: process.env.VUE_APP_BASE_API + "/websocket/message",
-      message: "",
+      url: "",
+      sendText: "",
       content: "",
       ws: null,
+      userList: [], // 用户列表
+      sendUserId: null // 发给谁，默认所有人
     };
   },
   created() {
-    this.url = this.url.replace("http", "ws")
+    const wsUrl = process.env.VUE_APP_BASE_API + "/infra/ws" + '?token=' + getAccessToken();
+    this.url = wsUrl.replace("http", "ws");
+    // 获取用户精简信息列表
+    const self = this;
+    listSimpleUsers().then(res => {
+      self.userList = res.data;
+    });
   },
   methods: {
     connect() {
       if (!'WebSocket' in window) {
         this.$modal.msgError("您的浏览器不支持WebSocket");
         return;
       }
-      const userId = store.getters.userId;
-      this.ws = new WebSocket(this.url + "?userId=" + userId);
+      this.ws = new WebSocket(this.url);
       const self = this;
       this.ws.onopen = function (event) {
         self.content = self.content + "\n**********************连接开始**********************\n";
       };
       this.ws.onmessage = function (event) {
-        self.content = self.content + "接收时间：" + getNowDateTime() + "\n" + event.data + "\n";
+        try {
+          const data = event.data
+          // 1. 收到心跳
+          if (data === 'pong') {
+            return
+          }
+          // 2.1 解析 type 消息类型
+          const jsonMessage = JSON.parse(data)
+          const type = jsonMessage.type
+          const content = JSON.parse(jsonMessage.content)
+          if (!type) {
+            self.$modal.msgError('未知的消息类型：' + data)
+            return
+          }
+          // 2.2 消息类型：demo-message-receive
+          if (type === 'demo-message-receive') {
+            const single = content.single
+            self.content = self.content + "接收时间：" + getNowDateTime() + "\n" +
+                `【${single ? '单发' : '群发'}】用户编号(${content.fromUserId})：${content.text}` + "\n";
+            return
+          }
+          // 2.3 消息类型：notice-push
+          if (type === 'notice-push') {
+            self.content = self.content + "接收时间：" + getNowDateTime() + "\n" + `【系统通知】：${content.title}` + "\n";
+            return
+          }
+          self.$modal.msgError('未处理消息：' + data)
+        } catch (error) {
+          self.$modal.msgError('处理消息发生异常：' + event.data)
+          console.error(error)
+        }
       };
       this.ws.onclose = function (event) {
         self.content = self.content + "**********************连接关闭**********************\n";
@@ -81,11 +130,24 @@ export default {
         this.$modal.msgError("未连接到服务器");
         return;
       }
-      if (!this.message) {
+      if (!this.sendText) {
         this.$modal.msgError("请输入发送内容");
         return;
       }
-      this.ws.send(this.message);
+
+      // 1.1 先 JSON 化 message 消息内容
+      const messageContent = JSON.stringify({
+        text: this.sendText,
+        toUserId: this.sendUserId
+      })
+      // 1.2 再 JSON 化整个消息
+      const jsonMessage = JSON.stringify({
+        type: 'demo-message-send',
+        content: messageContent
+      })
+      // 2. 最后发送消息
+      this.ws.send(jsonMessage)
+      this.sendText = ''
     }
   },
 };

src/views/system/notice/index.vue

@@ -6,7 +6,8 @@
       </el-form-item>
       <el-form-item label="公告状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="公告状态" clearable>
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label"
+                     :value="parseInt(dict.value)"/>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -18,13 +19,14 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['system:notice:create']"s>新增</el-button>
+                   v-hasPermi="['system:notice:create']" s>新增
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="noticeList">
-      <el-table-column label="序号" align="center" prop="id" width="100" />
+      <el-table-column label="序号" align="center" prop="id" width="100"/>
       <el-table-column label="公告标题" align="center" prop="title" :show-overflow-tooltip="true"/>
       <el-table-column label="公告类型" align="center" prop="type" width="100">
         <template v-slot="scope">
@@ -36,7 +38,7 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="创建者" align="center" prop="createBy" width="100" />
+      <el-table-column label="创建者" align="center" prop="createBy" width="100"/>
       <el-table-column label="创建时间" align="center" prop="createTime" width="100">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
@@ -45,9 +47,14 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:notice:update']">修改</el-button>
+                     v-hasPermi="['system:notice:update']">修改
+          </el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['system:notice:delete']">删除</el-button>
+                     v-hasPermi="['system:notice:delete']">删除
+          </el-button>
+          <el-button size="mini" type="text" @click="handlePush(scope.row.id)"
+                     v-hasPermi="['system:notice:update']">推送
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -61,7 +68,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="公告标题" prop="title">
-              <el-input v-model="form.title" placeholder="请输入公告标题" />
+              <el-input v-model="form.title" placeholder="请输入公告标题"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -83,7 +90,8 @@
                     v-for="dict in statusDictDatas"
                     :key="parseInt(dict.value)"
                     :label="parseInt(dict.value)"
-                >{{dict.label}}</el-radio>
+                >{{ dict.label }}
+                </el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -103,11 +111,11 @@
 </template>
 
 <script>
-import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
+import {addNotice, delNotice, getNotice, listNotice, pushNotice, updateNotice} from "@/api/system/notice";
 import Editor from '@/components/Editor';
 
 import {CommonStatusEnum} from '@/utils/constants'
-import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+import {DICT_TYPE, getDictDatas} from '@/utils/dict'
 
 export default {
   name: "SystemNotice",
@@ -140,10 +148,10 @@ export default {
       // 表单校验
       rules: {
         title: [
-          { required: true, message: "公告标题不能为空", trigger: "blur" }
+          {required: true, message: "公告标题不能为空", trigger: "blur"}
         ],
         type: [
-          { required: true, message: "公告类型不能为空", trigger: "change" }
+          {required: true, message: "公告类型不能为空", trigger: "change"}
         ]
       },
 
@@ -210,7 +218,7 @@ export default {
       });
     },
     /** 提交按钮 */
-    submitForm: function() {
+    submitForm: function () {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id !== undefined) {
@@ -232,12 +240,27 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除公告编号为"' + ids + '"的数据项?').then(function() {
-          return delNotice(ids);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal.confirm('是否确认删除公告编号为"' + ids + '"的数据项?').then(function () {
+        return delNotice(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    /** 推送按钮操作 */
+    handlePush(id) {
+      try {
+        const self = this;
+        // 推送的二次确认
+        this.$modal.confirm('是否推送所选中通知？').then(() => {
+          // 发起推送
+          pushNotice(id).then(() => {
+            self.$modal.success('推送成功');
+          })
+        })
+      } catch {
+      }
     }
   }
 };