使用 Socket.io 实现手机 App 与 Web 端的双向通信-JavaScript中文网-JavaScript教程资源分享门户

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 服务器，并对客户端的连接进行监听:

const server = require('http').createServer();
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

上面的代码中，我们使用 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 端之间双向通信的示例代码：

服务器端代码

const server = require('http').createServer();
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

客户端代码

import io from 'socket.io-client';

const socket = io('http://localhost:3000');

socket.on('connect', () => {
  console.log('connected to server');
});

socket.on('chat message', (msg) => {
  console.log('received message: ' + msg);
});

const sendMessage = (message) => {
  socket.emit('chat message', message);
}

export { sendMessage };

使用该示例代码需要先按照上面的步骤，安装 Socket.io 库并在服务器端建立 WebSocket 服务器。客户端代码中，我们通过 sendMessage 函数发送消息，而接收到的消息将会在 chat message 事件上触发，并通过 console.log 函数输出到控制台。

总结

本文介绍了如何使用 Socket.io 实现手机 App 和 Web 端之间双向通信，并提供了示例代码以供参考。Socket.io 是一款非常实用的前端框架，可以方便地实现双向通信等功能。通过学习本文，您可以初步掌握 Socket.io 的基本用法，并且对构建实时应用程序有了更加深入的了解。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b3c948add4f0e0ffcca036