Блог

Я новичок и начинаю учиться socket.io . Я создал свой серверный express-generator сервер, я установил все необходимые зависимости, и сервер работает нормально без ошибок, однако, когда я пытаюсь подключиться socket.io из интерфейса, React он выдает много ошибок, и я не могу подключиться к connect, я видел все вопросы и ответы, но не могу это исправить, весь код приведено ниже.

информация: я экспортировал сервер из файла 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=4amp;transport=pollingamp;t=NRtAs89 404 14.138 ms - 1362
GET /socket.io/?EIO=4amp;transport=pollingamp;t=NRtAsNq 404 8.662 ms - 1362
GET /socket.io/?EIO=4amp;transport=pollingamp;t=NRtAtc3 404 10.450 ms - 1362
GET /socket.io/?EIO=4amp;transport=pollingamp;t=NRtAtrY 404 15.608 ms - 1362
GET /socket.io/?EIO=4amp;transport=pollingamp;t=NRtAv3j 404 13.641 ms - 1362
GET /socket.io/?EIO=4amp;transport=pollingamp;t=NRtAvJH 404 10.490 ms - 1362
 

Регистрируется в интерфейсе консоли

Сервер не прослушивает ни одно входящее соединение. Вы не запустили сервер, насколько я могу судить по вашему коду. Вот почему интерфейс выдает вам сообщение 404 not found. Вы должны вызвать .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 лет.