用vue3+vite搭建 WebSocket 服务器，具体详细怎么搭建

首先，需要明确一点：Vue是前端框架，不涉及后端服务。所以，我们需要用Node.js来搭建WebSocket服务器，并使用Vue3作为前端进行连接。

以下是具体步骤：

步骤1：创建一个空的Vue3项目

使用Vue CLI可以很方便地创建一个Vue3项目。在终端中输入以下命令：

vue create my-project

然后按照提示选择需要的配置即可。

步骤2：安装WebSocket库

在终端中输入以下命令：

npm install websocket --save

这里我们使用了websocket库来创建WebSocket服务器。

步骤3：创建WebSocket服务器

在Vue3项目的根目录下，创建一个名为server.js的文件。在该文件中，我们可以使用如下代码创建WebSocket服务器：

const WebSocket = require('ws');

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

server.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('Connection established!');
});

这里我们使用了Node.js的WebSocket模块来创建WebSocket服务器，监听了3000端口。当有新的客户端连接到服务器时，将会打印出"Connection established!"的消息。

步骤4：启动WebSocket服务器

在终端中进入Vue3项目的根目录，输入以下命令启动WebSocket服务器：

node server.js

步骤5：连接WebSocket服务器

在Vue3项目中，可以使用WebSocket对象来连接到WebSocket服务器。在Vue3的组件中添加以下代码：

<script>
export default {
  data() {
    return {
      ws: null,
      message: '',
    };
  },
  mounted() {
    this.ws = new WebSocket('ws://localhost:3000');

    this.ws.onmessage = (event) => {
      this.message = event.data;
    };
  },
  methods: {
    sendMessage() {
      this.ws.send(this.message);
      this.message = '';
    },
  },
};
</script>

这里我们使用了Vue3的data属性来存储WebSocket对象和消息。在mounted生命周期钩子中创建WebSocket连接，当有消息到达时将其保存到data中的message属性。在methods中编写sendMessage方法来发送消息。

至此，我们已经成功地使用Vue3和Node.js创建了一个WebSocket服务器，并且可以在Vue3中连接到该服务器进行通信。