Vue+Node.js+WebSocket实现即时通讯
作者：BUG高级开发工程师
前言
随着科技的不断发展和人们对即时通讯需求的增加，使用 WebSocket 技术以实现即时通讯的需求越来越大。在本篇博客中，我们将介绍如何结合 Vue 和 Node.js 使用 WebSocket 实现即时通讯的功能。
什么是 WebSocket？
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。Websocket 的优点在于：
- 可以与任何Web浏览器一起使用
- 传递二进制数据支持 JSON，XML等格式
- 具有较低的延迟，从而可以实现更快的通信
- 在客户端和服务器之间保持长时间的连接，从而可以减少 HTTP 请求的数量。
准备工作
首先，我们需要安装 Node.js 和 Vue。如果你已经拥有这两者中的一个或两者都拥有，可以跳过这一步。
- 如果你没有安装 Node.js，请前往官网下载最新版本并完成安装：https://nodejs.org/en/download
- 如果你没有安装 Vue，请使用下面的命令进行安装：
npm install -g @vue/cli
创建 Vue 的项目
创建 Vue 项目很简单。在终端运行以下命令：
vue create my-project
这会自动为你创建一个基本的 Vue 项目。
启动 Node.js 服务器
在项目根目录下创建一个名为 server.js 的文件，以便启动 Node.js 服务器。使用以下命令来安装所需的依赖项：
npm install ws express cors
在 server.js 文件中输入以下代码：
const WebSocket = require('ws');
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
const server = app.listen(8080, () => {
console.log('Server started on port 8080');
});
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
console.log(`Received message => ${message}`);
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});上述代码启动了一个监听 8080 端口的 Express 服务器，使用 WebSocket 启动了消息推送功能。
要启动 Node.js 服务器，请在终端运行以下命令：
node server.js
在 Vue 中使用 WebSocket 实现通讯
在 Vue 项目的 src 文件夹中，创建一个名为 Message.vue 的组件。此组件将用于处理 WebSocket 消息：
<template>
<div>
<h2>Messages</h2>
<ul>
<li v-for="message in messages" :key="message.id">
{{ message.text }}
</li>
</ul>
<hr>
<input type="text" v-model="inputMessage">
<button @click="sendMessage()">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
messages: [],
inputMessage: '',
};
},
mounted() {
this.websocket = new WebSocket('ws://localhost:8080');
this.websocket.onmessage = this.handleMessage;
},
methods: {
handleMessage(event) {
const message = JSON.parse(event.data);
this.messages.push(message);
},
sendMessage() {
const message = {
id: Date.now(),
text: this.inputMessage,
};
this.websocket.send(JSON.stringify(message));
this.inputMessage = '';
},
},
};
</script>在 Message.vue 组件中，我们向 WebSocket 发送了一条消息，并在收到消息时更新了消息列表。我们还为用户提供了一个输入框和发送按钮，以便输入和发送新的消息。
总结
在本篇博客中，我们介绍了如何使用 Vue 和 WebSocket 实现 Node.js 即时通讯。我们通过创建一个 Express 服务器来使用 WebSocket 启用了消息推送功能。在 Vue 中使用 WebSocket 实现通讯需要创建一个组件，同时可以使用 WebSocket 发送和接收消息。
到此这篇关于Vue+Node.js+WebSocket实现即时通讯的文章就介绍到这了,更多相关Vue Node WebSocket 即时通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！