跳至主要内容

如何在 Next.js 中使用

本指南介绍如何在 Next.js 应用程序中使用 Socket.IO。

服务器​

Socket.IO 服务器可以与 Next.js 共享相同的底层 HTTP 服务器。您只需在项目的根目录中创建一个 server.js 文件

server.js
import { createServer } from "node:http";
import next from "next";
import { Server } from "socket.io";

const dev = process.env.NODE_ENV !== "production";
const hostname = "localhost";
const port = 3000;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handler = app.getRequestHandler();

app.prepare().then(() => {
  const httpServer = createServer(handler);

  const io = new Server(httpServer);

  io.on("connection", (socket) => {
    // ...
  });

  httpServer
    .once("error", (err) => {
      console.error(err);
      process.exit(1);
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`);
    });
});

server.js 文件成为应用程序的入口点

{
  "scripts": {
-   "dev": "next dev",
+   "dev": "node server.js",
    "build": "next build",
-   "start": "next start",
+   "start": "NODE_ENV=production node server.js",
    "lint": "next lint"
  }
}

就这样！

参考：https://nextjs.net.cn/docs/pages/building-your-application/configuring/custom-server

提示

这适用于 App 路由器和 Pages 路由器。

警告

来自 Next.js 文档

  • 在决定使用自定义服务器之前，请记住，只有在 Next.js 的集成路由器无法满足您的应用程序需求时才应使用它。自定义服务器将删除重要的性能优化，例如无服务器函数和 自动静态优化。
  • 自定义服务器无法部署在 Vercel 上。
  • 独立输出模式，不跟踪自定义服务器文件，此模式输出一个单独的最小服务器.js 文件。

客户端​

在客户端，我们 React 指南 中的所有提示都适用。

唯一的区别是您需要从服务器端渲染 (SSR) 中排除 Socket.IO 客户端

结构

├── src
│ ├── app
│ │ └── page.js
│ └── socket.js
└── package.json
src/socket.js
"use client";

import { io } from "socket.io-client";

export const socket = io();
注意

"use client" 表示该文件是客户端捆绑包的一部分，不会被服务器端渲染。

参考：https://nextjs.net.cn/docs/app/building-your-application/rendering/client-components

src/app/page.js
"use client";

import { useEffect, useState } from "react";
import { socket } from "../socket";

export default function Home() {
  const [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 (
    <div>
      <p>Status: { isConnected ? "connected" : "disconnected" }</p>
      <p>Transport: { transport }</p>
    </div>
  );
}
注意

我们可以使用

const [isConnected, setIsConnected] = useState(socket.connected);

而不是

const [isConnected, setIsConnected] = useState(false);

useEffect(() => {
  if (socket.connected) {
    onConnect();
  }
  // ...
});

但这会触发 Next.js 编译器的一些警告，因为客户端渲染的页面可能与服务器端渲染的输出不匹配。

未捕获的错误：文本内容与服务器端渲染的 HTML 不匹配。

在上面的示例中，transport 变量是用于建立 Socket.IO 连接的低级传输，它可以是

如果一切顺利，您应该看到

Status: connected
Transport: websocket

然后，您可以使用以下方法在 Socket.IO 服务器和客户端之间交换消息

  • socket.emit() 发送消息
socket.emit("hello", "world");
  • socket.on() 接收消息
socket.on("hello", (value) => {
  // ...
});

就这样，感谢您的阅读！

返回示例列表