websocket实现Vue 3和Node.js之间的实时消息推送
作者：牛掰666
使用 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 服务器广播给所有连接的客户端，实时更新消息列表。
通过这种方式，你可以实现一个简单的实时消息推送系统。当然，这只是一个基本的示例，实际应用中你可能需要处理更多的逻辑和安全问题。
到此这篇关于websocket实现Vue 3和Node.js之间的实时消息推送的文章就介绍到这了,更多相关Vue 3和Node.js的消息推送内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！