Как организовать передачу данных в React получаемых по websocket?

Question

[semki096]

Есть сервис с socket API. Подключиться к нему можно с сервера (с клиента нет). То есть как я понимаю мне нужно получить эти данные на сервере. Я использую эту библиотеку https://github.com/websockets/ws и поднимаю клиент на сервере, получаю данные:

const WebSocket = require('ws');
    const  ws  =  new  WebSocket ( ' wss://stream.... ' , {
    perMessageDeflate :  false 
    });
    ws.on('message', function incoming(data) {
        console.log(data);
    });

Вопрос. Как теперь мне эти данные передать в мой React компонент? Насколько я понимаю, мне надо создать сервер, в доках есть пример:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});

И уже в компоненте принимать данные как будто это обычный js? Это правильный подход для Reacta, или может быть есть какие-то тонкости?

Answer 1

[Klein Maximus]

На стороне сервера можно делать что угодно. Можно самостоятельно все сделать, можно использовать что-то типа https://socket.io/

На клиенте нужно подписаться на обновления сокета, например через useEffect связав с данными в useState.
Еще можно обернуть подключение в провайдер React Context.

Comments

[semki096]

спасибо за помощь