vue websoket 通知

Vue.js 是一个流行的前端框架，WebSocket 是一种支持双向通信的协议，可以用于实现实时通知功能。下面是一个使用 WebSocket 实现通知功能的 Vue.js 示例：

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

<template>
  <div>
    <ul>
      <li v-for="message in messages">{{ message }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      messages: []
    };
  },
  mounted() {
    this.socket = new WebSocket("ws://localhost:8080/notification");
    this.socket.onmessage = event => {
      this.messages.push(event.data);
    };
  },
  beforeDestroy() {
    this.socket.close();
  }
};
</script>

2. 在服务器端实现 WebSocket 服务器：

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

wss.on("connection", function connection(ws) {
  console.log("connected");
  ws.on("message", function incoming(message) {
    console.log("received: %s", message);
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

这个服务器会监听在端口 8080，当有客户端连接时，会发送一条消息给所有已连接的客户端。

以上是一个简单的使用 WebSocket 实现通知功能的 Vue.js 示例，你可以根据自己的需求进行修改和扩展。