socket.io - Nextjs 和 Socket IO

问题描述

希望你有一个美好的一天！我正在学习 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}`));

这是我的包 jsonserver

{
  "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，它有什么不同吗？对不起，如果我英语不好，希望你们能理解..

标签： socket.ionext.js

socket.io - Nextjs 和 Socket IO

问题描述

解决方案

推荐阅读