实现一个实时聊天应用：用 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

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