Socket.IO React Native 示例：移动 App 通过 socket.io-client 连接实时服务器的完整实战指南-北京尧图网络

Socket.IO React Native 示例移动 App 通过 socket.io-client 连接实时服务器的完整实战指南【免费下载链接】socket.ioBidirectional and low-latency communication for every platform项目地址: https://gitcode.com/gh_mirrors/so/socket.io本文基于 socket.io 仓库中的 React Native 示例完整讲解如何在 React Native 0.73 项目中接入 Socket.IO从启动 Metro 与移动端 App、部署 Node 端 Socket.IO 服务器到用socket.io-client建立连接、监听连接状态与传输层升级polling 到 WebSocket 的切换。读完本文你将掌握一个可直接在 Android/iOS 模拟器上运行并验证实时通信链路的最小可用工程。示例工程结构与版本依赖该示例位于 examples/ReactNativeExample 目录是一个用react-native-community/cli引导生成的标准 React Native 工程在此基础上叠加了 Socket.IO 客户端与服务器两部分代码App.tsx主界面展示连接状态与当前使用的传输层socket.js单例 Socket.IO 客户端指向局域网 IP 的服务器server/index.js独立的 Node 端 Socket.IO 服务器index.js 与 app.jsonReact Native 入口注册与应用名配置metro.config.jsMetro 打包器默认配置__tests__/App.test.tsxApp 组件的 Jest 渲染测试。从 package.json 可以看到关键版本约束这也是本示例可运行的适用前提依赖版本说明react-native0.73.6React Native 运行时react18.2.0React 版本socket.io-client^4.7.5客户端实时通信库typescript5.0.4配合react-native/typescript-config使用node18engines字段声明的 Node 版本下限服务端的 server/package.json 单独声明了socket.io: ^4.7.5并将type: module设为 ESM 模式因此服务器代码使用import语法。Step 1启动 Metro 服务器示例的 README 要求先完成 React Native 官方环境搭建至创建新应用步骤。随后在工程根目录启动 Metro——React Native 内置的 JavaScript 打包器# using npm npm start # OR using Yarn yarn startnpm start实际执行的是 package.json 中的react-native start脚本Metro 会监听文件变化并为模拟器/设备提供 JS bundle。注意此终端需要保持运行。Step 2启动 Android 或 iOS 应用让 Metro 在独立终端中运行另开一个终端从工程根目录启动目标平台的 AppAndroid# using npm npm run android # OR using Yarn yarn androidiOS# using npm npm run ios # OR using Yarn yarn ios对应的 package.json 脚本分别为react-native run-android与react-native run-ios。配置正确时App 应很快出现在 Android 模拟器或 iOS 模拟器中当然也可以在 Android Studio 或 Xcode 中直接运行。Step 3启动 Socket.IO 服务器这是示例中最关键的一步README 给出的操作是cd server npm install npm startnpm start执行node index.js服务端代码非常精简server/index.jsimport { Server } from socket.io; const io new Server(); io.on(connection, (socket) { console.log(connect: ${socket.id}, socket.request.headers); socket.on(disconnect, () { console.log(disconnect: ${socket.id}); }); }); io.listen(3000);它完成三件事new Server()创建 Socket.IO 服务器实例监听connection事件打印客户端 socket id 与请求头客户端断开时打印disconnectio.listen(3000)独立监听 3000 端口不挂载到 Express 等 HTTP 框架上。这样客户端每连入/断开一个连接终端都会出现形如connect: socket.id的日志可以作为服务端验证握手成功的依据。Step 4客户端连接——为什么必须使用局域网 IPsocket.js 是整个示例客户端的核心import { io } from socket.io-client; export const socket io(http://192.168.0.10:3000); // use the IP address of your machine这里有两个值得注意的技术点必须替换为开发机的 IP 地址注释明确要求 use the IP address of your machine。因为 Android 模拟器与 iOS 模拟器运行在独立网络栈中从模拟器访问localhost:3000指向的是模拟器自身而非宿主机所以必须使用宿主机在局域网中的可达 IP如示例中的192.168.0.10。单例导出socket以模块顶层单例形式导出整个 App 共享同一个 Socket.IO 连接与底层的 Engine.IO 引擎实例。App.tsx通过import { socket } from ./socket引入该单例并挂载事件监听App.tsxconst [isConnected, setIsConnected] useState(false); const [transport, setTransport] useState(N/A); useEffect(() { if (socket.connected) { onConnect(); } function onConnect() { setIsConnected(true); setTransport(socket.io.engine.transport.name); socket.io.engine.on(upgrade, (transport) { setTransport(transport.name); }); } function onDisconnect() { setIsConnected(false); setTransport(N/A); } socket.on(connect, onConnect); socket.on(disconnect, onDisconnect); return () { socket.off(connect, onConnect); socket.off(disconnect, onDisconnect); }; }, []); return ( View style{styles.container} TextStatus: { isConnected ? connected : disconnected }/Text TextTransport: { transport }/Text /View );界面最终只显示两行信息连接状态connected/disconnected和当前传输层名称Transport: name。这段代码是理解 Socket.IO 客户端连接模型的一个非常好的最小样本先判断再监听socket是单例useEffect执行时连接可能已建立所以先用socket.connected判断并立即调用onConnect()避免错过connect事件连接状态由connect/disconnect事件驱动connect置为已连接disconnect复位为未连接并把传输层清为N/A传输层通过socket.io.engine.transport.name读取socket.io是Manager其engine是 Engine.IO 的Socket实例transport即当前生效的底层传输监听upgrade事件感知传输层切换当 Engine.IO 从长轮询升级到 WebSocket 时会触发upgrade事件并携带新的 transport 对象示例据此实时更新界面显示的传输层名称组件卸载时解绑useEffect的清理函数用socket.off移除两个监听器防止 React 组件重挂载造成监听器泄漏。传输层升级机制的源码佐证upgrade事件并非 Socket.IO 层的事件而是来自底层的 Engine.IO 客户端。从 engine.io-client 的 Socket 实现可以看到upgrade?: boolean选项控制客户端是否应尝试将传输层从当前类型升级到 WebSocketEngine.IO 的Socket定义了upgrade: (transport: Transport) void事件并有对应的upgradeError事件upgrades: string[]表示可升级到的传输层列表默认连接流程会先建立 polling 连接再按升级路径尝试 WebSocket见 socket.ts 中 upgrade 相关注释与事件定义。因此在示例 UI 中你通常会看到Transport先显示pollingXHR 长轮询随后在升级到 WebSocket 后刷新为websocket——这正是App.tsx里监听upgrade事件的意义。修改 App 并热重载Step 4README 的最后一步是修改代码并观察热重载用文本编辑器打开App.tsx修改内容Android按两次R键或从开发者菜单选择ReloadWindows/Linux 为CtrlMmacOS 为CmdMiOS在模拟器中按CmdR重新加载应用。由于 Metro 在 Step 1 中一直在运行保存App.tsx后重新加载即可看到 Socket.IO 连接信息与界面变化。此外 App.test.tsx 提供了一个最简的 Jest 渲染测试renderer.create(App /)可用npm test执行验证组件能被渲染。运行前提与实操注意事项Node 版本客户端工程 package.json 声明node: 18请确保 Node 18服务器端口server/index.js 固定监听 3000 端口若被占用需自行调整并同步修改 socket.js 中的 URLIP 必须可达socket.js中的192.168.0.10只是占位示例必须替换为运行服务器的开发机局域网 IP否则模拟器无法建立连接这是移动端调试与浏览器调试最常见的差异点;两端版本对齐客户端socket.io-client ^4.7.5与服务端socket.io ^4.7.5均为 4.x 系列遵循仓库 docs/socket.io-protocol 中描述的 v5 协议世代Socket.IO 4.x 客户端/服务端协议跨大版本混用需自行验证兼容性。小结这个示例的价值在于用最少的代码串通了React Native 端 Node 端的完整实时通信链路server/index.js 展示了 Socket.IO 服务器的最小独立部署方式socket.js 展示了移动端连接单例的建立方式与局域网 IP 的使用要求App.tsx 则演示了如何读取连接状态、当前传输层以及如何通过 Engine.IO 的upgrade事件观察轮询升级到 WebSocket这一 Socket.IO 的默认传输层策略。按 README 的四个步骤Metro → 移动端 App → Socket.IO 服务器 → 修改与热重载操作即可在模拟器上得到一个可验证收发链路的工作示例。【免费下载链接】socket.ioBidirectional and low-latency communication for every platform项目地址: https://gitcode.com/gh_mirrors/so/socket.io创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Socket.IO React Native 示例：移动 App 通过 socket.io-client 连接实时服务器的完整实战指南

相关推荐

单片机毕设选题推荐：基于 NRF24L01 的主从式病房呼叫监测装置设计 STM32/51 单片机驱动的 LCD1602 病房呼叫显示系统设计（020206）

OpenRouter接入Claude Fable 5.1：API调用与生产实践指南

单片机毕设选题推荐：基于 STM32 的 OLED 显示智能自适应风扇控制系统设计基于 STM32 的多操作模式智能风扇远程监控装置设计（018506）

更多资讯

PMD规则文件配置指南：从安装到CI集成与验证

企业站CMS v1.3.6升级指南：更新日志解读与回滚实操

Java浮点数Infinity排查与防御：从Double.isInfinite到JSON序列化兜底

Java与C#语法差异详解：面向对象编程对比指南

PMD静态代码分析环境搭建：规则文件配置与避坑指南

WebAssembly逆向实战：荔枝网Wasm加密参数分析

今日更新

猫狗目标检测数据集：VOC/COCO/YOLO三格式一体化实战包

HDU2017多校标程复现：算法竞赛工程化真题沙盒

Codex Sandbox 隔离环境拆解：AI Agent 的临时实验室如何运作

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？