vue3+vite项目中实现websoket 通知完整例子

好的，以下是一个基于 Vue3 和 Vite 的 WebSocket 示例：

1. 安装 `ws` 库：

npm install ws

2. 在 Vue3 组件中引入 `ws` 库，并建立 WebSocket 连接：

<template>
  <div>
    <h2>WebSocket Example</h2>
    <div v-for="msg in messages" :key="msg">{{ msg }}</div>
  </div>
</template>

<script>
import WebSocket from 'ws';

export default {
  name: 'WebSocketExample',
  data() {
    return {
      messages: [],
      ws: null
    }
  },
  mounted() {
    this.ws = new WebSocket('ws://localhost:3000');

    this.ws.onopen = () => {
      console.log('WebSocket connection established');
    }

    this.ws.onmessage = (event) => {
      this.messages.push(event.data);
    }

    this.ws.onerror = (error) => {
      console.error(`WebSocket error: ${error}`);
    }

    this.ws.onclose = () => {
      console.log('WebSocket connection closed');
    }
  },
  beforeUnmount() {
    if (this.ws) {
      this.ws.close();
    }
  }
}
</script>

3. 启动 WebSocket 服务器。这里我们使用 Node.js 和 `ws` 库来创建一个简单的 WebSocket 服务器：

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
  console.log('WebSocket connection established');

  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
  });

  ws.send('Hello, WebSocket client!');
});

4. 运行 Vue3 项目和 WebSocket 服务器：

npm run dev
node server.js

5. 在浏览器中访问 Vue3 项目，即可看到 WebSocket 服务器发送的消息。

以上就是一个简单的 Vue3+Vite+WebSocket 示例，希望能对你有所帮助。