使用 WebSocket 实现实时消息推送是一种高效的方式,可以在客户端和服务器之间建立长连接,实现低延迟的双向通信。以下是一个简单的示例,展示如何在前端使用 Vue 3 和后端使用 Node.js 搭建一个 WebSocket 实现实时消息推送的应用。
前端(Vue 3)
1. 创建 Vue 项目
首先,创建一个新的 Vue 3 项目。如果你还没有安装 Vue CLI,可以通过以下命令安装:
npm install -g @vue/cli
创建一个新的 Vue 项目:
vue create websocket-demo
cd websocket-demo
2. 安装 WebSocket 客户端库
在 Vue 项目中,可以使用原生 WebSocket API,也可以使用第三方库。这里我们使用原生 WebSocket API。
3. 实现 WebSocket 客户端
在 src
目录下的 App.vue
文件中,添加以下代码:
<template>
<div id="app">
<h1>WebSocket Demo</h1>
<input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message" />
<button @click="sendMessage">Send</button>
<ul>
<li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
ws: null,
message: '',
messages: []
};
},
mounted() {
this.connectWebSocket();
},
methods: {
connectWebSocket() {
this.ws = new WebSocket('ws://localhost:3000');
this.ws.onmessage = (event) => {
this.messages.push(event.data);
};
this.ws.onopen = () => {
console.log('Connected to WebSocket server');
};
this.ws.onclose = () => {
console.log('Disconnected from WebSocket server');
};
},
sendMessage() {
if (this.message !== '') {
this.ws.send(this.message);
this.message = '';
}
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
margin-top: 60px;
}
</style>
后端(Node.js)
1. 创建 Node.js 项目
创建一个新的目录并初始化一个 Node.js 项目:
mkdir websocket-server
cd websocket-server
npm init -y
2. 安装 WebSocket 库
安装 ws
库,这是一个简单且强大的 WebSocket 库:
npm install ws
3. 实现 WebSocket 服务器
在项目根目录下创建一个 server.js
文件,添加以下代码:
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', (ws) => {
console.log('Client connected');
ws.on('message', (message) => {
console.log(`Received message: ${message}`);
// Broadcast the message to all clients
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on ws://localhost:3000');
运行项目
1. 启动 WebSocket 服务器
在 websocket-server
目录下,运行以下命令启动 WebSocket 服务器:
node server.js
2. 启动 Vue 项目
在 websocket-demo
目录下,运行以下命令启动 Vue 项目:
npm run serve
结果
打开浏览器,访问 http://localhost:8080
,你应该会看到一个简单的 WebSocket 演示应用。你可以在输入框中输入消息并发送,消息会通过 WebSocket 服务器广播给所有连接的客户端,实时更新消息列表。
通过这种方式,你可以实现一个简单的实时消息推送系统。当然,这只是一个基本的示例,实际应用中你可能需要处理更多的逻辑和安全问题。