react 如何将数据从后端推送到前端

Question

我不确定这是否是正确的提问方式，因为我不是 React 方面的专家。在 .NET 中存在一种称为信号 R 的东西，您可以从服务器将数据推送到客户端，而客户端不必每隔 X 秒从服务器拉取数据。

我正在开发一个带有通知栏的 React 应用程序，这个通知栏应该在服务器上的某些内容完成处理时从服务器获取消息。

后端是web api 2、前端react with redux.

我的问题是，当服务器上发生某些事情时，我如何制作这个组件"Refresh"，我只是希望我不必使用 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);

Answer 1

套接字可能是最直接的答案。看看 socket.io，它们可以很容易地实现您正在寻找的内容。

这是一个使用套接字构建 redux-react 应用程序的示例：https://medium.com/@gethylgeorge/using-socket-io-in-react-redux-app-to-handle-real-time-data-c0e734297795, including a git repo: https://github.com/Gethyl/RealTimeTodo。他们可能使用 node.js 作为后端，但 socket.io 与后端无关。

您只需在加载组件时将存储连接到您的套接字。以下是示例回购中的相关片段：https://github.com/Gethyl/RealTimeTodo/blob/f6c19b175977127c4a542882c75b76836b4a5ba4/src/js/components/Layout.js#L41

react 如何将数据从后端推送到前端

How to push data from backend to frontend in react

javascript

asp.net-web-api

reactjs

asp.net-web-api2

redux