Socket.io 与 Express 结合使用教程-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，实时通信是个十分重要的功能。实现实时通信的框架和库有很多，其中 Socket.io 是一个十分流行的选择。Socket.io 是一个跨平台的实时通信库，支持服务器和客户端的双向通信。在前端中，我们通常使用 Socket.io 客户端 API 进行开发。

本文将介绍如何在 Node.js 的后端框架 Express 中使用 Socket.io。

安装和配置

首先，我们需要安装 socket.io 和 express：

npm install express socket.io

然后，我们需要在 Express 中集成 Socket.io，在 Express 实例的回调中创建 Socket.io 服务器实例：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const http = require('http').createServer(app);  // 创建 HTTP 服务器
const io = require('socket.io')(http);  // 创建 Socket.io 服务器

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');  // 返回页面
});

http.listen(3000, function() {
  console.log('listening on *:3000');
});

上面的代码中，我们首先使用 Express 创建一个 HTTP 服务器。然后，我们创建一个 Socket.io 服务器实例，并将其绑定到 HTTP 服务器上。最后，我们启动 HTTP 服务器，并绑定到端口 3000 上。

集成 Socket.io 客户端

在客户端中集成 Socket.io 是非常简单的。我们可以使用 cdn 或 npm 等方式，将 Socket.io 客户端引入项目中：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Example</title>
  <script src="/socket.io/socket.io.js"></script>  <!-- 引入 Socket.io 客户端 -->
</head>
<body>
  <h1>Socket.io Example</h1>

  <script>
    const socket = io();  // 创建 Socket.io 客户端实例
  </script>
</body>
</html>

上面的代码中，我们使用 Socket.io 提供的 socket.io.js 文件引入 Socket.io 客户端。然后，在页面加载完成后，我们创建了一个 Socket.io 客户端实例。这里的 io() 方法，实际上就是 Socket.io 客户端的工厂方法，用于创建 Socket.io 客户端实例。

建立连接和断开连接

当客户端与服务器成功建立连接后，Socket.io 会自动触发 connect 事件。同样地，当客户端和服务器断开连接后，Socket.io 会自动触发 disconnect 事件。我们可以监听这两个事件，编写对应的处理程序，来进行一些特定的逻辑处理。

io.on('connection', function(socket) {  // 监听连接事件
  console.log('a user connected');

  socket.on('disconnect', function() {  // 监听断开连接事件
    console.log('user disconnected');
  });
});

上面的代码中，我们使用 io.on() 方法监听了 connection 事件。一旦有客户端与服务器建立连接，就会触发 connection 事件，并执行回调函数。在回调函数中，我们打印了一条日志，表示有用户连接了服务器。然后，我们又使用 socket.on() 方法监听了 disconnect 事件。当客户端与服务器断开连接时，就会触发 disconnect 事件，并执行回调函数。在回调函数中，我们又打印了一条日志，表示有用户断开了与服务器的连接。

发送和接收消息

Socket.io 实现了双向通信，除了可以向服务器发送消息外，还可以向客户端发送消息。这使得我们能够实现服务器主动向客户端推送消息的功能。

客户端需要使用 socket.emit() 方法发送消息，而服务器需要使用 socket.on() 方法接收消息：

io.on('connection', function(socket) {
  socket.on('chat message', function(msg) {  // 监听客户端消息
    io.emit('chat message', msg);  // 向所有客户端广播消息
  });
});

上面的代码中，我们使用 socket.on() 方法监听了客户端发送的 chat message 消息。一旦有这个消息到达服务器，就会触发回调函数并执行其中的逻辑代码。在这里，我们又使用了 io.emit() 方法向所有客户端广播了消息。

而客户端需要使用 socket.emit() 方法发送 chat message 消息：

// javascriptcn.com 代码示例
const socket = io();

$('form').submit(function() {
  socket.emit('chat message', $('#m').val());  // 向服务器发送消息
  $('#m').val('');
  return false;
});

socket.on('chat message', function(msg) {  // 监听服务器消息
  $('#messages').append($('<li>').text(msg));
});

上面的代码中，我们在表单提交时，使用 socket.emit() 方法向服务器发送了 chat message 消息，并将文本框清零。而当客户端接收到服务器发送的 chat message 消息时，就会触发回调函数，在其中将消息展示在页面上。

总结

本文介绍了如何在 Express 中使用 Socket.io 实现实时通信。我们首先介绍了安装和配置 Socket.io 和 Express 的过程。然后，我们详细讲解了如何建立连接和断开连接，如何发送和接收消息。在实际开发中，读者可以根据这些知识点，实现自己的实时通信功能。

完整示例代码：socketio-example

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