Как обновить данные в componentDidMount, если данные идут из socket-а?

Question

[semki096]

Данные планирую обновлять как-то так

componentDidMount() {
			this.setState({
				data: вот сюда надо както доставить новые данные
			});
		}

А новые данные получаю из сокета так

const ws = new WebSocket("ws://api...");
ws.onmessage = responce => console.log(responce.data);

То есть мне надо как-то взять последний message из сокета и добавить его в this.state.data и сделать это правильно Причём данные надо обновлять по событию onmessage (но это уже другой вопрос). Буду благодарен за помощь.

Comments

[Klein Maximus]

Почему именно componentDidMount, и чем хуки не устраивают?

[semki096]

Klein Maximus, я недавно начал реакт смотреть, насколько я понимаю мне надо дождаться пока отрендерится предыдущее значение, и после этого вносить изменения и так по кругу, насколько я понял componentDidMoun именно после рендеринга запускает следующий шаг.

Answer 1

[Klein Maximus]

Типа такого:

class WS extends React.Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] };
    this.ws = new WebSocket("ws://api...");
  }

  componentDidMount() {
    this.ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
  }

  componentWillUnmount() {
    this.ws.close();
  }
}

или на хуках

import React, { useEffect, useState } from 'react';

function ws() {
  const [message, setMessages] = useState([]);

  useEffect(() => {
    const ws = new WebSocket("ws://api...");
    ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
    return () => ws.close();
  }, []);
}

Как можно заметить, на хуках логика не размазана по всему компоненту, а находится в одном месте.

А еще лучше обернуть все это в React Context и подписываться на него в нужных компонентах через useContext (или Consumers). Тогда и очередь сообщений модно копить со всеми нужными мета-данными (например, временем получения).

Comments

[semki096]

спасибо за помощь, интересно, буду пробовать.

[Klein Maximus]

semki096, не забудьте про закрытие соединения (обновил ответ)

[semki096]

Спасибо буду изучать, вы мне очень помогли. Есть над чем поработать, пока не всё понятно. Пытаюсь под себя такую штуку сделать по аналогии https://codesandbox.io/s/github/rrag/react-stockch...

[semki096]

Klein Maximus, А не подскажете по этой строке (выдает NULL), может посоветуете где почитать

this.ws = new WebSocket("ws://reactchart:8080");
			console.log(this.ws); //выдает NULL

[Klein Maximus]

semki096, https://learn.javascript.ru/websocket

а если вместо
console.log(this.ws);
вставить
this.ws.onopen = (e) => console.log(this.ws);

Еще можно попробовать перенести создание сокета из конструктора в componentDidMount.

[semki096]

Klein Maximus, да так работает, спасибо буду грызть гранит дальше))