Socket.io-Клиент: Реагирует машинопись: Socket.io-клиент не прослушивает сервер

#node.js #reactjs #sockets #socket.io

Вопрос:

У меня есть серверный код, который выглядит следующим образом:

 import express, { Response } from "express";
import { Server, Socket } from "socket.io";
import { createServer, Server as S } from "http";
// import router from "./routes";

// ----
const app: express.Application = express();
// app.use(router);

app.get("/", (_req: any, res: Response) =>
  res.status(200).sendFile(__dirname   "/index.html")
);
const PORT: any = 3001 || process.env.PORT;
const server: S = createServer(app);
const io = new Server(server, {});

io.on("connection", (socket: Socket) => {
  console.log("we have a new connection");
  console.log(socket.id);
});
//
server.listen(PORT, () => {
  console.log(`The server is running on port: ${PORT}`);
});

 

В моем index.html это мой код:

 <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
    </script>
 

Когда я заходил в Интернет по адресу http://localhost:3001 я получаю журналы консоли, сокет.io прослушивание новых подключений. Что я хочу, так это использовать сервер socket.io-client react, работающий на порту 3000. Вот что я попробовал:

 import io from "socket.io-client";
const client = io("http://localhost:3001/").connect();
const App: React.FC<{}> = () => {
  return (
    <div className="app">
      <h1>Socket.io</h1>
    </div>
  );
};
 

Когда я был в гостях http://localhost:3000 на экране ничего не регистрируется, в чем, возможно, проблема?

Ответ №1:

После некоторого просмотра моего приложения react я понял, что проблема в cors том, что . Поэтому я установил cors на сервере, и все работало:

 const server: S = createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});
....