如何在Next js中使用websockets

npm install socket.io

import { Server } from "socket.io";

export default function handler(req, res) {
  if (!res.socket.server.io) {
    const io = new Server(res.socket.server);
    io.on("connection", (socket) => {
      console.log("Client connected");
      
      socket.on("message", (data) => {
        console.log("Received message:", data);
        // 处理接收到的消息
      });
      
      socket.on("disconnect", () => {
        console.log("Client disconnected");
      });
    });
    res.socket.server.io = io;
  }
  
  res.end();
}

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

export default function MyPage() {
  useEffect(() => {
    const socket = io();
    
    socket.on("connect", () => {
      console.log("Connected to server");
      
      socket.emit("message", "Hello server");
    });
    
    socket.on("disconnect", () => {
      console.log("Disconnected from server");
    });
    
    return () => {
      socket.disconnect();
    };
  }, []);
  
  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
}

const http = require("http");
const { createServer } = require("next");

const app = createServer();
const server = http.createServer(app);

app.prepare().then(() => {
  server.listen(3000, (err) => {
    if (err) throw err;
    console.log("> Ready on http://localhost:3000");
  });
  
  server.on("upgrade", (req, socket, head) => {
    app.getRequestHandler()(req, socket, head);
  });
});