实现一个实时聊天应用：用 Vue 3 和 WebSocket 构建多人在线聊天系统

一、前言

随着即时通讯应用的普及，构建一个实时聊天应用成为了许多开发者的常见需求。在本篇文章中，我们将使用 Vue 3 和 WebSocket 来实现一个多人在线聊天系统，支持实时消息发送与接收。

二、技术选型

• Vue 3：现代化的前端框架，适合构建响应式和组件化的界面。
• WebSocket：一种在客户端与服务器之间进行双向通信的协议，适用于实时数据传输。
• Node.js：服务器端运行环境，用于处理 WebSocket 连接。

三、功能需求

我们要实现的聊天系统具备以下功能：

• 实时消息发送与接收：用户可以发送消息并实时接收到其他用户发送的消息。
• 在线用户列表：显示当前在线的用户。
• 多房间支持：支持用户在不同的聊天房间之间切换。
• 用户身份管理：用户可以选择昵称，并进入聊天室。

四、实现步骤

4.1 设置 Vue 3 项目

首先，创建一个新的 Vue 3 项目：

vue create websocket-chat

安装所需的依赖包：

npm install vue-router

4.2 创建 WebSocket 服务器

我们将使用 Node.js 来搭建一个 WebSocket 服务器。首先，安装 ws 库：

npm install ws

然后，创建 WebSocket 服务器：

// server.js
const WebSocket = require('ws');

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

wss.on('connection', ws => {
   
   
  ws.on('message', message => {
   
   
    // 广播消息给所有客户端
    wss.clients.forEach(client => {
   
   
      if (client !== ws && client.readyState === WebSocket.OPEN) {
   
   
        client.send(message);
      }
    });
  });
});

4.3 创建 Vue 组件

我们需要几个主要的组件：

1. ChatRoom.vue：聊天房间组件，显示消息并发送消息。
2. UserList.vue：用户列表组件，显示在线用户。
3. Login.vue：登录组件，用户选择昵称进入聊天室。

4.3.1 ChatRoom.vue

在 ChatRoom.vue 中，我们将与 WebSocket 进行通信，接收和发送消息：

<template>
  <div class="chat-room">
    <div class="messages" ref="messageContainer">
      <div v-for="(message, index) in messages" :key="index" class="message">
        <strong>{
   
   {
   
    message.user }}:</strong> {
   
   {
   
    message.text }}
      </</