Socket.io Передача данных по GET-запросу с использованием Reactjs & Expressjs - PullRequest
0 голосов
/ 25 сентября 2018

Я использую socket.io для отправки данных в реальном времени с Express Server на Reactjs Client, но данные будут отправляться только по запросу Get от клиента React.

Код работает отлично, но когда ядобавить маршрутизацию к серверу Express и выбрать метод на стороне клиента, это не работает.

сторона сервера (server.js):

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const axios = require("axios");

const PORT = process.env.PORT || 8001;
const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/system/overview',(req,res) => {

io.on("connection", socket => {
console.log("New client connected"), setInterval(
() => getAndEmitData(socket),
1000
);
socket.on("disconnect", () => console.log("Client disconnected"));
});

const getAndEmitData = async socket => {
try {
const response = await axios.get(
  "https://api.darksky.net/forecast/927aa7bef57ca7b2422"
);
socket.emit("temp", response.data.currently.temperature);
} catch (error) {
console.error(`Error: ${error.code}`);
}
};
})
server.listen(PORT, () => console.log(`Listening on port ${PORT} ...`));

сторона клиента (компонент Overview.js):

import socketIOClient from "socket.io-client";
...
class Overview extends Component {
    constructor() {
    super();
    this.state = {
      response: false,
      endpoint: "http://localhost:8001"
    };
  }
  componentDidMount() {
    const { dispatch } = this.props;
    const { endpoint } = this.state;
    dispatch({
      type: 'profile/fetchAdvanced',
    });
    const socket = socketIOClient(endpoint);
    fetch('http://localhost:8001/system/overview', {
            method: 'get',
        })
        .then(res => res.json())
        .then(data => {
          socket.on("temp", data => this.setState({ response: data }));
        })
   }
  ...

Нет ошибки, но сервер не обрабатывает GET-запрос от реагирующего клиента, когда была выполнена функция ComponentDidMount!Каков наилучший способ сделать это?Спасибо ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...