Как получить данные через socket.io-client?

Question

Не могу получить данные через socket.io-client. Я фронтенд, мне дали тестовое задание в котором бекенд уже был написан. Моя задача отобразить данные, которые меняются каждые 5 секунд. Кажется все перепробовала, ничего не получается. Возможно ошибка в бекенде, но я ничего в нем не понимаю. Помогите разобраться. Спасибо заранее!

Сервер.

'use strict';
const express = require('express');
const http = require('http');
const io = require('socket.io');
const cors = require('cors');

const FETCH_INTERVAL = 5000;
const PORT = process.env.PORT || 4000;

const tickers = [
  'AAPL', // Apple
  'GOOGL', // Alphabet
  'MSFT', // Microsoft
  'AMZN', // Amazon
  'FB', // Facebook
  'TSLA', // Tesla
];

function randomValue(min = 0, max = 1, precision = 0) {
  const random = Math.random() * (max - min) + min;
  return random.toFixed(precision);
}

function utcDate() {
  const now = new Date();
  return new Date(
    now.getUTCFullYear(),
    now.getUTCMonth(),
    now.getUTCDate(),
    now.getUTCHours(),
    now.getUTCMinutes(),
    now.getUTCSeconds()
  );
}

function getQuotes(socket) {
  const quotes = tickers.map((ticker) => ({
    ticker,
    exchange: 'NASDAQ',
    price: randomValue(100, 300, 2),
    change: randomValue(0, 200, 2),
    change_percent: randomValue(0, 1, 2),
    dividend: randomValue(0, 1, 2),
    yield: randomValue(0, 2, 2),
    last_trade_time: utcDate(),
  }));

  socket.emit('ticker', quotes);
}

function trackTickers(socket) {
  // run the first time immediately
  getQuotes(socket);

  // every N seconds
  const timer = setInterval(function () {
    getQuotes(socket);
  }, FETCH_INTERVAL);

  socket.on('disconnect', function () {
    clearInterval(timer);
  });
}

const app = express();
app.use(cors());
const server = http.createServer(app);

const socketServer = io(server, {
  cors: {
    origin: '*',
  },
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

socketServer.on('connection', (socket) => {
  socket.on('start', () => {
    trackTickers(socket);
  });
});

server.listen(PORT, () => {
  console.log(`Streaming service is running on http://localhost:${PORT}`);
});

Клиент

import './App.css';
import React, { useEffect } from 'react';
import io from 'socket.io-client';

function App() {
  useEffect(() => {
    const socket = io('http://localhost:4000/');
    socket.on('ticker', function (quotes) {
      console.log(quotes);
    });
  }, []);

  return;
}

export default App;

Answer 1

Тебе нужно сначала подключиться на сервер и отправить запрос с ивентом "start"

socket.on('connect', () => console.log(socket.connected));
socket.emit('start')

Удачи на собеседовании в Incode Group. Но, если тебя возьмут, а меня нет, будешь должна кофе)

Answer 2

Ребята, я делаю похожую штуку, обернул все в useRef и хочу получившийся объект красиво нарисовать в табличку.

Но проблема в том, что useEffect не отдаёт наружу эти quotes. А если сначала создать что-то вроде:

const [data, setData] = useState([])

и потом внутри useState написать:

setData(quotes)

то обновление начинает происходить не раз в пять секунд, а как-то дёргано, то несколько раз в секунду, то один, причём с неравномерной периодичностью.

То же самое происходит, если я напишу код вроде:

const [data, setData] = useState([])

socket.on('connect', () => console.log(socket.connected));
socket.emit('start')

socket.on('ticker', function (quotes) {

setData(quotes)    

    });

В этом случае обновление тоже происходит какими-то рывками - цифры постоянно мелькают, хаотично меняются и так далее. Хотя по идее сервер раз в пять секунд отдает массив, а я пишу его в свой массив.

Помогите, как сделать красиво :)

БЛОГ НА HUSL

Как получить данные через socket.io-client?

Ответы (2 шт):