基于Node.js和Socket.IO實現(xiàn)實時通信功能

更新時間：2024年11月25日 08:51:49 作者：盛夏綻放

在現(xiàn)代網絡應用中,實時通信變得越來越重要,Node.js,作為一個JavaScript運行環(huán)境,而Socket.IO則為Node.js提供了一個強大的實時通信庫,本文將通過一個簡單的示例,展示如何使用Node.js和Socket.IO創(chuàng)建一個能夠實現(xiàn)實時通信的服務器,需要的朋友可以參考下

引言

在現(xiàn)代網絡應用中，實時通信變得越來越重要。Node.js，作為一個基于Chrome V8引擎的JavaScript運行環(huán)境，使得開發(fā)者能夠在服務器端運行JavaScript代碼，而Socket.IO則為Node.js提供了一個強大的實時通信庫。本文將通過一個簡單的示例，展示如何使用Node.js和Socket.IO創(chuàng)建一個能夠實現(xiàn)實時通信的服務器。

1. 環(huán)境準備

在開始之前，請確保你已經安裝了Node.js。你還需要安裝Socket.IO庫，可以通過npm（Node.js的包管理器）來安裝：

npm install socket.io

2. 創(chuàng)建HTTP服務器

首先，我們需要創(chuàng)建一個HTTP服務器，用于提供靜態(tài)文件服務，比如HTML頁面。以下是創(chuàng)建HTTP服務器的代碼：

const http = require("http");
const fs = require("fs");

// 創(chuàng)建HTTP服務器
let server = http.createServer((request, response) => {
    // 讀取HTMLPage.html文件
    fs.readFile("HTMLPage.html", (error, data) => {
        response.writeHead(200, { 'Content-Type': 'text/html' });
        response.end(data);
    });
}).listen(52273, () => {
    console.log('服務器地址: http://127.0.0.1:52273');
});

在這段代碼中，我們使用了Node.js的http模塊來創(chuàng)建一個服務器，該服務器監(jiān)聽52273端口。當有HTTP請求到達時，服務器會讀取并返回HTMLPage.html文件的內容。

3. 集成Socket.IO

接下來，我們將集成Socket.IO來實現(xiàn)WebSocket通信。以下是集成Socket.IO并設置WebSocket事件監(jiān)聽的代碼：

const socketio = require("socket.io");

// 創(chuàng)建WebSocket服務器
let io = socketio.listen(server);

// 監(jiān)聽WebSocket服務器的connection事件
io.sockets.on("connection", (socket) => {
    console.log("客戶端已經連接！！");

    socket.on('clientData', (data) => {
        console.log('客戶端發(fā)來的數(shù)據(jù)：', data);
        // 向客戶端發(fā)送serverData事件和數(shù)據(jù)
        socket.emit('serverData', data);
    });
});

在這段代碼中，我們首先引入了socket.io模塊，并使用listen方法創(chuàng)建了一個WebSocket服務器，綁定到我們之前創(chuàng)建的HTTP服務器實例上。然后，我們監(jiān)聽connection事件，當有新的客戶端連接時，會觸發(fā)這個事件。

在客戶端中接收：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        這行代碼通過 <script> 標簽引入了 socket.io 的客戶端庫。
        這個庫允許瀏覽器與服務器建立 WebSocket 連接，并發(fā)送或接收事件。
        socket.io.js 文件通常由服務器端的 socket.io 庫在指定的路徑下提供。
     -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        window.onload = function(){
            // 連接socket
            // 這行代碼創(chuàng)建了一個新的 socket 對象，用于與服務器建立連接。
            // io.connect() 方法是 socket.io 庫提供的一個函數(shù)，用于初始化一個新的連接。
            // 如果沒有指定服務器地址，它默認嘗試連接到與當前頁面相同的主機和端口。
            // 指定地址如：const socket = io.connect('http://localhost:3000');
            var socket = io.connect();
            // 監(jiān)聽服務端的事件和數(shù)據(jù)
            socket.on('serverData',(data)=>{
                alert(data) // 這里就是服務端發(fā)來的數(shù)據(jù)
            })
            // 創(chuàng)建表單點擊事件
            document.getElementById('button').onclick = ()=>{
                // 獲取表單數(shù)據(jù)
                var text = document.getElementById('text').value;
                // 向服務端發(fā)送clientData事件和數(shù)據(jù)
                socket.emit('clientData',text);
            }
        }
    </script>
</head>
<body>
    <input type="text" id="text">
    <input type="button" id="button" value="send">
</body>
</html>

4. 實現(xiàn)實時通信

在WebSocket連接建立后，我們可以監(jiān)聽客戶端發(fā)送的事件，并根據(jù)需要向客戶端發(fā)送事件。以下是實現(xiàn)實時通信的核心代碼：

socket.on('clientData', (data) => {
    console.log('客戶端發(fā)來的數(shù)據(jù)：', data);
    // 向客戶端發(fā)送serverData事件和數(shù)據(jù)
    socket.emit('serverData', data);
});

這段代碼監(jiān)聽了名為clientData的事件，當客戶端發(fā)送這個事件時，服務器會接收到數(shù)據(jù)，并打印出來。然后，服務器使用emit方法向客戶端發(fā)送一個名為serverData的事件，并將接收到的數(shù)據(jù)作為參數(shù)發(fā)送回去。

5. 通信類型

在注釋中提到了四種通信類型：

單向通信：只有發(fā)送事件的客戶端可以收到消息。

io.on('connection', function (socket) {
  socket.on('private message', function (msg) {
    socket.emit('serverData', data);
  });
});

公共通信：所有客戶端（包括發(fā)送事件的客戶端）都可以收到消息。

io.on('connection', function (socket) {
  socket.on('private message', function (msg) {
    io.sockets.emit('serverData', data);
  });
});

廣播通信：除了發(fā)送事件的客戶端外，所有其他客戶端都可以收到消息。

io.on('connection', function (socket) {
  socket.on('private message', function (msg) {
    socket.broadcast.emit('serverData', data);
  });
});

指定通信：可以確保只有指定的客戶端接收到消息，而其他客戶端則不會收到這些信息。

io.on('connection', function (socket) {
  socket.on('private message', function (msg) {
    io.to(socket.id).emit('private message', msg);
  });
});

這些通信類型為開發(fā)者提供了靈活的選擇，可以根據(jù)應用的需求選擇合適的通信方式。

6. 整體代碼

服務端(后端)代碼：

// 引入模塊
const http = require("http")
const fs = require("fs")
const socketio = require("socket.io")
// 創(chuàng)建服務器
let server = http.createServer((request, response) => {
    // 讀取HTMLPage.html文件
    fs.readFile("HTMLPage.html", (error, data) => {
        response.writeHead(200, { 'Content-Type': 'text/html' })
        response.end(data)
    });
}).listen(52273, () => {
    console.log('服務器地址: http://127.0.0.1:52273')
})
// 創(chuàng)建WebSocket服務器
// let io = socket.io.listen(server);：使用 socket.io 模塊的 listen 方法創(chuàng)建一個 WebSocket 服務器，
// 并將其綁定到之前創(chuàng)建的 HTTP 服務器實例上。
let io = socketio.listen(server);
// 監(jiān)聽 WebSocket 服務器的 connection 事件，當有新的 WebSocket 客戶端連接時觸發(fā)。
var id=0

io.sockets.on("connection", (socket) => {
    // 在回調函數(shù)中，socket 參數(shù)代表與客戶端的 WebSocket 連接。
    console.log("客戶端已經連接??！")
    id = socket.id
    console.log('用戶已上線，自動分配了一個id:',id)

    socket.on('clientData', (data) => {
        // 輸出客戶端發(fā)來的數(shù)據(jù)
        console.log('客戶端發(fā)來的數(shù)據(jù)：', data);
        // 這個代碼發(fā)給的就是最新的id對應的服務端；例如：有A、B、C三個客服端；A發(fā)信息的話就會發(fā)給C
        io.sockets.to(id).emit('serverData',data)
        // 向客戶端發(fā)送serverData事件和數(shù)據(jù)
        // socket.emit('serverData', data);
        // 1.單向通信類型：某個客戶端發(fā)送事件和數(shù)據(jù)的時候，只有他自己可以收到消息
        //  代碼：   socket.emit('serverData', data);
        // 2.public 通信類型：某個客戶端發(fā)送事件和數(shù)據(jù)的時候，其他所有的客戶端都可以收到消息，包括 發(fā)消息的客戶端本身
        //  代碼：   io.sockets.emit('serverData',data)
        // 3.broadcast 通信類型：某個客戶端發(fā)送事件和數(shù)據(jù)的時候，其他所有的客戶端都可以收到消息，除了 發(fā)消息的客戶端本身
        //  代碼：   socket.broadcast.emit('serverData',data)
        // 4.private 通信類型：某個客戶端向指定的(id)某個客戶端發(fā)送事件和數(shù)據(jù)
        //  代碼：   
        //  id = socket.id
        //  io.socket.to(id).emit('serverData',data)
    })
})

客戶端（前端）代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        這行代碼通過 <script> 標簽引入了 socket.io 的客戶端庫。
        這個庫允許瀏覽器與服務器建立 WebSocket 連接，并發(fā)送或接收事件。
        socket.io.js 文件通常由服務器端的 socket.io 庫在指定的路徑下提供。
     -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        window.onload = function(){
            // 連接socket
            // 這行代碼創(chuàng)建了一個新的 socket 對象，用于與服務器建立連接。
            // io.connect() 方法是 socket.io 庫提供的一個函數(shù)，用于初始化一個新的連接。
            // 如果沒有指定服務器地址，它默認嘗試連接到與當前頁面相同的主機和端口。
            var socket = io.connect();
            // 監(jiān)聽服務端的事件和數(shù)據(jù)
            socket.on('serverData',(data)=>{
                alert(data)
            })
            // 創(chuàng)建表單點擊事件
            document.getElementById('button').onclick = ()=>{
                // 獲取表單數(shù)據(jù)
                var text = document.getElementById('text').value;
                // 向服務端發(fā)送clientData事件和數(shù)據(jù)
                socket.emit('clientData',text);
            }
        }
    </script>
</head>
<body>
    <input type="text" id="text">
    <input type="button" id="button" value="send">
</body>
</html>

7. 結論

通過上述步驟，我們創(chuàng)建了一個簡單的Node.js服務器，它能夠處理HTTP請求，并使用Socket.IO實現(xiàn)WebSocket通信。這個服務器能夠接收客戶端發(fā)送的數(shù)據(jù)，并能夠向客戶端發(fā)送數(shù)據(jù)，實現(xiàn)實時通信。這只是一個基礎示例，Socket.IO和Node.js的強大功能遠不止于此，它們可以支持更復雜的實時應用場景，如多人聊天室、實時游戲等。

以上就是基于Node.js和Socket.IO實現(xiàn)實時通信功能的詳細內容，更多關于Node.js Socket.IO實時通信的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

nodejs中request庫使用HTTPS代理的方法
這篇文章主要介紹了nodejs中request庫使用HTTPS代理的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
node實現(xiàn)簡單的反向代理服務器
本篇文章主要介紹了node實現(xiàn)簡單的反向代理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
nodejs 使用http進行post或get請求的實例(攜帶cookie)
今天小編就為大家分享一篇nodejs 使用http進行post或get請求的實例(攜帶cookie)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-01-01
NodeJS感知和控制自身進程的運行環(huán)境和狀態(tài)
NodeJS可以感知和控制自身進程的運行環(huán)境和狀態(tài),也可以創(chuàng)建子進程并與其協(xié)同工作,這使得NodeJS可以把多個程序組合在一起共同完成某項工作,并在其中充當膠水和調度器的作用,和進程管理相關的API單獨介紹起來比較枯燥,這里從一些典型的應用場景出發(fā)
2024-01-01
淺談如何把Node項目部署到服務器上
本文主要介紹了淺談如何把Node項目部署到服務器上，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
nodejs實現(xiàn)UDP組播示例方法
這篇文章主要介紹了nodejs實現(xiàn)UDP組播示例方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
nodejs圖片處理工具gm用法小結
這篇文章主要介紹了nodejs圖片處理工具gm用法小結，詳細的介紹了gm的使用，還有圖片處理的實例，非常具有實用價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-12-12
Node.js?搭建后端服務器內置模塊(?http+url+querystring?的使用)
這篇文章主要介紹了Node.js搭建后端服務器內置模塊(http+url+querystring的使用)，文章圍繞主題展開詳細的內容戒殺，具有一定的參考價值，需要的朋友可以參考一下
2022-09-09
node實現(xiàn)將json轉為excel
平時我們寫代碼處理的數(shù)據(jù)格式一般都是json格式的數(shù)據(jù),但有時候我們也需要將數(shù)據(jù)轉為excel格式進行保存或分享,所以下面我們就來學習一下如何通過node實現(xiàn)json轉excel吧
2024-11-11
Node.js 與 Webpack 模塊化工程化入門指南教程
本文介紹了Node.js的基礎知識,包括什么是Node.js、如何執(zhí)行代碼、fs和path模塊的使用方法,以及簡易前端工程化實踐,隨后,文章講解了Web服務基礎、模塊化開發(fā)、npm包管理,以及使用Webpack進行前端工程化和優(yōu)化,感興趣的朋友跟隨小編一起看看吧
2026-03-03