使用 reactjs 没有响应 socket.io

Question

two info: [HMR] Waiting for update signal from WDS...

Download the React DevTools for a better development experience: fb.me/react-devtools

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

Failed to load resource: net::ERR_CONNECTION_REFUSED what should be done to make this work?

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}`));

than

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;

Answer 1

You have to first connect to the socket server on the client side so for that add this

socket.on('connect', function(){});

before your event listener.

socket.on("FromAPI", data => this.setState({ response: data }));