vue3+vite项目中实现websoket 通知

在Vue3 + Vite项目中使用WebSocket实现通知需要进行以下步骤：

1. 安装WebSocket依赖库

在项目中安装WebSocket依赖库，可以使用npm或yarn命令进行安装：

npm install --save ws

2. 在Vue3组件中创建WebSocket实例

在Vue3组件中创建WebSocket实例，可以使用`created`或者`mounted`钩子函数。例如：

import { reactive } from 'vue';
import WebSocket from 'ws';

export default {
  name: 'WebSocketDemo',
  setup() {
    const state = reactive({
      messages: []
    });

    const ws = new WebSocket('ws://localhost:3000');

    ws.onopen = () => {
      console.log('WebSocket opened');
    };

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

    ws.onclose = () => {
      console.log('WebSocket closed');
    };

    return {
      state,
      ws
    };
  }
};

在示例中，我们使用`reactive`创建了一个响应式的状态对象`state`，其中包含一个`messages`数组用于存储WebSocket接收到的消息。然后我们使用`new WebSocket()`创建了一个WebSocket实例，并设置了`onopen`、`onmessage`、`onclose`等事件回调函数。当WebSocket连接成功打开时，`onopen`事件会被触发，我们在事件回调函数中输出`WebSocket opened`日志；当WebSocket接收到消息时，`onmessage`事件会被触发，我们将接收到的消息存储到`state.messages`数组中；当WebSocket连接关闭时，`onclose`事件会被触发，我们在事件回调函数中输出`WebSocket closed`日志。最后，我们将`state`和`ws`对象返回给组件模板使用。

3. 在Vue3组件中使用WebSocket接收消息

在Vue3组件模板中使用`v-for`指令循环渲染`state.messages`数组中的消息，例如：

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

在示例中，我们使用`v-for`指令循环渲染`state.messages`数组中的每一条消息，通过`:key`指令设置每一条消息的唯一标识符。当WebSocket接收到新的消息时，这些消息会自动更新到模板中。

4. 在Vite配置文件中添加WebSocket代理

由于Vite使用的是开发服务器，需要在Vite配置文件中添加WebSocket代理，将WebSocket请求转发到后端服务。例如：

export default {
  server: {
    proxy: {
      '/ws': {
        target: 'ws://localhost:3000',
        changeOrigin: true,
        ws: true
      }
    }
  }
};

在示例中，我们使用`proxy`字段设置WebSocket代理，将请求路径`/ws`转发到后端服务`ws://localhost:3000`。同时设置`changeOrigin`为`true`表示跨域请求，`ws`为`true`表示使用WebSocket代理。

通过以上步骤，我们就可以在Vue3 + Vite项目中使用WebSocket实现通知功能了。