Как протолкнуть данные из бэкэнда в интерфейс - PullRequest
Новая
       13

Как протолкнуть данные из бэкэнда в интерфейс

0 голосов
/ 27 февраля 2019

Я не уверен, правильно ли это спрашивать, потому что я не эксперт в реакции.В .NET существует нечто, называемое сигналом R, где с сервера вы можете передавать данные клиентам, при этом клиентам не приходится извлекать данные с сервера каждые X секунд.

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

Серверная часть - это веб-интерфейс API 2, интерфейсная часть реагирует с избыточным числом.

Мой вопросКак я могу сделать этот компонент "Обновить", когда что-то происходит на сервере, я просто надеюсь, что мне не нужно использовать setTimeout 

import React, { Component } from 'react';
import { Popover } from 'antd';
import { connect } from 'react-redux';
import IntlMessages from '../../components/utility/intlMessages';
import TopbarDropdownWrapper from './topbarDropdown.style';

const demoNotifications = [
  {
    id: 1,
    name: 'David Doe',
    notification:
      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner'
  },
  {
    id: 2,
    name: 'Navis Doe',
    notification:
      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner'
  },
  {
    id: 3,
    name: 'Emanual Doe',
    notification:
      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner'
  },
  {
    id: 4,
    name: 'Dowain Doe',
    notification:
      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner'
  }
];

class TopbarNotification extends Component {
  constructor(props) {
    super(props);
    this.handleVisibleChange = this.handleVisibleChange.bind(this);
    this.hide = this.hide.bind(this);
    this.state = {
      visible: false
    };
  }
  hide() {
    this.setState({ visible: false });
  }
  handleVisibleChange() {
    this.setState({ visible: !this.state.visible });
  }
  render() {
    const { customizedTheme } = this.props;
    const content = (
      <TopbarDropdownWrapper className="topbarNotification">
        <div className="isoDropdownHeader">
          <h3>
            <IntlMessages id="sidebar.notification" />
          </h3>
        </div>
        <div className="isoDropdownBody">
          {demoNotifications.map(notification => (
            <a className="isoDropdownListItem" key={notification.id}>
              <h5>{notification.name}</h5>
              <p>{notification.notification}</p>
            </a>
          ))}
        </div>
        <a className="isoViewAllBtn">
          <IntlMessages id="topbar.viewAll" />
        </a>
      </TopbarDropdownWrapper>
    );
    return (
      <Popover
        content={content}
        trigger="click"
        visible={this.state.visible}
        onVisibleChange={this.handleVisibleChange}
        placement="bottomLeft"
      >
        <div className="isoIconWrapper">
          <i
            className="ion-android-notifications"
            style={{ color: customizedTheme.textColor }}
          />
          <span>{demoNotifications.length}</span>
        </div>
      </Popover>
    );
  }
}

export default connect(state => ({
  ...state.App.toJS(),
  customizedTheme: state.ThemeSwitcher.toJS().topbarTheme
}))(TopbarNotification);

1 Ответ

0 голосов
/ 04 марта 2019

Сокеты, пожалуй, самый простой ответ.Взгляните на socket.io, они позволяют довольно легко реализовать именно то, что вы ищете.

Вот пример создания приложения redux-реагировать с сокетами: https://medium.com/@gethylgeorge/using-socket-io-in-react-redux-app-to-handle-real-time-data-c0e734297795,, включаярепозиторий git: https://github.com/Gethyl/RealTimeTodo. Они могут использовать node.js для бэкэнда, но socket.io не зависит от бэкэнда.

Вы просто подключаете магазин к своим розеткам при загрузке компонента.Вот соответствующий фрагмент из примера репо: https://github.com/Gethyl/RealTimeTodo/blob/f6c19b175977127c4a542882c75b76836b4a5ba4/src/js/components/Layout.js#L41

...