使用Vue 3创建实时聊天应用，使用WebSocket
在这篇博客中，我们将创建一个简单的实时聊天应用，使用 Vue 3 的 setup 语法糖以及 WebSocket 技术。通过这个示例，您可以更好地理解 Vue 3 的新特性以及 WebSocket 的基本用法。
概述
我们的应用将允许用户输入消息，并通过 WebSocket 将消息发送到服务器，服务器则会广播收到的消息给所有连接的客户端。我们将集中精力实现以下功能：
- 连接到 WebSocket 服务器
- 发送聊天消息
- 接收并显示来自其他用户的消息
创建 Vue 3 项目
首先，您需要在本地创建一个 Vue 3 项目。可以使用 Vue CLI 来快速开始：
npm install -g @vue/cli
vue create chat-app
cd chat-app
在项目中安装所需的依赖：
npm install
创建 WebSocket 服务器（可选）
为了测试我们的应用，您可能需要一个 WebSocket 服务器。我们可以使用以下简单的 Node.js 服务器来处理 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.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
console.log('WebSocket server is running on ws://localhost:8080');
运行这个服务器：
node server.js
实现 Vue 3 客户端
接下来，我们来实现 Vue 3 客户端。这是我们的主要 Vue 组件：
<template>
<div class="chat-app">
<h1>实时聊天应用</h1>
<div class="messages">
<div v-for="(msg, index) in messages" :key="index">{{ msg }}</div>
</div>
<input v-model="message" @keyup.enter="sendMessage" placeholder="输入消息并按 Enter 发送" />
</div>
</template>
<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
export default {
setup() {
const messages = ref([]);
const message = ref('');
let ws;
const connectWebSocket = () => {
ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (event) => {
messages.value.push(event.data);
};
ws.onopen = () => {
console.log('WebSocket connection established');
};
ws.onclose = () => {
console.log('WebSocket connection closed');
};
};
const sendMessage = () => {
if (message.value.trim()) {
ws.send(message.value);
message.value = '';
}
};
onMounted(() => {
connectWebSocket();
});
onBeforeUnmount(() => {
ws.close();
});
return {
messages,
message,
sendMessage,
};
},
};
</script>
<style scoped>
.chat-app {
width: 400px;
margin: auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
.messages {
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 10px;
}
</style>
总结
您现在已经成功创建了一个基于 Vue 3 和 WebSocket 的实时聊天应用。从用户界面到消息的发送和接收，所有部分都是实时的。您可以根据需要添加更多的功能，比如用户身份识别、消息时间戳、使用 Vuex 管理状态。
通过本教程，您掌握了Vue 3 和 WebSocket 的基本结合使用方式，期待您能在此基础上实现更加复杂的实时应用功能。