集成 Socket.IO

Socket.IO 由两部分组成

• 一个与 Node.JS HTTP 服务器集成（或安装在）的服务器（socket.io 包）
• 一个在浏览器端加载的客户端库（socket.io-client 包）

在开发过程中，socket.io 会自动为我们提供客户端，正如我们将会看到的那样，所以现在我们只需要安装一个模块

npm install socket.io

这将安装模块并将依赖项添加到 package.json 中。现在让我们编辑 index.js 来添加它

CommonJS

const express = require('express');
const { createServer } = require('node:http');
const { join } = require('node:path');
const { Server } = require('socket.io');

const app = express();
const server = createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

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

server.listen(3000, () => {
  console.log('server running at http://localhost:3000');
});

ES 模块

import express from 'express';
import { createServer } from 'node:http';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';
import { Server } from 'socket.io';

const app = express();
const server = createServer(app);
const io = new Server(server);

const __dirname = dirname(fileURLToPath(import.meta.url));

app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

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

server.listen(3000, () => {
  console.log('server running at http://localhost:3000');
});

请注意，我通过传递 server（HTTP 服务器）对象来初始化 socket.io 的新实例。然后，我监听 connection 事件以获取传入的套接字并将其记录到控制台。

现在在 index.html 中，在 </body>（结束 body 标签）之前添加以下代码段

ES6

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
</script>

ES5

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

这就是加载 socket.io-client 所需的全部操作，它会公开一个 io 全局变量（以及端点 GET /socket.io/socket.io.js），然后连接。

如果您想使用客户端 JS 文件的本地版本，您可以在 node_modules/socket.io/client-dist/socket.io.js 中找到它。

提示

您也可以使用 CDN 而不是本地文件（例如 <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>）。

请注意，我在调用 io() 时没有指定任何 URL，因为它默认尝试连接到提供页面的主机。

注意

如果您在反向代理（如 apache 或 nginx）后面，请查看相关文档。

如果您将应用程序托管在网站根目录之外的文件夹中（例如 https://example.com/chatapp），那么您还需要在服务器和客户端中指定路径。

如果您现在重新启动进程（通过按 Control+C 并再次运行 node index.js），然后刷新网页，您应该会看到控制台打印“用户已连接”。

尝试打开多个选项卡，您将看到多个消息。

每个套接字还会触发一个特殊的 disconnect 事件

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

然后，如果您多次刷新选项卡，您就可以看到它在起作用。

信息

CommonJS

您可以在浏览器中直接运行此示例，地址为

• CodeSandbox
• StackBlitz

ES 模块

您可以在浏览器中直接运行此示例，地址为

• CodeSandbox
• StackBlitz