socket.io 连接不适用于 react.js

Posted 2023-02-16

【中文标题】socket.io 连接不适用于 react.js

【英文标题】：socket.io connection is not working with react.js

【发布时间】：2019-01-11 08:11:25

【问题描述】：

我有一个 reactjs 项目和 node.js 项目。现在我需要在我的项目中设置 socket.io。但设置后我收到 404 错误。我厌倦了使用交叉和其他方法，但我仍然得到相同的 404 错误。提前致谢

Index.js

const express = require("express");
const port = 3000;
const app = express();
const url = require("url");
var http = require('http').Server(app);
var io = require('socket.io')(http);

const origin = url.parse(`http://$process.env.CII_RESTURL || "localhost"/`)
.origin;
var cors = require("cors");
app.use(cors());
var bodyParser = require("body-parser");

var path = require("path");
app.use(bodyParser.urlencoded( extended: true ));
app.use(bodyParser.json());
var router = express.Router();
app.set("port", port);
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
app.use(express.json());
app.use(express.static(__dirname + "./../../"));
app.use(function(req, res, next) 
res.header("Access-Control-Allow-Origin", "*");
res.header(
    "Access-Control-Allow-Headers",
    "Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With"
);
res.header("Access-Control-Allow-Origin", req.headers.origin);
res.header('Access-Control-Allow-Credentials', true);
next();
);
// create a GET route
app.get("/express_backend", (req, res) => 
res.send( express: "YOUR EXPRESS BACKEND IS CONNECTED TO REACT" );
);

app.use("/api", router);
var getTags = require("./routes/search");

router.get("/jobSearch", plainSearch.SearchByJob);
// console.log that your server is up and running
app.listen(port, () => 
console.log(`Listening on port: $port`);
console.log("Application live on the hostname: " + origin);
);

router.get("/",function(req,res)
res.send("hi")
)
//io.origins(cors());
io.on('connection', function(socket)
console.log("sd");
socket.on('subscribeToTimer', function(msg)
    console.log('message: ' + msg); 
);
);

反应组件

import io from 'socket.io-client';

const socket = io("http://localhost:3000/",
    path: '/api'
);

    subscribeToTimer(cb) 
    alert("sd");
    socket.on('timer', timestamp => cb(null, timestamp));
    socket.emit('subscribeToTimer', 1000);
 

在构造函数中调用 subscribeToTimer 函数。

【问题讨论】：

如果你使用过react组件和生命周期方法，你能发布吗？

【参考方案1】：

您似乎没有使用正确的反应生命周期方法来监听套接字。始终使用componentDidMount() 来监听套接字或发送 API 请求。试试这样的。

   subscribeToTimer(cb) 
        alert("sd");
        socket.on('timer', timestamp => cb(null, timestamp));
        socket.emit('subscribeToTimer', 1000);
          

     componentDidMount()
        subscribeToTimer(cb);