为什么用 react.js 没有响应 socket.io

Question

服务器端：

const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const axios = require("axios");
const port = process.env.PORT || 4001;
const index = require("./routes/index");
const app = express();
app.use(index);
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), 10000);
  socket.on("disconnect", () => {
    console.log("Client disconnected");
  });
});


const getApiAndEmit = async socket => {
  try {
    const res = await axios.get(
      "https://api.darksky.net/forecast/db057094f57ede5e1f8d33d5e528e4b3/30.9871097,34.9408864"
    );

    let temp = (((res.data.currently.temperature - 32) * 5) / 9).toFixed(2);
    socket.emit("FromAPI", temp);
  } catch (error) {
    console.error(`Error: ${error.code}`);
  }
};

server.listen(port, () => console.log(`Wee wee i'm on port ${port}`));

客户端：

import React, { Component } from "react";
import socketIOClient from "socket.io-client";

class App extends Component {
  constructor() {
    super();
    this.state = {
      response: false,
      endpoint: "http://127.0.0.1:4001"
    };
  }

  componentDidMount() {
    const socket = socketIOClient(this.state.endpoint);
    socket.on("FromAPI", data => this.setState({ response: data }));
  }

  render() {
    const { response } = this.state;
    return (
      <div style={{ textAlign: "center" }}>
        {
        response ? 
        (<p>The temperature is {response} degrees</p>) 
        : 
        (<p>load load...</p>)
        }
      </div>
    );
  }
}

export default App;

2 信息：

[HMR] 等待来自 WDS 的更新信号... 下载 React DevTools 以获得更好的开发体验：fb.me/react-devtools

1 个错误：

http://127.0.0.1:4001/socket.io/?EIO=3&transport=polling&t=N4qdmGu

加载资源失败：net::ERR_CONNECTION_REFUSED

怎么了？

Answer 1

您应该尝试将客户端的端点设置为“http://localhost:4001”。