Question

如何在React中使用socket.io？我的客户有以下代码：

import React, { Component } from "react"
import io from "socket.io-client"
import "./App.css"

const socket = io()
console.log(socket)

class App extends Component {
    render() {
        return (
            // ...
        )
    }
}

export default App

对于我的服务器：

const express = require("express"),
    app = express(),
    http = require("http").Server(app),
    io = require("socket.io")(http)

io.on("connection", socket => {
    console.log("New connection")
})

http.listen(8000, () => {
    console.log("Started!")
})

但是我一直收到此错误：

POST http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MdZyD8L 404 (Not Found)

我做错了什么？谢谢。

PS：要启动该应用程序，请执行npm run start，对于服务器node server/server.js

Answer 1

尚未真正运行代码；但是，您是否注意到错误中的端口是 3000 而不是初始化服务器以监听的 8000 ？

读取https://socket.io/docs/client-api/时，它说默认是窗口位置，知道有反应，您可能在端口3000上运行，端口3000与错误中的端口3000相同

在初始化套接字对象时尝试设置端口

const socket = io("localhost:8000");

Answer 2

下面是用于通过套接字连接的代码，如果您希望在页面渲染后再通过套接字进行连接，则将其连接，然后将其写入componentDidMount。

import React, { Component } from "react"
import io from "socket.io-client"
import "./App.css";

class App extends Component {

componentDidMount(){
let socket = io.connect("http://localhost:8000");
   console.log(socket)
}
    render() {
        return (
            // ...
        )
    }
}

export default App

例如，您可以通过链接： https://medium.freecodecamp.org/how-to-create-a-realtime-app-using-socket-io-react-node-mongodb-a10c4a1ab676

将socket.io与React一起使用

2 个答案: