javascript - 使用 reactjs 没有响应 socket.io

Question

两个信息：[HMR] 等待来自 WDS 的更新信号...

下载 React DevTools 以获得更好的开发体验：fb.me/react-devtools

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

加载资源失败：net::ERR_CONNECTION_REFUSED 应该怎么做才能使这项工作？

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;

标签： javascriptnode.jsreactjsexpresssocket.io

Answer 1

您必须首先连接到客户端的套接字服务器，以便添加这个

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

在您的事件侦听器之前。

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