express-ws+vue3实现微信聊天代码

首先，您需要安装 `express-ws` 和 `vue3`。可以使用以下命令进行安装：

在服务器端（使用 Express.js）：

npm install express express-ws

在客户端（使用 Vue.js）：

npm install vue@next

接下来，您可以按照以下步骤实现微信聊天的代码：

1. 服务器端代码（Express.js + express-ws）：

// server.js

const express = require('express');
const expressWs = require('express-ws');
const app = express();
expressWs(app);

const clients = [];

app.ws('/chat', (ws, req) => {
  clients.push(ws);

  ws.on('message', (msg) => {
    // 广播收到的消息给所有客户端
    clients.forEach((client) => {
      client.send(msg);
    });
  });

  ws.on('close', () => {
    // 移除断开连接的客户端
    const index = clients.indexOf(ws);
    if (index !== -1) {
      clients.splice(index, 1);
    }
  });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

2. 客户端代码（Vue.js）：

<!-- App.vue -->

<template>
  <div>
    <h1>微信聊天</h1>
    <div class="chat-box">
      <div v-for="(message, index) in messages" :key="index" class="message">{{ message }}</div>
    </div>
    <input v-model="inputMessage" @keyup.enter="sendMessage" type="text" placeholder="输入消息" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'App',
  setup() {
    const inputMessage = ref('');
    const messages = ref([]);

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

    ws.onmessage = (event) => {
      // 接收到服务器发送的消息
      messages.value.push(event.data);
    };

    const sendMessage = () => {
      // 发送消息到服务器
      if (inputMessage.value.trim() !== '') {
        ws.send(inputMessage.value);
        inputMessage.value = '';
      }
    };

    return {
      inputMessage,
      messages,
      sendMessage,
    };
  },
};
</script>

<style>
.message {
  margin-bottom: 10px;
}
</style>

3. 在一个新的文件中，创建一个 Vue 实例并将其挂载到页面上：

// main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

在完成上述步骤后，您可以运行服务器端代码（`node server.js`），然后在浏览器中访问客户端代码，即可实现微信聊天功能。请确保服务器和客户端代码在同一台机器上运行，并且端口号（3000）没有被占用。

当有客户端发送消息时，服务器将广播该消息给所有连接的客户端，从而实现聊天功能。