Node.js 和 Socket.IO 实现实时通信

盛夏绽放2024-11-23 21:21

Node.js 和 Socket.IO 实现实时通信

在现代网络应用中，实时通信变得越来越重要。Node.js，作为一个基于Chrome V8引擎的JavaScript运行环境，使得开发者能够在服务器端运行JavaScript代码，而Socket.IO则为Node.js提供了一个强大的实时通信库。本文将通过一个简单的示例，展示如何使用Node.js和Socket.IO创建一个能够实现实时通信的服务器。

1. 环境准备

在开始之前，请确保你已经安装了Node.js。你还需要安装Socket.IO库，可以通过npm（Node.js的包管理器）来安装：

bash 复制代码 
npm install socket.io

2. 创建HTTP服务器

首先，我们需要创建一个HTTP服务器，用于提供静态文件服务，比如HTML页面。以下是创建HTTP服务器的代码：

javascript 复制代码 
const http = require("http");
const fs = require("fs");

// 创建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模块来创建一个服务器，该服务器监听52273端口。当有HTTP请求到达时，服务器会读取并返回HTMLPage.html文件的内容。

3. 集成Socket.IO

接下来，我们将集成Socket.IO来实现WebSocket通信。以下是集成Socket.IO并设置WebSocket事件监听的代码：

javascript 复制代码 
const socketio = require("socket.io");

// 创建WebSocket服务器
let io = socketio.listen(server);

// 监听WebSocket服务器的connection事件
io.sockets.on("connection", (socket) => {
    console.log("客户端已经连接！！");

    socket.on('clientData', (data) => {
        console.log('客户端发来的数据：', data);
        // 向客户端发送serverData事件和数据
        socket.emit('serverData', data);
    });
});

在这段代码中，我们首先引入了socket.io模块，并使用listen方法创建了一个WebSocket服务器，绑定到我们之前创建的HTTP服务器实例上。然后，我们监听connection事件，当有新的客户端连接时，会触发这个事件。

在客户端中接收：

html 复制代码 
<!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 连接，并发送或接收事件。
        socket.io.js 文件通常由服务器端的 socket.io 库在指定的路径下提供。
     -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        window.onload = function(){
            // 连接socket
            // 这行代码创建了一个新的 socket 对象，用于与服务器建立连接。
            // io.connect() 方法是 socket.io 库提供的一个函数，用于初始化一个新的连接。
            // 如果没有指定服务器地址，它默认尝试连接到与当前页面相同的主机和端口。
            // 指定地址如：const socket = io.connect('http://localhost:3000');
            var socket = io.connect();
            // 监听服务端的事件和数据
            socket.on('serverData',(data)=>{
                alert(data) // 这里就是服务端发来的数据
            })
            // 创建表单点击事件
            document.getElementById('button').onclick = ()=>{
                // 获取表单数据
                var text = document.getElementById('text').value;
                // 向服务端发送clientData事件和数据
                socket.emit('clientData',text);
            }
        }
    </script>
</head>
<body>
    <input type="text" id="text">
    <input type="button" id="button" value="send">
</body>
</html>

4. 实现实时通信

在WebSocket连接建立后，我们可以监听客户端发送的事件，并根据需要向客户端发送事件。以下是实现实时通信的核心代码：

javascript 复制代码 
socket.on('clientData', (data) => {
    console.log('客户端发来的数据：', data);
    // 向客户端发送serverData事件和数据
    socket.emit('serverData', data);
});

这段代码监听了名为clientData的事件，当客户端发送这个事件时，服务器会接收到数据，并打印出来。然后，服务器使用emit方法向客户端发送一个名为serverData的事件，并将接收到的数据作为参数发送回去。

5. 通信类型

在注释中提到了四种通信类型：

  1. 单向通信：只有发送事件的客户端可以收到消息。

    javascript 复制代码 
    io.on('connection', function (socket) {
  socket.on('private message', function (msg) {
    socket.emit('serverData', data);
  });
});

  2. 公共通信：所有客户端（包括发送事件的客户端）都可以收到消息。

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

  3. 广播通信：除了发送事件的客户端外，所有其他客户端都可以收到消息。

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

  4. 指定通信：可以确保只有指定的客户端接收到消息，而其他客户端则不会收到这些信息。

    js 复制代码 
    io.on('connection', function (socket) {
  socket.on('private message', function (msg) {
    io.to(socket.id).emit('private message', msg);
  });
});

这些通信类型为开发者提供了灵活的选择，可以根据应用的需求选择合适的通信方式。

6. 整体代码

服务端(后端)代码：

js 复制代码 
// 引入模块
const http = require("http")
const fs = require("fs")
const socketio = require("socket.io")
// 创建服务器
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')
})
// 创建WebSocket服务器
// let io = socket.io.listen(server);：使用 socket.io 模块的 listen 方法创建一个 WebSocket 服务器，
// 并将其绑定到之前创建的 HTTP 服务器实例上。
let io = socketio.listen(server);
// 监听 WebSocket 服务器的 connection 事件，当有新的 WebSocket 客户端连接时触发。
var id=0

io.sockets.on("connection", (socket) => {
    // 在回调函数中，socket 参数代表与客户端的 WebSocket 连接。
    console.log("客户端已经连接！！")
    id = socket.id
    console.log('用户已上线，自动分配了一个id:',id)

    socket.on('clientData', (data) => {
        // 输出客户端发来的数据
        console.log('客户端发来的数据：', data);
        // 这个代码发给的就是最新的id对应的服务端；例如：有A、B、C三个客服端；A发信息的话就会发给C
        io.sockets.to(id).emit('serverData',data)
        // 向客户端发送serverData事件和数据
        // socket.emit('serverData', data);
        // 1.单向通信类型：某个客户端发送事件和数据的时候，只有他自己可以收到消息
        //  代码：   socket.emit('serverData', data);
        // 2.public 通信类型：某个客户端发送事件和数据的时候，其他所有的客户端都可以收到消息，包括 发消息的客户端本身
        //  代码：   io.sockets.emit('serverData',data)
        // 3.broadcast 通信类型：某个客户端发送事件和数据的时候，其他所有的客户端都可以收到消息，除了 发消息的客户端本身
        //  代码：   socket.broadcast.emit('serverData',data)
        // 4.private 通信类型：某个客户端向指定的(id)某个客户端发送事件和数据
        //  代码：   
        //  id = socket.id
        //  io.socket.to(id).emit('serverData',data)
    })
})

客户端（前端）代码：

html 复制代码 
<!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 连接，并发送或接收事件。
        socket.io.js 文件通常由服务器端的 socket.io 库在指定的路径下提供。
     -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        window.onload = function(){
            // 连接socket
            // 这行代码创建了一个新的 socket 对象，用于与服务器建立连接。
            // io.connect() 方法是 socket.io 库提供的一个函数，用于初始化一个新的连接。
            // 如果没有指定服务器地址，它默认尝试连接到与当前页面相同的主机和端口。
            var socket = io.connect();
            // 监听服务端的事件和数据
            socket.on('serverData',(data)=>{
                alert(data)
            })
            // 创建表单点击事件
            document.getElementById('button').onclick = ()=>{
                // 获取表单数据
                var text = document.getElementById('text').value;
                // 向服务端发送clientData事件和数据
                socket.emit('clientData',text);
            }
        }
    </script>
</head>
<body>
    <input type="text" id="text">
    <input type="button" id="button" value="send">
</body>
</html>

7. 结论

通过上述步骤，我们创建了一个简单的Node.js服务器，它能够处理HTTP请求，并使用Socket.IO实现WebSocket通信。这个服务器能够接收客户端发送的数据，并能够向客户端发送数据，实现实时通信。这只是一个基础示例，Socket.IO和Node.js的强大功能远不止于此，它们可以支持更复杂的实时应用场景，如多人聊天室、实时游戏等。

相关推荐
y先森23 分钟前
CSS3中的伸缩盒模型（弹性盒子、弹性布局）之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy23 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891126 分钟前
vue3中父div设置display flex，2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏（补充上一条）
前端·css
2401_857610032 小时前
SpringBoot社团管理：安全与维护
spring boot·后端·安全
凌冰_2 小时前
IDEA2023 SpringBoot整合MyBatis（三）
spring boot·后端·mybatis
码农飞飞2 小时前
深入理解Rust的模式匹配
开发语言·后端·rust·模式匹配·解构·结构体和枚举
一个小坑货2 小时前
Rust 的简介
开发语言·后端·rust
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
monkey_meng3 小时前
【遵守孤儿规则的External trait pattern】
开发语言·后端·rust
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07IT专业入门，高考假期预习指南08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇