无法从使用 SocketIO 的反应客户端连接到 nodejs 服务器

Question

我正在学习socketIO ，我设置并运行了一个基本的nodejs服务器。 我的问题是，当我尝试使用我的nextJS应用程序连接到服务器时，什么也没有发生。 没有错误发生，我想在连接时打印的消息也没有出现。

我的代码：

后端文件夹中的server.js

const express = require('express');
const app = express();
const server = require('http').Server(app);
const { v4: uuidV4 } = require('uuid');
const cors = require('cors');

const io = require('socket.io')(server, {
  cors: true,
  origins:["http://localhost:3000"]
});

app.use(cors());
app.options('*', cors());

io.on('connection', socket => {
  socket.on('test',()=>{
   console.log(' i am a test') //does not appear 
  })
  
})

//I ALSO TRIED 
//io.on('test',()=>{
   //console.log('I am a test');
//})

server.listen(5000);

然后在我的index.js前端文件夹中的 nextJS 应用程序中

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

const ENDPOINT = "http://localhost:5000";
const socket = io.connect(ENDPOINT);

  export default function Home() {

    useEffect(()=>{

     socket.emit('test');
    },[]);
    
   ...rest of code 
   
 }

所以在我的前端应用程序中，我向服务器发出了“测试”事件，而服务器没有控制台。记录连接响应

感谢您的帮助，因为我是 socketIO 的新手

Answer 1

您可以在单独的文件中创建一个帮助程序 function 来管理连接、监听事件和发出事件。 这是一个相同的例子：

export const socketConnection = io => {
  io.on("connection", socket => {
    console.log("Started socket connection!");

    socket.on("message", receivedMessage => {
      console.log("Socket message received", receivedMessage);
    });

    socket.on("subscribe", async room => {
      try {
        console.log(`In room`, socket.rooms);
        await socket.join(room);
        console.log(`[socket] Room Joined Successfully : ${room}`, room);
        await io.to(room).emit("subscribeSuccess", `Subscribed successfully ${socket.id}: room - ${socket.rooms}`);
      } catch (e) {
        console.log(`[socket] Error in Room Joining : ${room} : ${e}`, e);
        socket.emit("error", "couldnt perform requested action");
      }
    });

    socket.on("unsubscribe", async room => {
      try {
        await socket.leave(room);
        console.log(`[socket] Room Left Successfully : ${room}`, room);
      } catch (e) {
        console.log(`[socket] Error in Room Leaving : ${room} : ${e}`, e);
        socket.emit("error", "couldnt perform requested action");
      }
    });

  });
};

然后在app.js中你可以导入并启动一个套接字服务器。

import { socketConnection } from "@helpers";

const io = new Server(server, {
  transports: ["websocket", "polling"],
  allowEIO3: true
});
socketConnection(io);

并从客户端连接到套接字使用这个：

import io from 'socket.io-client';

const ENDPOINT = "http://localhost:5000";
const socket = io(ENDPOINT);