利用WebSocket 获取实时数据

回车发送数据，模仿服务器发送数据
效果图：

源码：

2. <template>
3.     <div>
4.       <h1>WebSocket 实时数据</h1>
5.       <input type="text" v-model="ipt" @keyup.enter="sendMessage(ipt)">
6.       <div v-if="message">
7.         <h3>接收到的数据：</h3>
8.         <pre>{{ message }}</pre>
9.       </div>
10.       <div v-else>
11.         <p>等待 WebSocket 消息...</p>
12.       </div>
13.     </div>
14.   </template>
15.   
16.   <script>
17.   export default {
18.     data() {
19.       return {
20.         ipt:'',
21.         ws: null,  // WebSocket 实例
22.         message: null,  // 接收到的消息
23.         isConnected: false,  // 是否已连接
24.       };
25.     },
26.     methods: {
27.       // 初始化 WebSocket 连接
28.       initWebSocket() {
29.         const wsUrl = 'ws://124.222.224.186:8800'; // WebSocket 服务器 URL
30.         this.ws = new WebSocket(wsUrl);
31.   
32.         // 连接打开时的回调
33.         this.ws.onopen = () => {
34.           console.log('WebSocket 已连接');
35.           this.isConnected = true;
36.         };
37.   
38.         // 接收到消息时的回调
39.         this.ws.onmessage = (event) => {
40.           console.log('收到消息:', event.data);
41.           this.message = event.data.slice(19);  // 更新接收到的消息
42.         };
43.   
44.         // 连接关闭时的回调
45.         this.ws.onclose = () => {
46.           console.log('WebSocket 连接关闭');
47.           this.isConnected = false;
48.         };
49.   
50.         // 连接错误时的回调
51.         this.ws.onerror = (error) => {
52.           console.error('WebSocket 错误:', error);
53.         };
54.       },
55.   
56.       // 发送消息到 WebSocket 服务器
57.       sendMessage(message) {
58.         if (this.ws && this.ws.readyState === WebSocket.OPEN) {
59.           this.ws.send(message);
60.           console.log('发送消息:', message);
61.         } else {
62.           console.log('WebSocket 连接未开启');
63.         }
64.       },
65.     },
66.   
67.     // Vue 生命周期钩子
68.     mounted() {
69.       // 组件挂载时初始化 WebSocket 连接
70.       this.initWebSocket();
71.     },
72.   
73.     beforeDestroy() {
74.       // 在组件销毁之前，关闭 WebSocket 连接
75.       if (this.ws) {
76.         this.ws.close();
77.         console.log('WebSocket 连接已关闭');
78.       }
79.     },
80.   };
81.   </script>
82.   
83.   <style scoped>
84.   h1 {
85.     color: #333;
86.   }
87.   pre {
88.     background-color: #f4f4f4;
89.     padding: 10px;
90.     border-radius: 5px;
91.   }
92.   </style>

复制代码