javascript - How to push data from backend to frontend in react - Stack Overflow

admin管理员组

文章数量:1356064

I am not sure if this is the right way to ask as I am not an expert in react. In .NET there exists something called signal R, where from the server you can push data to the clients, without the clients having to pull data from the server every X seconds.

I am developing a react app with a notifications bar, this notification bar is supposed to get messages from the server when something on the server has finished processing.

The backend is web api 2, front end react with redux.

My question its, How can I make this ponent "Refresh" when something happens on the server, I just hope I dont have to use setTimeout

import React, { Component } from 'react';
import { Popover } from 'antd';
import { connect } from 'react-redux';
import IntlMessages from '../../ponents/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);

I am not sure if this is the right way to ask as I am not an expert in react. In .NET there exists something called signal R, where from the server you can push data to the clients, without the clients having to pull data from the server every X seconds.

I am developing a react app with a notifications bar, this notification bar is supposed to get messages from the server when something on the server has finished processing.

The backend is web api 2, front end react with redux.

My question its, How can I make this ponent "Refresh" when something happens on the server, I just hope I dont have to use setTimeout

import React, { Component } from 'react';
import { Popover } from 'antd';
import { connect } from 'react-redux';
import IntlMessages from '../../ponents/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);

• javascript
• reactjs
• asp-web-api
• redux
• asp-web-api2

Share Improve this question Follow asked Feb 27, 2019 at 7:32 Luis ValenciaLuis Valencia 34.1k9999 gold badges311311 silver badges532532 bronze badges 6

• you can look into server sent events (SSE) to achieve what you want. w3schools./html/html5_serversentevents.asp. Another option is websocket but it is more plex than SSE – cdoshi Commented Feb 27, 2019 at 7:38
• nice, I cant seem to find any information how to do this with asp web api 2 and react. – Luis Valencia Commented Feb 27, 2019 at 7:53
• 1 I am not really familiar with asp but there are articles describing how to tpeczek./2017/02/server-sent-events-sse-support-for.html – cdoshi Commented Feb 27, 2019 at 8:04
• I also found this, just a quick question is WebSockets a better technology for this? according to this post, it looks like its more broadly accepted techblog.dorogin./server-sent-event-aspnet-core-a42dc9b9ffa9 – Luis Valencia Commented Feb 27, 2019 at 8:28
• 1 Depends on what you want to achieve. If you want duplex munication (chat app), then websockets is the way to go. If you just want updates from the server like stock price etc, then SSE is better suited. – cdoshi Commented Feb 27, 2019 at 8:50

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

Sockets are probably the most straightforward answer. Have a look at socket.io, they make it quite easy to implement exactly what you're looking for.

Here is an example of building a redux-react app with sockets: https://medium./@gethylgeorge/using-socket-io-in-react-redux-app-to-handle-real-time-data-c0e734297795, including a git repo: https://github./Gethyl/RealTimeTodo. They might use node.js for the backend, but socket.io is backend agnostic.

You just connect store to your sockets when your ponent loads. Here is the relevant snippet from the example repo: https://github./Gethyl/RealTimeTodo/blob/f6c19b175977127c4a542882c75b76836b4a5ba4/src/js/ponents/Layout.js#L41

本文标签： javascriptHow to push data from backend to frontend in reactStack Overflow