feat(ws): added WebSocket examples and service scripts

CHANGELOG.zh_CN.md

@@ -10,6 +10,7 @@
 - 新增图标选择器组件
 - 新增修改密码界面
 - 新增部门管理示例界面
+- 新增 WebSocket 示例和服务脚本
 
 ### ⚡ Performance Improvements
 

package.json

@@ -42,7 +42,7 @@
     "qrcode": "^1.4.4",
     "sortablejs": "^1.13.0",
     "vditor": "^3.8.1",
-    "vue": "3.0.5",
+    "vue": "^3.0.7",
     "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.4",
     "vue-types": "^3.0.2",
@@ -73,7 +73,7 @@
     "@vitejs/plugin-legacy": "^1.3.1",
     "@vitejs/plugin-vue": "^1.1.5",
     "@vitejs/plugin-vue-jsx": "^1.1.2",
-    "@vue/compiler-sfc": "3.0.5",
+    "@vue/compiler-sfc": "^3.0.7",
     "autoprefixer": "^10.2.4",
     "commitizen": "^4.2.3",
     "conventional-changelog-cli": "^2.1.1",

src/components/SimpleMenu/src/index.less

@@ -35,7 +35,7 @@
 
   &-tag {
     position: absolute;
-    top: calc(50% - 10px);
+    top: calc(50% - 8px);
     right: 30px;
     display: inline-block;
     padding: 2px 3px;

src/locales/lang/en/routes/demo/feat.ts

@@ -16,6 +16,8 @@ export default {
   tab1: 'Tab with parameter 1',
   tab2: 'Tab with parameter 2',
 
+  ws: 'Websocket test',
+
   breadcrumb: 'Breadcrumbs',
   breadcrumbFlat: 'Flat Mode',
   breadcrumbFlatDetail: 'Flat mode details',

src/locales/lang/zh_CN/routes/demo/feat.ts

@@ -16,6 +16,8 @@ export default {
   tab1: 'Tab带参1',
   tab2: 'Tab带参2',
 
+  ws: 'websocket测试',
+
   breadcrumb: '面包屑导航',
   breadcrumbFlat: '平级模式',
   breadcrumbFlatDetail: '平级详情',

src/router/menus/modules/demo/feat.ts

@@ -19,6 +19,13 @@ const menu: MenuModule = {
         },
       },
       {
+        path: 'ws',
+        name: t('routes.demo.feat.ws'),
+        tag: {
+          content: 'new',
+        },
+      },
+      {
         path: 'tabs',
         name: t('routes.demo.feat.tabs'),
       },

src/router/routes/modules/demo/feat.ts

@@ -22,6 +22,14 @@ const feat: AppRouteModule = {
       },
     },
     {
+      path: 'ws',
+      name: 'WebSocket',
+      component: () => import('/@/views/demo/feat/ws/index.vue'),
+      meta: {
+        title: t('routes.demo.feat.ws'),
+      },
+    },
+    {
       path: 'tabs',
       name: 'TabsDemo',
       component: () => import('/@/views/demo/feat/tabs/index.vue'),

src/views/demo/feat/ws/index.vue

+<template>
+  <PageWrapper title="WebSocket 示例">
+    <div class="flex">
+      <div class="w-1/3 bg-white p-4">
+        <div class="flex items-center">
+          <span class="text-lg font-medium mr-4"> 连接状态: </span>
+          <Tag :color="getTagColor">{{ status }}</Tag>
+        </div>
+        <hr class="my-4" />
+
+        <div class="flex">
+          <a-input v-model:value="server" disabled>
+            <template #addonBefore> 服务地址 </template>
+          </a-input>
+          <a-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
+            {{ getIsOpen ? '关闭连接' : '开启连接' }}
+          </a-button>
+        </div>
+        <p class="text-lg font-medium mt-4">设置</p>
+        <hr class="my-4" />
+
+        <InputTextArea
+          placeholder="需要发送到服务器的内容"
+          :disabled="!getIsOpen"
+          v-model:value="sendValue"
+          allowClear
+        />
+
+        <a-button type="primary" block class="mt-4" :disabled="!getIsOpen" @click="handlerSend">
+          发送
+        </a-button>
+      </div>
+
+      <div class="w-2/3 bg-white ml-4 p-4">
+        <span class="text-lg font-medium mr-4"> 消息记录: </span>
+        <hr class="my-4" />
+
+        <div class="max-h-80 overflow-auto">
+          <ul>
+            <li v-for="item in getList" class="border-b-1 mt-2" :key="item.time">
+              <div class="flex items-center">
+                <span class="mr-2 text-primary font-medium">收到消息:</span>
+                <span>{{ formatToDateTime(item.time) }}</span>
+              </div>
+              <div>
+                {{ item.res }}
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, watchEffect, computed, toRefs } from 'vue';
+  import { Alert, Tag, Input } from 'ant-design-vue';
+
+  import { PageWrapper } from '/@/components/Page';
+
+  import { useWebSocket } from '@vueuse/core';
+
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  export default defineComponent({
+    components: {
+      PageWrapper,
+      [Input.name]: Input,
+      InputTextArea: Input.TextArea,
+      Alert,
+      Tag,
+    },
+    setup() {
+      const state = reactive({
+        server: 'ws://localhost:3380/test',
+        sendValue: '',
+        recordList: [] as { id: number; time: number; res: string }[],
+      });
+
+      const { status, data, send, close, open } = useWebSocket(state.server, {
+        autoReconnect: true,
+        heartbeat: true,
+      });
+
+      watchEffect(() => {
+        if (data.value) {
+          try {
+            const res = JSON.parse(data.value);
+            state.recordList.push(res);
+          } catch (error) {
+            state.recordList.push({
+              res: data.value,
+              id: Math.ceil(Math.random() * 1000),
+              time: new Date().getTime(),
+            });
+          }
+        }
+      });
+
+      const getIsOpen = computed(() => status.value === 'OPEN');
+      const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'));
+
+      const getList = computed(() => {
+        return [...state.recordList].reverse();
+      });
+
+      function handlerSend() {
+        send(state.sendValue);
+        state.sendValue = '';
+      }
+
+      function toggle() {
+        if (getIsOpen.value) {
+          close();
+        } else {
+          open();
+        }
+      }
+      return {
+        status,
+        formatToDateTime,
+        ...toRefs(state),
+        handlerSend,
+        getList,
+        toggle,
+        getIsOpen,
+        getTagColor,
+      };
+    },
+  });
+</script>

test/upload-server/README.md

@@ -8,11 +8,8 @@ Simple file upload service for testing file upload components.
 
 cd ./test/upload-server
 
-// upload dir
-mkdir static
-
 yarn install
 
-node app.js
+yarn start
 
 ```

test/upload-server/app.js

 const Koa = require('koa');
-const fs = require('fs');
 const path = require('path');
 const router = require('koa-router')();
 const koaBody = require('koa-body');
 const static = require('koa-static');
 const cors = require('koa2-cors');
+const fs = require('fs-extra');
 const app = new Koa();
 
+const uploadUrl = 'http://localhost:3001/static/upload';
+
+fs.ensureDir(path.join(__dirname, 'static/upload'));
+
 app.use(cors());
 
 app.use(
@@ -19,8 +23,6 @@ app.use(
   })
 );
 
-const uploadUrl = 'http://localhost:3001/static/upload';
-
 router.get('/', (ctx) => {
   ctx.type = 'html';
   const pathUrl = path.join(__dirname, '/static/upload.html');
@@ -61,7 +63,6 @@ const uploadFilePublic = function (ctx, files, flag) {
     }
   };
   if (flag) {
-    // 多个文件上传
     for (let i = 0; i < files.length; i++) {
       const f1 = files[i];
       fileFunc(f1);

test/upload-server/package.json

 {
-  "name": "server",
+  "name": "upload-server",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "app.js",
   "license": "MIT",
+  "scripts": {
+    "start": "node app.js"
+  },
   "dependencies": {
-    "koa": "^2.13.0",
+    "fs-extra": "^9.1.0",
+    "koa": "^2.13.1",
     "koa-body": "^4.2.0",
     "koa-router": "^10.0.0",
     "koa-static": "^5.0.0",

test/upload-server/yarn.lock

@@ -27,6 +27,11 @@ any-promise@^1.1.0:
   resolved "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
   integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
 
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
 bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
@@ -146,6 +151,21 @@ fresh@~0.5.2:
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
+fs-extra@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.6"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
+
 http-assert@^1.3.0:
   version "1.4.1"
   resolved "https://registry.npmjs.org/http-assert/-/http-assert-1.4.1.tgz#c5f725d677aa7e873ef736199b89686cceb37878"
@@ -213,6 +233,15 @@ is-generator-function@^1.0.7:
   resolved "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.8.tgz#dfb5c2b120e02b0a8d9d2c6806cd5621aa922f7b"
   integrity sha512-2Omr/twNtufVZFr1GhxjOMFPAj2sjc/dKaIqBhvo4qciXfJmITGH6ZGd8eZYNHza8t1y0e01AuqRhJwfWp26WQ==
 
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 keygrip@~1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz#871b1681d5e159c62a445b0c74b615e0917e7226"
@@ -282,7 +311,7 @@ koa2-cors@^2.0.6:
   resolved "https://registry.npmjs.org/koa2-cors/-/koa2-cors-2.0.6.tgz#9ad23df3a0b9bb84530b46f5944f3fb576086554"
   integrity sha512-JRCcSM4lamM+8kvKGDKlesYk2ASrmSTczDtGUnIadqMgnHU4Ct5Gw7Bxt3w3m6d6dy3WN0PU4oMP43HbddDEWg==
 
-koa@^2.13.0:
+koa@^2.13.1:
   version "2.13.1"
   resolved "https://registry.npmjs.org/koa/-/koa-2.13.1.tgz#6275172875b27bcfe1d454356a5b6b9f5a9b1051"
   integrity sha512-Lb2Dloc72auj5vK4X4qqL7B5jyDPQaZucc9sR/71byg7ryoD1NCaCm63CShk9ID9quQvDEi1bGR/iGjCG7As3w==
@@ -451,6 +480,11 @@ type-is@^1.6.14, type-is@^1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
 unpipe@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"

test/websocket-server/app.js

+const Koa = require('koa');
+const route = require('koa-route');
+const websockify = require('koa-websocket');
+
+const app = websockify(new Koa());
+
+app.ws.use(function (ctx, next) {
+  ctx.websocket.send('connection succeeded!');
+  return next(ctx);
+});
+
+app.ws.use(
+  route.all('/test', function (ctx) {
+    // ctx.websocket.send('Hello World');
+    ctx.websocket.on('message', function (message) {
+      // do something with the message from client
+
+      if (message !== 'ping') {
+        let data = JSON.stringify({
+          id: Math.ceil(Math.random() * 1000),
+          time: new Date().getTime(),
+          res: `${message}`,
+        });
+        ctx.websocket.send(data);
+      }
+      console.log(message);
+    });
+  })
+);
+
+app.listen(3380, () => {
+  console.log('websocket server is listen in: ' + 3380);
+});

test/websocket-server/package.json

+{
+  "name": "websocket-server",
+  "version": "1.0.0",
+  "main": "app.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "node app.js"
+  },
+  "dependencies": {
+    "fs-extra": "^9.1.0",
+    "koa": "^2.13.1",
+    "koa-route": "^3.2.0",
+    "koa-websocket": "^6.0.0"
+  }
+}