-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ws): added WebSocket examples and service scripts
- Loading branch information
Showing
16 changed files
with
733 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,6 +10,7 @@ | |
| - 新增图标选择器组件 | ||
| - 新增修改密码界面 | ||
| - 新增部门管理示例界面 | ||
| - 新增 WebSocket 示例和服务脚本 | ||
|
|
||
| ### ⚡ Performance Improvements | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| 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); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| { | ||
| "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" | ||
| } | ||
| } |
Oops, something went wrong.