Соединение с socket.io возвращает пустой массив.Способы получения данных в React без перезагрузки страницы?

Question

Я создаю расширение Chrome в React. Я пытаюсь загрузить данные через socket.io. Я не получил никаких ошибок, но массив пуст.

Я должен установить заголовок и токен, но я не знаю, где это сделать на сервере app.js. Где я могу установить:

const token = '12345'

headers: {
  'Authorization': `Bearer $ {token}`
}

Как мне установить port на сервере app.js и конечную точку на клиенте app.jsx, если я создаю chrome extension?

Есть ли другой способ (кроме socket.io) получать данные в методе componentDidMount() в React без перезагрузки страницы?

Когда я иду по адресу http://127.0.0.1:4001, console.log отображает мне New client connected и Error: undefined

Сервер

// app.js

const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const axios = require("axios");
const port = process.env.PORT || 4001;/How port in `chrome extension?`
const index = require("./routes/index");
const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server); // < Interesting!
const token = "12345"; 


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://b.application.com/api/v1/scores?expand=createdBy"
      ); // Getting the data from DarkSky
      socket.emit("FromAPI", res.data); // Emitting a new message. It will be consumed by the client
    } catch (error) {
      console.error(`Error: ${error.code}`);
    }
  };

server.listen(port, () => console.log(`Listening on port ${port}`));

// index.js

const express = require("express");
const router = express.Router();
router.get("/", (req, res) => {
  res.send({ response: "I am alive" }).status(200);
});
module.exports = router;

Клиент

// app.jsx

import socketIOClient from "socket.io-client";

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      scores: []
      endpoint: "http://127.0.0.1:4001" /How endpoint in `chrome extension`?
    }
  }

componentDidMount() {
  const { endpoint } = this.state;
  const token = "12345"; 

  const socket = socketIOClient(endpoint);

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


  render () {
      <div>
      </div>
    )
  }
}

export default App;

Answer 1

Я решил это:

const getApiAndEmit = async socket => {
    try {
      const res = await axios.get(
        "https://b.application.com/api/v1/scores?expand=createdBy",
         headers: {
           Authorization: `Bearer ${token}`
         }
      ); 
      socket.emit("FromAPI", res.data); // Emitting a new message. It will be consumed by the client
    } catch (error) {
      console.error(`Error: ${error.code}`);
    }
  };

Answer 2

-----------Try Replacing app.js:- -----------------

const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const axios = require("axios");
const port = process.env.PORT || 4001;/How port in `chrome extension?`
const index = require("./routes/index");
const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server); // < Interesting!
const token = "12345"; 
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});
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("https://b.application.com/api/v1/scores?expand=createdBy", {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                "Access-Control-Allow-Origin": "*",
                'token': token
            }
        }); // Getting the data from DarkSky
        console.log("res.data:- "+JSON.stringify(res.data,null,4));
        socket.emit("FromAPI", res.data);  // Emitting a new message. It wil be consumed by the client
    } catch (error) {
        console.error(`Error: ${error.code}`);
    }
};

server.listen(port, () => console.log(`Listening on port ${port}`));

Answer 3

Попробуйте изменить app.jsx следующим образом:

import socketIOClient from "socket.io-client";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            scores: [],
            receivedData:[],
            endpoint: "https://b.application.com/api/v1/scores?expand=createdBy",
            token: "12345"
        }
        this.onDataReceived = this.onDataReceived.bind(this);
        this.socket = socketIOClient(this.state.endpoint, {
            extraHeaders: {
                Authorization: `Bearer ${this.state.token}`
            }
        });
        this.socket.on("FromAPI", this.onDataReceived);
    }
    onDataReceived(receivedData) {
        console.log("receivedData ", receivedData);
        this.setState({
            receivedData: receivedData
        });
    }
        render() {
            return(
                <div></div>
            )
    }
}
export default App;

---

Попробуйте изменить app.js: функция getApiAndEmit

замените строку: socket.emit ("FromAPI", res.data);

io.emit ("FromAPI", res.data);