前言
随着科技的不断发展和人们对即时通讯需求的增加，使用 WebSocket 技术以实现即时通讯的需求越来越大。在本篇博客中，我们将介绍如何结合 Vue 和 Node.js 使用 WebSocket 实现即时通讯的功能。
什么是 WebSocket？
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。Websocket 的优点在于：
- 可以与任何Web浏览器一起使用
- 传递二进制数据支持 JSON，XML等格式
- 具有较低的延迟，从而可以实现更快的通信
- 在客户端和服务器之间保持长时间的连接，从而可以减少 HTTP 请求的数量。
准备工作
首先，我们需要安装 Node.js 和 Vue。如果你已经拥有这两者中的一个或两者都拥有，可以跳过这一步。
- 如果你没有安装 Node.js，请前往官网下载最新版本并完成安装：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 发送和接收消息。希望这篇教程对你有所帮助！
