输出:

  1. 客户端日志
   Connected to WebSocket server   Message from server: Hello, you sent -> Hello from client
  1. 服务器日志
   Client connected   Received: Hello from client

Socket.IO:简化的 WebSocket

虽然 WebSocket 功能强大,但它们需要一些手动工作来处理重新连接、广播和管理后备(例如长轮询)等事件。 Socket.IO 通过提供以下功能简化了实时通信:

第1步:安装Socket.IO

npm install socket.io

第2步:创建Socket.IO服务器

const http = require(\\'http\\');const socketio = require(\\'socket.io\\');// Create an HTTP serverconst server = http.createServer();const io = socketio(server);io.on(\\'connection\\', (socket) => {    console.log(\\'Client connected\\');    // Listen for messages from the client    socket.on(\\'message\\', (msg) => {        console.log(\\'Received message:\\', msg);        socket.emit(\\'message\\', `Server received: ${msg}`);    });    // On client disconnect    socket.on(\\'disconnect\\', () => {        console.log(\\'Client disconnected\\');    });});server.listen(3000, () => {    console.log(\\'Socket.IO server running on http://localhost:3000\\');});

这里:

第3步:创建Socket.IO客户端

            Socket.IO Client    

Socket.IO Example

在此示例中,Socket.IO 客户端自动处理与服务器的连接并允许双向通信。

输出:

  1. 客户端日志
   Connected to server   Message from server: Server received: Hello from client
  1. 服务器日志
   Client connected   Received message: Hello from client

WebSocket 和 Socket.IO 的用例

4.1 实时聊天应用

问题:消息平台需要实现用户之间的实时通信。

解决方案:WebSockets(或Socket.IO)提供事件驱动的持久连接,允许用户无延迟地实时发送和接收消息。

4.2 实时协作文档编辑

问题:协作处理文档的用户需要立即查看其他人所做的更改。

解决方案:通过使用 WebSocket,更改会实时推送到所有客户端,确保文档在所有用户之间保持同步。

4.3 Web 应用程序中的通知

问题:Web 应用程序需要通知用户新消息、更新或警报等事件。

解决方案:WebSockets允许服务器在事件发生时立即向客户端推送通知,提高用户参与度。

扩展 WebSocket 和 Socket.IO

扩展 WebSocket 和 Socket.IO 具有挑战性,因为它们具有持久性。每个 WebSocket 连接都是一个长期存在的 TCP 连接,随着连接数量的增加,它可能会变得资源密集型。

常见的扩展策略:

  1. 水平扩展:跨多个服务器负载平衡 WebSocket 流量。
  2. 粘性会话:确保来自客户端的所有 WebSocket 连接都路由到同一服务器。
  3. Redis for Pub/Sub:使用Redis进行跨服务器的事件发布和订阅,确保所有客户端都能收到实时更新。
npm install socket.io-redis

下面是配置 Socket.IO 使用 Redis 的示例:

const io = require(\\'socket.io\\')(server);const redisAdapter = require(\\'socket.io-redis\\');io.adapter(redisAdapter({ host: \\'localhost\\', port: 6379 }));

结论

WebSockets 和 Socket.IO 是现代 Web 应用程序中实时通信的基本技术。虽然 WebSocket 为全双工通信提供了低级协议,但 Socket.IO 简化了实现,提供了自动重新连接和广播等附加功能。这两种技术在现实世界中都有重要的应用,从聊天应用程序到协作工具。

在下一篇文章中,我们将深入研究 Node.js Streams 并探索它们如何有效地处理大数据,重点关注可扩展性和性能。

","image":"http://www.luping.net/uploads/20241017/17291584876710dd57bf9e9.jpg","datePublished":"2024-11-08T14:10:25+08:00","dateModified":"2024-11-08T14:10:25+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > Node.js 中與 WebSockets 和 Socket.IO 的即時通信

Node.js 中與 WebSockets 和 Socket.IO 的即時通信

發佈於2024-11-08
瀏覽:533

Real-time communication with WebSockets and Socket.IO in Node.js

现代 Web 应用程序通常需要实时通信,无论是聊天系统、实时更新、协作编辑还是通知。传统的 HTTP 通信不足以满足实时应用程序的需要,因为它依赖于请求-响应模式。这就是 WebSockets 发挥作用的地方,它允许服务器和客户端之间进行全双工通信。

在本文中,我们将探讨:

  1. WebSocket 是什么,以及为什么它们对于实时应用程序至关重要。
  2. 如何在 Node.js 中实现 WebSocket。
  3. 使用 Socket.IO 简化 WebSocket 实现。
  4. 实际用例示例。

什么是 WebSocket?

WebSockets 是一种通过单个 TCP 连接提供全双工通信通道的协议。与传统的 HTTP 请求不同,传统的 HTTP 请求基于请求-响应并且在不断建立新连接方面存在开销,WebSocket 允许持久通信。

主要特点:

  • 全双工通信:客户端和服务器端都可以随时发送消息,无需互相等待。
  • 更低延迟:WebSocket 无需不断打开和关闭连接,从而减少延迟并提高实时应用程序的性能。
  • 事件驱动:双方都可以推送数据,非常适合聊天、游戏或实时通知等动态应用。

在 Node.js 中实现 WebSocket

第1步:安装ws WebSocket库

在 Node.js 中,WebSocket 不是内置的,因此我们需要一个库。 Node.js 最流行的 WebSocket 库之一是 ws.

npm install ws

第 2 步:创建 WebSocket 服务器

这是一个使用 ws 库的简单 WebSocket 服务器:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Client connected');

    // Listen for messages from the client
    ws.on('message', (message) => {
        console.log('Received:', message);
        // Respond to the client
        ws.send(`Hello, you sent -> ${message}`);
    });

    // On client disconnect
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server running on ws://localhost:8080');

在此示例中:

  • 我们在端口 8080 上创建一个 WebSocket 服务器。
  • 当客户端连接时,连接事件触发。
  • 服务器侦听来自客户端的消息并用确认消息进行响应。
  • 如果客户端断开连接,我们会记录一条消息。

第 3 步:创建 WebSocket 客户端

您可以在浏览器中使用 JavaScript 创建 WebSocket 客户端:



    WebSocket Client

WebSocket Example

  • 当 WebSocket 连接打开时,客户端会记录一条成功消息。
  • 单击按钮时会向服务器发送一条消息,并显示服务器的响应。

输出:

  1. 客户端日志
   Connected to WebSocket server
   Message from server: Hello, you sent -> Hello from client
  1. 服务器日志
   Client connected
   Received: Hello from client

Socket.IO:简化的 WebSocket

虽然 WebSocket 功能强大,但它们需要一些手动工作来处理重新连接、广播和管理后备(例如长轮询)等事件。 Socket.IO 通过提供以下功能简化了实时通信:

  • 自动重连。
  • 向多个客户端广播事件。
  • 如果不支持 WebSockets,则退回到轮询。

第1步:安装Socket.IO

npm install socket.io

第2步:创建Socket.IO服务器

const http = require('http');
const socketio = require('socket.io');

// Create an HTTP server
const server = http.createServer();
const io = socketio(server);

io.on('connection', (socket) => {
    console.log('Client connected');

    // Listen for messages from the client
    socket.on('message', (msg) => {
        console.log('Received message:', msg);
        socket.emit('message', `Server received: ${msg}`);
    });

    // On client disconnect
    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Socket.IO server running on http://localhost:3000');
});

这里:

  • 我们使用 Socket.IO 创建一个服务器来侦听连接和传入消息。
  • socket.emit 用于将消息发送回客户端。

第3步:创建Socket.IO客户端



    Socket.IO Client

Socket.IO Example

在此示例中,Socket.IO 客户端自动处理与服务器的连接并允许双向通信。

输出:

  1. 客户端日志
   Connected to server
   Message from server: Server received: Hello from client
  1. 服务器日志
   Client connected
   Received message: Hello from client

WebSocket 和 Socket.IO 的用例

4.1 实时聊天应用

问题:消息平台需要实现用户之间的实时通信。

解决方案:WebSockets(或Socket.IO)提供事件驱动的持久连接,允许用户无延迟地实时发送和接收消息。

4.2 实时协作文档编辑

问题:协作处理文档的用户需要立即查看其他人所做的更改。

解决方案:通过使用 WebSocket,更改会实时推送到所有客户端,确保文档在所有用户之间保持同步。

4.3 Web 应用程序中的通知

问题:Web 应用程序需要通知用户新消息、更新或警报等事件。

解决方案:WebSockets允许服务器在事件发生时立即向客户端推送通知,提高用户参与度。

扩展 WebSocket 和 Socket.IO

扩展 WebSocket 和 Socket.IO 具有挑战性,因为它们具有持久性。每个 WebSocket 连接都是一个长期存在的 TCP 连接,随着连接数量的增加,它可能会变得资源密集型。

常见的扩展策略:

  1. 水平扩展:跨多个服务器负载平衡 WebSocket 流量。
  2. 粘性会话:确保来自客户端的所有 WebSocket 连接都路由到同一服务器。
  3. Redis for Pub/Sub:使用Redis进行跨服务器的事件发布和订阅,确保所有客户端都能收到实时更新。
npm install socket.io-redis

下面是配置 Socket.IO 使用 Redis 的示例:

const io = require('socket.io')(server);
const redisAdapter = require('socket.io-redis');
io.adapter(redisAdapter({ host: 'localhost', port: 6379 }));

结论

WebSockets 和 Socket.IO 是现代 Web 应用程序中实时通信的基本技术。虽然 WebSocket 为全双工通信提供了低级协议,但 Socket.IO 简化了实现,提供了自动重新连接和广播等附加功能。这两种技术在现实世界中都有重要的应用,从聊天应用程序到协作工具。

在下一篇文章中,我们将深入研究 Node.js Streams 并探索它们如何有效地处理大数据,重点关注可扩展性和性能。

版本聲明 本文轉載於:https://dev.to/imsushant12/real-time-communication-with-websockets-and-socketio-in-nodejs-4p8e?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何動態重定向Python函數中的標準輸出與錯誤流?
    如何動態重定向Python函數中的標準輸出與錯誤流?
    Python 中的上下文流重定向標準輸出和錯誤流(stdout 和stderr)的重定向在許多場景中證明是重定向在許多場景中證明是有用的。然而,當函數持有對這些流的內部引用時,傳統方法通常會出現不足。 需要動態解決方案傳統的重新導向技術,如 sys.stdout,永久重新導向流。當方法本質上在內部複...
    程式設計 發佈於2024-11-08
  • 如何在 Java 中有效地計算檔案或資料夾的大小?
    如何在 Java 中有效地計算檔案或資料夾的大小?
    在Java 中取得檔案或資料夾的大小檢索檔案或資料夾的大小是處理檔案時的常見任務在爪哇。以下是如何有效地做到這一點:取得檔案大小要取得檔案的大小,您可以使用java.io 上的length() 方法.文件對象。這將傳回檔案的長度(以位元組為單位),如果檔案不存在,則傳回 0。 java.io.Fil...
    程式設計 發佈於2024-11-08
  • 變數第 04 部分
    變數第 04 部分
    মনে করুন আপনি চা খাবেন। না, চা না। কফিই খান। প্রোগ্রামার হচ্ছেন কফি তো খেতেন পারেন। কফিকে প্রোগ্রামারদের সঙ্গি বললে ভুল হবে না । যাই হোক। এখন কফি তৈর...
    程式設計 發佈於2024-11-08
  • 當我開始使用 React 時我希望知道的事情
    當我開始使用 React 時我希望知道的事情
    3年React開發經驗教訓 當我第一次投入 React 時,感覺就像打開了潘朵拉魔盒。有很多東西要學,一路上,我遇到了很多「啊哈!」的情況。時刻。以下是我希望在開始時就知道的 10 件事,以幫助您在 React 之旅中跳過一些減速帶。 1. 元件只是函數 最重要的認知? React...
    程式設計 發佈於2024-11-08
  • 使用 Golang 編寫打字速度測試 CLI 應用程式
    使用 Golang 編寫打字速度測試 CLI 應用程式
    必須認真考慮這個標題嗎? ……現在我們已經解決了這個問題,讓我們寫一些該死的程式碼:) 泵浦煞車?尖叫……讓我們對今天要嘗試建立的內容做一些介紹。如果標題不明顯,我們將建立一個 CLI 應用程式來計算您在 golang 中的打字速度 - 儘管您可以使用您選擇的任何程式語言遵循相同的技術來建立相同的應...
    程式設計 發佈於2024-11-08
  • 為什麼我的 Bootstrap 模態不工作? ($(...).modal 不是函數)
    為什麼我的 Bootstrap 模態不工作? ($(...).modal 不是函數)
    TypeError: $(...).modal is not a function with Bootstrap Modal您在嘗試執行以下操作時遇到此錯誤動態地將Bootstrap 模式插入HTML 並使用jQuery 觸發它。讓我們深入研究一下問題:錯誤表明“$().modal”函數不被jQue...
    程式設計 發佈於2024-11-08
  • 如何在 PHP 中建立遞歸匿名函數?
    如何在 PHP 中建立遞歸匿名函數?
    創建遞歸匿名 PHP 函數在 PHP 中創建遞歸匿名函數可能會很有利。下面的程式碼示範如何完成此操作,傳遞一個函數作為參考。 $factorial = function( $n ) use ( &$factorial ) { if( $n == 1 ) return 1; ...
    程式設計 發佈於2024-11-08
  • 為什麼雙擊顯示/隱藏按鈕僅在第二次調用時起作用?
    為什麼雙擊顯示/隱藏按鈕僅在第二次調用時起作用?
    為什麼第一次使用時雙擊顯示/隱藏按鈕? 在網頁中,按鈕的作用是顯示或隱藏一個元素,但它需要雙擊其初始呼叫。經檢查發現按鈕的代碼為:function showhidemenu() { var x = document.getElementById("menu"); if (...
    程式設計 發佈於2024-11-08
  • 網格佈局:初學者的終極指南
    網格佈局:初學者的終極指南
    歡迎回到您的 CSS 冒險!今天,我們將深入研究網頁設計工具庫中最強大的工具之一:CSS 網格佈局。將其視為佈局技術的瑞士軍刀 - 多功能、精確,並且能夠將您的網頁轉變為組織精美的傑作。準備好接受並承受它了嗎?我們走吧! 什麼是 CSS 網格佈局? 想像一下,您正在玩​​俄羅斯方塊...
    程式設計 發佈於2024-11-08
  • 了解 Python 字典:完整概述
    了解 Python 字典:完整概述
    Python 字典是 Python 程式設計中最通用且使用最廣泛的資料結構之一。它們是內建資料類型,允許開發人員將資料儲存在鍵值對中,這使得它們對於各種應用程式非常有用。在本文中,我們將探討什麼是字典、如何使用它們,並提供範例來說明其功能。 什麼是字典? Python 字典是無序的...
    程式設計 發佈於2024-11-08
  • 如何更改 H1 標籤中最後一個單字的顏色?
    如何更改 H1 標籤中最後一個單字的顏色?
    更改 H1 中最後一個單字顏色的解決方案在 Web 開發領域,使用 CSS 設計元素樣式是基本實踐。然而,當涉及到改變 H1 標籤中最後一個單字的顏色時,原生 CSS 就顯得不夠了。不過,不用擔心,因為有一個超出傳統 CSS 範圍的解決方案。 為了實現這個效果,我們轉向 JavaScript 函式庫...
    程式設計 發佈於2024-11-08
  • 角度訊號和 RxJS 的新功能
    角度訊號和 RxJS 的新功能
    1) Signals 與 RxJS:在 Angular 16 中從頭開始建立 Signal 變數並將其與 Observable 進行比較。 以我們有側邊欄選單和頂部選單的範例為例,每次按下按鈕時,頂部選單都會告訴側邊欄選單折疊: 使用 RxJS: 這種通訊是在使用主題和可觀察量的服務中完成的,每次...
    程式設計 發佈於2024-11-08
  • 實作 malloc() 和 free() — 首先重複使用舊內存
    實作 malloc() 和 free() — 首先重複使用舊內存
    在本系列关于实现 malloc() 和 free() 的上一篇文章中,我们展示了如何通过释放新块来重用内存块并减少堆。然而,当前的函数引入了一个微妙的问题:它优先考虑重用较新的块,这可能会导致内存消耗随着时间的推移而增加。为什么会发生这种情况?让我们来分解一下。 通过重用最近的块来减...
    程式設計 發佈於2024-11-08
  • Java 中的封裝與抽象:終極指南
    Java 中的封裝與抽象:終極指南
    学习 Java 或任何面向对象编程 (OOP) 语言时,两个基本概念很突出:封装 和 抽象。这些概念是 OOP 的关键支柱,可提高代码的可重用性、安全性和可维护性。尽管它们经常一起使用,但它们具有不同的目的。 在这篇文章中,我们将深入探讨封装和抽象之间的差异,并通过清晰的定义、示例和代码片段来帮助您...
    程式設計 發佈於2024-11-08
  • Zustand原始碼中的createWithEqualityFnImpl有解釋。
    Zustand原始碼中的createWithEqualityFnImpl有解釋。
    在這篇文章中,我們將透過記錄它的一些值來分析createWithEqualityFnImpl是如何實現的,以便更好地理解。 從上圖可以看出,createWithEqualityFn 呼叫了函數 createWithEqualityFnImpl。此模式在 vanilla.ts 中使用,如下所示: e...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3