Socket.io 是一个基于 Node.js 的实时应用程序框架，它提供了双向通信的功能，可以使得服务器端和客户端之间进行实时的数据传输。在前端开发中，通常使用 Socket.io 来实现实时通信的功能，比如聊天室、多人在线游戏等等。
本文将介绍如何使用 Socket.io 实现手机 App 和 Web 端之间的双向通信，并提供示例代码以供参考。
实现原理
Socket.io 底层使用了 WebSocket 协议，也就是说，它实现了一套 WebSocket 协议的封装，使得开发人员可以更加方便地使用 WebSocket 协议。WebSocket 协议是 HTML5 中新增加的协议，可以在客户端和服务器之间建立“实时”双向通信。
使用 Socket.io 实现双向通信需要经过以下几个步骤：
- 在服务器端使用 Socket.io 框架建立 WebSocket 服务器，并对客户端的连接进行监听。
- 在客户端使用 Socket.io 客户端连接到 WebSocket 服务器，并在连接成功后与服务器进行通信。
- 客户端和服务器端通过 emit 和 on 方法进行数据的发送和接收。
实现步骤
1. 安装 Socket.io
在使用 Socket.io 之前，需要先安装 Socket.io 库，可以使用 npm 安装：
npm install socket.io
2. 在服务器端建立 WebSocket 服务器
在服务器端使用 Socket.io 框架建立 WebSocket 服务器，并对客户端的连接进行监听:
-- -------------------- ---- -------
----- ------ - -------------------------------
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
---上面的代码中，我们使用 Node.js 的 http 模块创建了一个 HTTP 服务器，并通过 Socket.io 框架将其转换为 WebSocket 服务器。然后我们对客户端的连接进行监听，并在客户端连接和断开时打印日志。
3. 在客户端连接 WebSocket 服务器
在客户端使用 Socket.io 客户端连接到 WebSocket 服务器，并在连接成功后与服务器进行通信：
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.on('connect', () => {
console.log('connected to server');
});上面的代码中，我们使用了 Socket.io 客户端库，通过 io 函数连接到服务器，并在连接成功后打印日志。
4. 实现客户端和服务器端的通讯
客户端和服务器端通过 emit 和 on 方法进行数据的发送和接收。客户端发送事件通过 emit 方法，服务器端监听事件通过 on 方法：
// 客户端发送事件
socket.emit('chat message', 'hello world');
// 服务器端监听事件
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
});上面的代码中，客户端使用 emit 发送了一个名为 "chat message" 的事件，并携带了一个字符串 "hello world"。服务器端监听了这个事件，并在事件触发时打印了接收到的消息。
示例代码
下面是一个完整的使用 Socket.io 实现手机 App 和 Web 端之间双向通信的示例代码：
服务器端代码
-- -------------------- ---- -------
----- ------ - -------------------------------
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- ----- -- -
--------------------- - - -----
------------- --------- -----
---
----------------------- -- -- -
----------------- ---------------
---
---
------------------- -- -- -
---------------------- -- ---------
---客户端代码
-- -------------------- ---- ------- ------ -- ---- ------------------- ----- ------ - ---------------------------- -------------------- -- -- - ---------------------- -- --------- --- --------------- --------- ----- -- - --------------------- -------- - - ----- --- ----- ----------- - --------- -- - ----------------- --------- --------- - ------ - ----------- --
使用该示例代码需要先按照上面的步骤，安装 Socket.io 库并在服务器端建立 WebSocket 服务器。客户端代码中，我们通过 sendMessage 函数发送消息，而接收到的消息将会在 chat message 事件上触发，并通过 console.log 函数输出到控制台。
总结
本文介绍了如何使用 Socket.io 实现手机 App 和 Web 端之间双向通信，并提供了示例代码以供参考。Socket.io 是一款非常实用的前端框架，可以方便地实现双向通信等功能。通过学习本文，您可以初步掌握 Socket.io 的基本用法，并且对构建实时应用程序有了更加深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b3c948add4f0e0ffcca036