在 react 和 node 中设置 socket io

Posted 2023-04-18

【中文标题】在 react 和 node 中设置 socket io

【英文标题】：Setup socket io in react and node

【发布时间】：2021-04-29 00:40:50

【问题描述】：

尝试为我的反应和节点应用程序实现套接字。 有人可以告诉我，我做错了什么。 在 Node 中，我可以访问 io.on 的唯一方法是使用新的服务器（http）。 在 Client 中，socket 对象执行控制台日志，但连接的属性为 false。

--我没有连接到socket，什么也没有发生（“用户连接”不是console.log in node）

节点

require("./config/mysql");
require("dotenv").config();
const express = require("express");
const http = require("http");
const cors = require("cors");

const app = express();
const server = http.createServer(app);
// const io = require("socket.io")(server);

const  Server  = require("socket.io");
const io = new Server(http);

io.on("connection", (socket) => 
 console.log(socket);
  console.log("user connected");

 socket.on("disconnect", () => 
console.log("user disconnected");
);
);

app.use(express.json());
app.use(cors());

const PORT = process.env.PORT || 5001;
server.listen(PORT, () => console.log(`Server running on port $PORT`));

反应

import React,  useState, useEffect  from "react";
import  useSelector  from "react-redux";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import "./Chat.css";
import ChatSingleMessage from "../../components/ChatSingleMessage/ChatSingleMessage";
import  io  from "socket.io-client";

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

const Chat = () => 


 useEffect(() => 
   socket.on("connect", () => 
   console.log("connect");
   );

     console.log(socket);


 , []);

    return ( JSX Stuff );
 ;
 export default Chat;

【问题讨论】：

你的错误是什么？您可以编辑并添加到您的问题中吗？

我没有连接到套接字，节点不 clg "user connected"

你为什么要评论 require socket io 这一行？

只是为了展示，我尝试了两种方法，它们都不起作用

【参考方案1】：

只需要改用 2.3.0 版本