node.js - 无法使用反应将socket.io与后端连接
问题描述
我是新手,开始学习socket.io
。我用express-generator
. _并回答但无法修复,所有代码都在下面给出。socket.io
React
信息:我已经从 bin/www 文件中导出服务器,并将其导入app.js
后端,所有模块版本都是最新的
var server = http.createServer(app);
exports.server = server;
“快递服务器”
var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
var cors = require("cors");
const { server } = require("./bin/www");
var io = require("socket.io")(server);
var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
var app = express();
// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");
app.use(cors());
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));
// Socket.io config
io.on("connection", (socket) => {
console.log("Connected");
});
app.use("/", indexRouter);
app.use("/users", usersRouter);
// catch 404 and forward to error handler
app.use(function (req, res, next) {
next(createError(404));
});
// error handler
app.use(function (err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get("env") === "development" ? err : {};
// render the error page
res.status(err.status || 500);
res.render("error");
});
module.exports = app;
“反应”
import React from "react";
import socket from "socket.io-client";
import "./App.css";
const ENDPOINT = "http://localhost:3000";
function App() {
const io = socket(ENDPOINT);
return (
<div className="App">
<h1>Working</h1>
</div>
);
}
export default App;
登录后台
GET /socket.io/?EIO=4&transport=polling&t=NRtAs89 404 14.138 ms - 1362
GET /socket.io/?EIO=4&transport=polling&t=NRtAsNq 404 8.662 ms - 1362
GET /socket.io/?EIO=4&transport=polling&t=NRtAtc3 404 10.450 ms - 1362
GET /socket.io/?EIO=4&transport=polling&t=NRtAtrY 404 15.608 ms - 1362
GET /socket.io/?EIO=4&transport=polling&t=NRtAv3j 404 13.641 ms - 1362
GET /socket.io/?EIO=4&transport=polling&t=NRtAvJH 404 10.490 ms - 1362
解决方案
服务器未侦听任何传入连接。据我从您的代码中可以看出,您没有启动服务器。这就是为什么前端给你一个404
找不到的原因。你必须打电话.listen()
为了简单起见,我将所有内容都放在一个文件中。您可以稍后将它们分开用于您的文件/bin/www/
const express = require('express');
// Initialize the app
const app = express();
// Initialize socket.io server
const server = require('http').createServer(app);
const io = require('socket.io')(server);
PORT = 3003
// Start the Server (socket.io + express)
server.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
更新:
如果要与 绑定socket.io
,express
则必须在调用之前绑定它,.listen()
否则socket.io
将无法启动。
刚刚express-generator
自己测试过。您需要将socket.io
逻辑移动到/bin/www
. 如下所示:
const server = require('http').createServer(app);
const io = require('socket.io')(server);
边注:
就个人而言,express-generator
如果要与socket.io
. express-generator
为您提供了一个严格的样板文件,其中无疑包含许多与您的应用程序无关的内容。加上模板仍在使用var
来分配变量。ES6 已经存在 6 年了。
推荐阅读
- php - 匹配在数据库中获取的用户名和密码 - Jquery
- python - str/int 乘法的 Python 问题
- node.js - TypeError User.findOne 不是函数
- speech-recognition - CMUSphinx 训练声学模型精度非常低
- php - 如何在提交前创建同意复选框:
- javascript - 绑定 'this' Angular / Javascript 时遇到问题
- python - 访问嵌套字典中的数据
- python-3.x - 如何使用 pandas 将 csv 文件读入数据框
- javascript - 如果字符串以某些值开头,有没有办法排除它?
- django - 显示来自查询集的所有内容,而不是仅显示一个元素