Nextjs 和套接字 IO

Question

希望你今天过得愉快！我正在学习 Socket.IO，当然网上有教程可用，但我在旅途中遇到了障碍，在教程中似乎一切正常，但当我尝试时，我不知道为什么会这样，所以基本上我想腾出空间，然后每次有人加入房间时，我都会收到回复（在服务器中），i got the respond 但为什么我会收到多个回复？当房间里只有我自己时..

这是我在 server/index.js

中的代码

const express = require("express");
const socketio = require("socket.io")
const http = require("http");
const cors = require("cors");

const PORT = process.env.PORT || 5000;

const router = require("./router");

const app = express();
const server = http.createServer(app);
const io = socketio(server);

app.use(cors());
app.use(router);

io.on("connection", (socket) => {
  console.log("New connection establish!");

  socket.on("disconnect", () => {
    console.log("User left the room!");
  });
});

server.listen(PORT, () => console.log(`Server started on ${PORT}`));

这是我在 server

收到的包裹 json

{
  "name": "myserver",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "myname",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "socket.io": "^2.2.0",
    "nodemon": "^2.0.12"
  }
}

这是我的 front end

import React, { useState, useEffect } from "react";
import io from "socket.io-client";
let socket;

export default function index({ data }) {
  console.log(data);
  const ENDPOINT = "localhost:5000";
  useEffect(() => {
    setRoom(data.room);
    setName(data.name);
    socket = io(ENDPOINT);
    console.log(socket);
  }, []);
  const [room, setRoom] = useState("");
  const [name, setName] = useState("");
  if (name == "") {
    return null;
  }
  return (
    <div className="bg-lightgrey min-h-screen flex justify-center items-center flex-row">
      <div className="container mx-auto max-w-sm py-10">
        <div className="rounded-md shadow-lg py-4 px-4 bg-white">
          <p className="text-black font-bold text-3xl">{room}</p>
          <p>{name}</p>
        </div>
      </div>
      <div className="ml-2 container mx-auto max-w-sm py-10">
        <div className="rounded-md shadow-lg py-4 px-4 bg-white">
          <p className="text-black font-bold text-3xl">{room}</p>
          <p>{name}</p>
        </div>
      </div>
    </div>
  );
}

export async function getServerSideProps({ query }) {
  // Fetch data from external API
  const data = await query;
  // Pass data to the page via props
  return { props: { data } };
}

这是我在终端中得到的回复

教程使用的是reactjs，而我using nextjs，有什么不同吗？对不起，如果我的英语不好，希望你们能理解..

Answer 1

我以某种方式修复了它，我认为这是因为我的 socket.io 和 socket.io-client 版本不同。

Nextjs 和套接字 IO

Nextjs and Socket IO

socket.io

next.js