实现一个实时聊天应用：用 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 }}
      </div>
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      messages: [],
      newMessage: '',
      user: this.$route.params.username,
    };
  },
  mounted() {
    this.socket = new WebSocket('ws://localhost:8080');
    this.socket.onmessage = this.onMessage;
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        const message = {
          user: this.user,
          text: this.newMessage,
        };
        this.socket.send(JSON.stringify(message));
        this.newMessage = '';
      }
    },
    onMessage(event) {
      const message = JSON.parse(event.data);
      this.messages.push(message);
      this.$nextTick(() => {
        const container = this.$refs.messageContainer;
        container.scrollTop = container.scrollHeight;
      });
    },
  },
};
</script>

<style scoped>
.chat-room {
  width: 400px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  height: 500px;
  display: flex;
  flex-direction: column;
}
.messages {
  flex: 1;
  overflow-y: auto;
}
.message {
  margin: 10px 0;
}
input {
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 10px;
}
</style>

4.3.2 UserList.vue

用户列表组件显示所有在线用户。每当用户加入或退出时，我们更新用户列表：

<template>
  <div class="user-list">
    <h3>Online Users</h3>
    <ul>
      <li v-for="user in users" :key="user">{{ user }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      users: [],
    };
  },
  mounted() {
    this.socket = new WebSocket('ws://localhost:8080');
    this.socket.onmessage = this.onMessage;
  },
  methods: {
    onMessage(event) {
      const message = JSON.parse(event.data);
      // 处理用户加入/离开逻辑
      if (message.type === 'user-list') {
        this.users = message.users;
      }
    },
  },
};
</script>

<style scoped>
.user-list {
  width: 200px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  height: 500px;
  overflow-y: auto;
}
</style>

4.3.3 Login.vue

用户登录时选择昵称，并跳转到聊天房间：

<template>
  <div class="login">
    <input v-model="username" placeholder="Enter your username" />
    <button @click="enterRoom">Enter Room</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
  methods: {
    enterRoom() {
      if (this.username.trim()) {
        this.$router.push({ name: 'chat', params: { username: this.username } });
      }
    },
  },
};
</script>

<style scoped>
.login {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
}
input {
  padding: 10px;
  width: 100%;
  margin-bottom: 10px;
}
button {
  padding: 10px;
  width: 100%;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

4.4 设置路由

我们需要设置 Vue Router 来管理不同的页面（登录页面和聊天页面）：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Login from '../components/Login.vue';
import ChatRoom from '../components/ChatRoom.vue';

const routes = [
  { path: '/', component: Login },
  { path: '/chat/:username', name: 'chat', component: ChatRoom },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

4.5 启动应用

在项目根目录下，启动前端和后端：

# 启动 WebSocket 服务器
node server.js

# 启动 Vue 项目
npm run serve

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕