Vue+Node.js+WebSocket實現(xiàn)即時通訊

更新時間：2023年05月22日 09:28:35 作者：BUG高級開發(fā)工程師

本文主要介紹了Vue+Node.js+WebSocket實現(xiàn)即時通訊，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

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

什么是 WebSocket？

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

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

準備工作

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

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

npm install -g @vue/cli

創(chuàng)建 Vue 的項目

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

vue create my-project

這會自動為你創(chuàng)建一個基本的 Vue 項目。

啟動 Node.js 服務器

在項目根目錄下創(chuàng)建一個名為 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);
? ? ? }
? ? });
? });
});

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

要啟動 Node.js 服務器，請在終端運行以下命令：

node server.js

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

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

總結

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

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

您可能感興趣的文章: