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

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

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

引言

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

1. 環(huán)境準備

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

npm install socket.io

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

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

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

// 創(chuàng)建HTTP服務(wù)器
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('服務(wù)器地址: http://127.0.0.1:52273');
});

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

3. 集成Socket.IO

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

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

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

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

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

在這段代碼中，我們首先引入了socket.io模塊，并使用listen方法創(chuàng)建了一個WebSocket服務(wù)器，綁定到我們之前創(chuàng)建的HTTP服務(wù)器實例上。然后，我們監(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 的客戶端庫。
        這個庫允許瀏覽器與服務(wù)器建立 WebSocket 連接，并發(fā)送或接收事件。
        socket.io.js 文件通常由服務(wù)器端的 socket.io 庫在指定的路徑下提供。
     -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        window.onload = function(){
            // 連接socket
            // 這行代碼創(chuàng)建了一個新的 socket 對象，用于與服務(wù)器建立連接。
            // io.connect() 方法是 socket.io 庫提供的一個函數(shù)，用于初始化一個新的連接。
            // 如果沒有指定服務(wù)器地址，它默認嘗試連接到與當前頁面相同的主機和端口。
            // 指定地址如：const socket = io.connect('http://localhost:3000');
            var socket = io.connect();
            // 監(jiān)聽服務(wù)端的事件和數(shù)據(jù)
            socket.on('serverData',(data)=>{
                alert(data) // 這里就是服務(wù)端發(fā)來的數(shù)據(jù)
            })
            // 創(chuàng)建表單點擊事件
            document.getElementById('button').onclick = ()=>{
                // 獲取表單數(shù)據(jù)
                var text = document.getElementById('text').value;
                // 向服務(wù)端發(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ā)送這個事件時，服務(wù)器會接收到數(shù)據(jù)，并打印出來。然后，服務(wù)器使用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ù)應(yīng)用的需求選擇合適的通信方式。

6. 整體代碼

服務(wù)端(后端)代碼：

// 引入模塊
const http = require("http")
const fs = require("fs")
const socketio = require("socket.io")
// 創(chuàng)建服務(wù)器
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('服務(wù)器地址: http://127.0.0.1:52273')
})
// 創(chuàng)建WebSocket服務(wù)器
// let io = socket.io.listen(server);：使用 socket.io 模塊的 listen 方法創(chuàng)建一個 WebSocket 服務(wù)器，
// 并將其綁定到之前創(chuàng)建的 HTTP 服務(wù)器實例上。
let io = socketio.listen(server);
// 監(jiān)聽 WebSocket 服務(wù)器的 connection 事件，當有新的 WebSocket 客戶端連接時觸發(fā)。
var id=0

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

    socket.on('clientData', (data) => {
        // 輸出客戶端發(fā)來的數(shù)據(jù)
        console.log('客戶端發(fā)來的數(shù)據(jù)：', data);
        // 這個代碼發(fā)給的就是最新的id對應(yīng)的服務(wù)端；例如：有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 的客戶端庫。
        這個庫允許瀏覽器與服務(wù)器建立 WebSocket 連接，并發(fā)送或接收事件。
        socket.io.js 文件通常由服務(wù)器端的 socket.io 庫在指定的路徑下提供。
     -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        window.onload = function(){
            // 連接socket
            // 這行代碼創(chuàng)建了一個新的 socket 對象，用于與服務(wù)器建立連接。
            // io.connect() 方法是 socket.io 庫提供的一個函數(shù)，用于初始化一個新的連接。
            // 如果沒有指定服務(wù)器地址，它默認嘗試連接到與當前頁面相同的主機和端口。
            var socket = io.connect();
            // 監(jiān)聽服務(wù)端的事件和數(shù)據(jù)
            socket.on('serverData',(data)=>{
                alert(data)
            })
            // 創(chuàng)建表單點擊事件
            document.getElementById('button').onclick = ()=>{
                // 獲取表單數(shù)據(jù)
                var text = document.getElementById('text').value;
                // 向服務(wù)端發(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. 結(jié)論

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

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

您可能感興趣的文章: