websocket+vue实时推送数据代码

以下是一个基于 WebSocket 和 Vue 实现实时推送数据的代码示例：

1. 后端代码

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');
  
  ws.on('message', (message) => {
    console.log(`Received message => ${message}`);
  });
  
  setInterval(() => {
    ws.send(`${new Date()}`);
  }, 1000);
});

2. 前端代码

<template>
  <div>
    <h1>Real-time data:</h1>
    <ul>
      <li v-for="(data, index) in dataList" :key="index">{{ data }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    }
  },
  created() {
    const ws = new WebSocket('ws://localhost:8080');
    ws.onmessage = (event) => {
      this.dataList.push(event.data);
    };
  }
}
</script>

在这个示例中，我们首先创建了一个 WebSocket 服务器，并在连接时打印出“Client connected”消息。每秒钟，服务器会向客户端发送当前时间。

在前端，我们通过 Vue 的 created 生命周期创建了一个 WebSocket 连接，并在每次接收到服务器发来的消息时将其添加到一个数据列表中，然后在模板中通过 v-for 渲染出来。