用vue3显示websocket的状态

在上次vue3项目上增加一个标签，显示当前的连接状态，两个按钮:重新连接 和 断开连接

修改App.vue

<template><header><title>ws状态测试</title></header><main><WsStatus /></main>
</template><script setup lang="ts">
import WsStatus from './components/WsStatus.vue'
</script><style scoped>
header {line-height: 1.5;
}.logo {display: block;margin: 0 auto 2rem;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}
}
</style>

WsStatus.vue

创建一个组件WsStatus.vue

<template><div class="WsStatus"><h1>WebSocket 测试</h1><div class="status">连接状态: <span :class="statusClass">{{ connectionStatus }}</span></div><button @click="reconnect" :disabled="isConnecting">{{ isConnecting ? '连接中...' : '重新连接' }}</button><button @click="closeConnect" :disabled="connectStatus">断开连接</button><canvas></canvas></div>
</template><script setup lang="ts" name="WsStatus">
import { ref, onMounted, onUnmounted } from 'vue'const ws = ref()
const imageUrl = ref()
const connectionStatus = ref('未连接')
const isConnecting = ref(false)
const connectStatus = ref(false)
const statusClass = ref('disconnected')function get_appropriate_ws_url(extra_url: string) {var pcol;// 获得页面上的urlvar u = document.URL;/** We open the websocket encrypted if this page came on an* https:// url itself, otherwise unencrypted*/// 去掉http://或者https://if (u.substring(0, 5) === "https") {pcol = "wss://";u = u.substr(8);} else {pcol = "ws://";if (u.substring(0, 4) === "http")u = u.substr(7);}/* + "/xxx" bit is for IE10 workaround *///回来的url就城了ws://地址或者wss://地址return pcol + u.split('/')[0] + "/" + extra_url;
}// WebSocket配置（修改为你的服务器地址）
const wsUrl = get_appropriate_ws_url("")const connectWebSocket = () => {if (isConnecting.value) returnisConnecting.value = trueconnectionStatus.value = '连接中...'statusClass.value = 'connecting'ws.value = new WebSocket(wsUrl)ws.value.onopen = () => {connectionStatus.value = '已连接'statusClass.value = 'connected'isConnecting.value = falseconnectStatus.value = false}ws.value.onmessage = (event: any) => {console.log('收到数据')}ws.value.onerror = (error: any) => {console.error('WebSocket错误:', error)connectionStatus.value = '连接错误'statusClass.value = 'error'isConnecting.value = false}ws.value.onclose = () => {connectionStatus.value = '连接已关闭'statusClass.value = 'disconnected'isConnecting.value = falseconnectStatus.value = true}
}// 组件挂载时自动连接
onMounted(() => {connectWebSocket()
})// 组件卸载时关闭连接
onUnmounted(() => {if (ws.value) {ws.value.close()}
})function reconnect() {if (ws.value) {ws.value.close()}connectWebSocket()
}function closeConnect() {if (ws.value) {ws.value.close()}
}</script><style scoped>
.websocket-page {padding: 20px;max-width: 800px;margin: 0 auto;
}.status {margin: 20px 0;font-size: 18px;
}.status span {font-weight: bold;
}.connected {color: #4CAF50;
}.connecting {color: #FFC107;
}.disconnected {color: #F44336;
}.error {color: #F44336;
}button {padding: 10px 20px;background-color: #2196F3;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:disabled {background-color: #BBDEFB;cursor: not-allowed;
}.messages {margin-top: 30px;border-top: 1px solid #eee;padding-top: 20px;background-size: 100% 100%;
}ul {list-style-type: none;padding: 0;max-height: 300px;overflow-y: auto;border: 1px solid #ddd;padding: 10px;border-radius: 4px;
}li {padding: 5px 0;border-bottom: 1px solid #eee;
}.live-image {position: fixed;top: 50%;left: 50%;width: 100vw;/* 根据需要设置宽度 */height: 100vw;object-fit: cover;transform: translate(-50%, -50%);
}#camImage,
#canvas {position: fixed;left: 0;top: 0;width: 100%;/* height: 100%; */z-index: -1;
}/* 竖屏 */
@media screen and (orientation: portrait) {}/* 横屏 */
@media screen and (orientation: landscape) {}
</style>

编译打包上传部署

$ npm run build
$ scp -r ./dist/* root@192.168.9.163:/oem/usr/www

测试

在rv1106摄像头打开运行ws服务器

# /oem/usr/bin/ws_cam

浏览器访问 http://192.168.9.163:7681/
看到相应页面，按按键会有相应的变换。