前言

隨著科技的不斷發(fā)展和人們對(duì)即時(shí)通訊需求的增加，使用 WebSocket 技術(shù)以實(shí)現(xiàn)即時(shí)通訊的需求越來越大。在本篇博客中，我們將介紹如何結(jié)合 Vue 和 Node.js 使用 WebSocket 實(shí)現(xiàn)即時(shí)通訊的功能。

什么是 WebSocket？

WebSocket 是一種在單個(gè) TCP 連接上進(jìn)行全雙工通信的協(xié)議。Websocket 的優(yōu)點(diǎn)在于：

• 可以與任何Web瀏覽器一起使用
• 傳遞二進(jìn)制數(shù)據(jù)支持 JSON，XML等格式
• 具有較低的延遲，從而可以實(shí)現(xiàn)更快的通信
• 在客戶端和服務(wù)器之間保持長時(shí)間的連接，從而可以減少 HTTP 請(qǐng)求的數(shù)量。

準(zhǔn)備工作

首先，我們需要安裝 Node.js 和 Vue。如果你已經(jīng)擁有這兩者中的一個(gè)或兩者都擁有，可以跳過這一步。

• 如果你沒有安裝 Node.js，請(qǐng)前往官網(wǎng)下載最新版本并完成安裝：https://nodejs.org/en/download
• 如果你沒有安裝 Vue，請(qǐng)使用下面的命令進(jìn)行安裝：

npm install -g @vue/cli

創(chuàng)建 Vue 的項(xiàng)目

創(chuàng)建 Vue 項(xiàng)目很簡單。在終端運(yùn)行以下命令：

vue create my-project

這會(huì)自動(dòng)為你創(chuàng)建一個(gè)基本的 Vue 項(xiàng)目。

啟動(dòng) Node.js 服務(wù)器

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 server.js 的文件，以便啟動(dòng) Node.js 服務(wù)器。使用以下命令來安裝所需的依賴項(xiàng)：

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);
? ? ? }
? ? });
? });
});

上述代碼啟動(dòng)了一個(gè)監(jiān)聽 8080 端口的 Express 服務(wù)器，使用 WebSocket 啟動(dòng)了消息推送功能。

要啟動(dòng) Node.js 服務(wù)器，請(qǐng)?jiān)诮K端運(yùn)行以下命令：

node server.js

在 Vue 中使用 WebSocket 實(shí)現(xiàn)通訊

在 Vue 項(xiàng)目的 src 文件夾中，創(chuàng)建一個(gè)名為 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 發(fā)送了一條消息，并在收到消息時(shí)更新了消息列表。我們還為用戶提供了一個(gè)輸入框和發(fā)送按鈕，以便輸入和發(fā)送新的消息。

總結(jié)

在本篇博客中，我們介紹了如何使用 Vue 和 WebSocket 實(shí)現(xiàn) Node.js 即時(shí)通訊。我們通過創(chuàng)建一個(gè) Express 服務(wù)器來使用 WebSocket 啟用了消息推送功能。在 Vue 中使用 WebSocket 實(shí)現(xiàn)通訊需要?jiǎng)?chuàng)建一個(gè)組件，同時(shí)可以使用 WebSocket 發(fā)送和接收消息。

到此這篇關(guān)于Vue+Node.js+WebSocket實(shí)現(xiàn)即時(shí)通訊的文章就介紹到這了,更多相關(guān)Vue Node WebSocket 即時(shí)通訊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論