vue项目接收websocket通信数据

在Vue.js项目中接收WebSocket数据通常需要使用WebSocket API来实现。以下是一个简单的示例：

1. 首先，在Vue.js组件中创建WebSocket连接：

   export default {
     data() {
       return {
         socket: null,
         messages: []
       };
     },
     created() {
       this.socket = new WebSocket('ws://your-websocket-url'); // 替换为实际的WebSocket服务器URL
   
       this.socket.onopen = () => {
         console.log('WebSocket connected');
       };
   
       this.socket.onmessage = (event) => {
         this.messages.push(event.data);
       };
   
       this.socket.onclose = () => {
         console.log('WebSocket closed');
       };
     },
     beforeDestroy() {
       this.socket.close();
     }
   };

export default { data() { return { socket: null, messages: [] }; }, created() { this.socket = new WebSocket('ws://your-websocket-url'); // 替换为实际的WebSocket服务器URL this.socket.onopen = () => { console.log('WebSocket connected'); }; this.socket.onmessage = (event) => { this.messages.push(event.data); }; this.socket.onclose = () => { console.log('WebSocket closed'); }; }, beforeDestroy() { this.socket.close(); } };

1. 在模板中显示接收到的数据：

   <template>
     <div>
       <ul>
         <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
       </ul>
     </div>
   </template>

<template> <div> <ul> <li v-for="(message, index) in messages" :key="index">{{ message }}</li> </ul> </div> </template>

在上述示例中，创建了一个WebSocket连接，并在接收到消息时将消息添加到messages数组中，然后在模板中通过v-for指令循环显示收到的消息。

请注意，需要将ws://your-websocket-url替换为实际的WebSocket服务器URL。另外，为了避免内存泄漏，建议在组件销毁前关闭WebSocket连接。

运行项目，接收到的数据会展现在当前页面上