用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;
// 获得页面上的url
var 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) return

isConnecting.value = true
connectionStatus.value = '连接中…'
statusClass.value = 'connecting'

ws.value = new WebSocket(wsUrl)

ws.value.onopen = () => {
connectionStatus.value = '已连接'
statusClass.value = 'connected'
isConnecting.value = false
connectStatus.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 = false
connectStatus.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/ 看到相应页面，按按键会有相应的变换。