我应该为 SocketIO 创建一个特定的路由吗？

IT技术 javascript node.js reactjs sockets socket.io
2021-05-25 10:55:05

我是 Socket.IO 的新手，我做了文档的聊天教程和聊天应用程序的“作业”以了解它是如何工作的，现在我正在尝试使用 Socket 连接 NodeJS 服务器和 React 应用程序. 我花了一整天的时间尝试这样做，但我收到了这个错误：

GET http://localhost:4000/?EIO=4&transport=polling&t=NYW26Ea 404 (Not Found)

我的应用程序的意图是显示时间更新，我正在使用套接字每秒更新屏幕上的时间。这是我的Server.js文件，是的，它非常简单：

const express = require("express")
const http = require("http")
const socketIO = require("socket.io")
var cors = require('cors')

const PORT = 4000;
const routes = require("./routes/index")

const app = express()
app.use(cors())
app.use(routes)

const server = http.createServer(app)

const io = socketIO(server)

let interval

io.on("connection", (socket) => {
    console.log("New client connected!")
    if(interval) {
        clearInterval(interval)
    }
    interval = setInterval(() => getApiAndEmit(socket), 1000)
    socket.on("disconnect", () => {
        console.log("Client is disconnected")
        clearInterval(interval)
    })
})

const getApiAndEmit = socket => {
    const response = new Date()
    socket.emit("from-api", response)
}

app.listen(PORT, () => console.log(`Application up and running on ${PORT}`))

如果我访问我用 express 创建的路线，它工作正常。

这是我的App.js文件：

import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";
const ENDPOINT = "http://127.0.0.1:4000";

function App() {
  const [response, setResponse] = useState("");

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    socket.on("from-api", data => {
      setResponse(data);
    });
  }, []);

  return (
    <p>
      It's <time dateTime={response}>{response}</time>
    </p>
  );
}

export default App;

我应该为 SocketIO 创建一个路由还是什么？

2个回答

我应该为 SocketIO 创建一个路由还是什么？

不。当你这样做时：

const io = socketIO(server)

socket.io 库已经安装了它自己的路由处理程序，用于开始的路由/socket.io和它需要的任何其他路由。你不需要自己做。

但是，您确实遇到了问题，因为您将 socket.io 连接到您从未启动的服务器。

当你这样做时：

app.listen(PORT, () => console.log(`Application up and running on ${PORT}`))

这将创建一个新的 http 服务器，然后调用.listen()它并返回该新服务器。您需要捕获该服务器并将 socket.io 连接到它：

所以，替换这个：

const server = http.createServer(app)

const io = socketIO(server)

app.listen(PORT, () => console.log(`Application up and running on ${PORT}`))

有了这个：

const server = app.listen(PORT, () => console.log(`Application up and running on ${PORT}`))
const io = socketIO(server);

然后，您只需创建并启动一个 http 服务器，并将 Express 和 socket.io 连接到它。他们可以在同一个端口上共享同一个 http 服务器。Socket.io 将使用路由前缀/socket.io来区分自己的路由，一旦建立了给定的 socket.io 连接，该特定连接就会将协议切换到 webSocket 协议（在其顶部带有 socket.io 数据帧）并且不再是不再使用http。

代替：

app.listen(PORT, () => console.log(`Application up and running on ${PORT}`))

用这个：

server.listen(PORT, () => console.log(`Application up and running on ${PORT}`))

原因：您分配给socketIO的服务器实例与您正在侦听的服务器实例不同。

使用 express 您可以像这样传递服务器实例：

var express   = require('express');
var app       = express();
...
...
...
var server    = app.listen(PORT);
var io        = require('socket.io').listen(server);

io.sockets.on('connection', function (socket) {
  ...
});

你可以参考这个：Express.js - app.listen vs server.listen

其它你可能感兴趣的问题
上一篇如何在react中用 axios 开玩笑测试异步操作？- 第2部分 下一篇应用未运行时不显示 PWA 推送通知