用vue3表现websocket的状态

在前次vue3项目上增加一个标签，表现当前的连接状态，两个按钮:重新连接 和 断开连接
修改App.vue

1. <template>
2.   <header>
3.     <title>ws状态测试</title>
4.   </header>
6.   <main>
7.     <WsStatus />
8.   </main>
9. </template>
11. <script setup lang="ts">
12. import WsStatus from './components/WsStatus.vue'
13. </script>
15. <style scoped>
16. header {
17.   line-height: 1.5;
18. }
20. .logo {
21.   display: block;
22.   margin: 0 auto 2rem;
23. }
25. @media (min-width: 1024px) {
26.   header {
27.     display: flex;
28.     place-items: center;
29.     padding-right: calc(var(--section-gap) / 2);
30.   }
32.   .logo {
33.     margin: 0 2rem 0 0;
34.   }
36.   header .wrapper {
37.     display: flex;
38.     place-items: flex-start;
39.     flex-wrap: wrap;
40.   }
41. }
42. </style>

复制代码

WsStatus.vue

创建一个组件WsStatus.vue

1. <template>
2.     <div class="WsStatus">
3.         <h1>WebSocket 测试</h1>
4.         <div class="status">
5.             连接状态: <span :class="statusClass">{{ connectionStatus }}</span>
6.         </div>
7.         <button @click="reconnect" :disabled="isConnecting">
8.             {{ isConnecting ? '连接中...' : '重新连接' }}
9.         </button>
10.         <button @click="closeConnect" :disabled="connectStatus">断开连接</button>
11.         <canvas></canvas>
12.     </div>
13. </template>
15. <script setup lang="ts" name="WsStatus">
16. import { ref, onMounted, onUnmounted } from 'vue'
18. const ws = ref()
19. const imageUrl = ref()
20. const connectionStatus = ref('未连接')
21. const isConnecting = ref(false)
22. const connectStatus = ref(false)
23. const statusClass = ref('disconnected')
25. function get_appropriate_ws_url(extra_url: string) {
26.     var pcol;
27.     // 获得页面上的url
28.     var u = document.URL;
30.     /*
31.      * We open the websocket encrypted if this page came on an
32.      * https:// url itself, otherwise unencrypted
33.      */
35.     // 去掉http://或者https://
36.     if (u.substring(0, 5) === "https") {
37.         pcol = "wss://";
38.         u = u.substr(8);
39.     } else {
40.         pcol = "ws://";
41.         if (u.substring(0, 4) === "http")
42.             u = u.substr(7);
43.     }
45.     /* + "/xxx" bit is for IE10 workaround */
47.     //回来的url就城了ws://地址或者wss://地址
48.     return pcol + u.split('/')[0] + "/" + extra_url;
49. }
52. // WebSocket配置（修改为你的服务器地址）
53. const wsUrl = get_appropriate_ws_url("")
55. const connectWebSocket = () => {
56.     if (isConnecting.value) return
58.     isConnecting.value = true
59.     connectionStatus.value = '连接中...'
60.     statusClass.value = 'connecting'
62.     ws.value = new WebSocket(wsUrl)
64.     ws.value.onopen = () => {
65.         connectionStatus.value = '已连接'
66.         statusClass.value = 'connected'
67.         isConnecting.value = false
68.         connectStatus.value = false
69.     }
71.     ws.value.onmessage = (event: any) => {
72.         console.log('收到数据')
74.     }
76.     ws.value.onerror = (error: any) => {
77.         console.error('WebSocket错误:', error)
78.         connectionStatus.value = '连接错误'
79.         statusClass.value = 'error'
80.         isConnecting.value = false
81.     }
83.     ws.value.onclose = () => {
84.         connectionStatus.value = '连接已关闭'
85.         statusClass.value = 'disconnected'
86.         isConnecting.value = false
87.         connectStatus.value = true
88.     }
89. }
92. // 组件挂载时自动连接
93. onMounted(() => {
94.     connectWebSocket()
95. })
97. // 组件卸载时关闭连接
98. onUnmounted(() => {
99.     if (ws.value) {
100.         ws.value.close()
101.     }
102. })
104. function reconnect() {
105.     if (ws.value) {
106.         ws.value.close()
107.     }
108.     connectWebSocket()
109. }
111. function closeConnect() {
112.     if (ws.value) {
113.         ws.value.close()
114.     }
115. }
117. </script>
119. <style scoped>
120. .websocket-page {
121.     padding: 20px;
122.     max-width: 800px;
123.     margin: 0 auto;
124. }
126. .status {
127.     margin: 20px 0;
128.     font-size: 18px;
129. }
131. .status span {
132.     font-weight: bold;
133. }
135. .connected {
136.     color: #4CAF50;
137. }
139. .connecting {
140.     color: #FFC107;
141. }
143. .disconnected {
144.     color: #F44336;
145. }
147. .error {
148.     color: #F44336;
149. }
151. button {
152.     padding: 10px 20px;
153.     background-color: #2196F3;
154.     color: white;
155.     border: none;
156.     border-radius: 4px;
157.     cursor: pointer;
158. }
160. button:disabled {
161.     background-color: #BBDEFB;
162.     cursor: not-allowed;
163. }
165. .messages {
166.     margin-top: 30px;
167.     border-top: 1px solid #eee;
168.     padding-top: 20px;
169.     background-size: 100% 100%;
170. }
172. ul {
173.     list-style-type: none;
174.     padding: 0;
175.     max-height: 300px;
176.     overflow-y: auto;
177.     border: 1px solid #ddd;
178.     padding: 10px;
179.     border-radius: 4px;
180. }
182. li {
183.     padding: 5px 0;
184.     border-bottom: 1px solid #eee;
185. }
187. .live-image {
188.     position: fixed;
189.     top: 50%;
190.     left: 50%;
191.     width: 100vw;
192.     /* 根据需要设置宽度 */
193.     height: 100vw;
195.     object-fit: cover;
196.     transform: translate(-50%, -50%);
197. }
199. #camImage,
200. #canvas {
201.     position: fixed;
202.     left: 0;
203.     top: 0;
204.     width: 100%;
205.     /* height: 100%; */
206.     z-index: -1;
207. }
209. /* 竖屏 */
210. @media screen and (orientation: portrait) {}
212. /* 横屏 */
213. @media screen and (orientation: landscape) {}
214. </style>

复制代码

编译打包上传部署

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

复制代码

测试

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

1. # /oem/usr/bin/ws_cam

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。