将 socket.io 与 React 一起使用答案

【问题标题】：Use socket.io with React将 socket.io 与 React 一起使用
【发布时间】：2019-04-03 16:05:26
【问题描述】：

如何在 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

【问题讨论】：

更改客户端const socket = io('http://localhost:8000'); console.log(socket);

标签： javascript reactjs socket.io

【解决方案1】：

还没有真正运行过代码；但是，您是否注意到错误中的端口是 3000 而不是您初始化要侦听的服务器的 8000？

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

初始化socket对象时尝试设置端口

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

【讨论】：

还有。确保在部署（如果这样做）时不要将其硬编码到 localhost:8000 。我有这个，我将我的应用程序部署到heroku ..然后我发现我的服务器没有连接......因为我把它从客户端硬编码到本地主机......如果你只是做 io() 它会“自动连接到窗口的位置”socket.io/docs/client-api

【解决方案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

【讨论】：