Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 component "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 '../../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">
            <IntlMessages id="sidebar.notification" />
        <div className="isoDropdownBody">
          {demoNotifications.map(notification => (
            <a className="isoDropdownListItem" key={notification.id}>
              <h5>{notification.name}</h5>
              <p>{notification.notification}</p>
        <a className="isoViewAllBtn">
          <IntlMessages id="topbar.viewAll" />
      </TopbarDropdownWrapper>
    return (
      <Popover
        content={content}
        trigger="click"
        visible={this.state.visible}
        onVisibleChange={this.handleVisibleChange}
        placement="bottomLeft"
        <div className="isoIconWrapper">
            className="ion-android-notifications"
            style={{ color: customizedTheme.textColor }}
          <span>{demoNotifications.length}</span>
      </Popover>
export default connect(state => ({
  ...state.App.toJS(),
  customizedTheme: state.ThemeSwitcher.toJS().topbarTheme
}))(TopbarNotification);
                you can look into server sent events (SSE) to achieve what you want. w3schools.com/html/html5_serversentevents.asp. Another option is websocket but it is more complex than SSE
– cdoshi
                Feb 27, 2019 at 7:38
                nice, I cant seem to find any information how to do this with asp.net web api 2 and react.
– Luis Valencia
                Feb 27, 2019 at 7:53
                I am not really familiar with asp.net but there are articles describing how to tpeczek.com/2017/02/server-sent-events-sse-support-for.html
– cdoshi
                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.com/server-sent-event-aspnet-core-a42dc9b9ffa9
– Luis Valencia
                Feb 27, 2019 at 8:28
                Depends on what you want to achieve. If you want duplex communication (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
                Feb 27, 2019 at 8:50
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.com/@gethylgeorge/using-socket-io-in-react-redux-app-to-handle-real-time-data-c0e734297795, including a git repo: https://github.com/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 component loads. Here is the relevant snippet from the example repo: https://github.com/Gethyl/RealTimeTodo/blob/f6c19b175977127c4a542882c75b76836b4a5ba4/src/js/components/Layout.js#L41
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.