display data from node module in real time using react

Question

I have a node module (data) that exports an object. This object has properties who's values change.

var data = require('data');
var count = data.count;

data.count is changing it's value (lets pretend it is seconds that are counting).

I use express and handlebars and i currently display the data like this:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Home', data: count });
});

Doing it this way requires the page to be refreshed to see the updated value. My question is: How can I display the value of count in real time without having to refresh the page?

I have been looking into React but I don't really understand how to set it up. I read some tutorials talking about the react module (nom install react) but there is not much documentation on how to use it. I understand the easy guide on the react website but that inserts react script on the client.

If someone can point me in the right direction that would be great.

Thank you.

UPDATE:

So I installed npm insatll react and npm install babel and created a component in react that looks like this (comp.jsx):

var React = require('react/addons');
var data = require('data');

var d = React.createClass({
    render: function() {
        return (
            <h1>{data.votes}</h1>
        );
    }
});

module.exports.Component = d;

I included this component in my routes file that now looks like this:

require('babel/register');
var React = require('react/addons');

var data = React.createFactory(require('comp.jsx').Component);

router.get('/', function(req, res, next) {
    var dataHtml = React.renderToString(data({}));
    res.render('index', { reactOutput: data });
});

The data is displayed in my handlebars template like this: {{{reactOutput}}}. The data is shown but still does not update in realtime, the page has to be refreshed to show the change of data.

Any ideas?

Don't have anything other that node, express-generator and handlebars. Open to anything that can give me my desired functionality. — Safinn
– Safinn, Commented Sep 12, 2015 at 13:40
This question is pretty broad. You're asking how to synchronize a property of a module between the server and client and how to render changing values in react without any code that does either, and how to detect changes to this property. — Brigand
– Brigand, Commented Sep 12, 2015 at 13:44
What i am saying is I don't know what code to use to do this functionality. I am open to adding whatever is needed to get the job done well. — Safinn
– Safinn, Commented Sep 12, 2015 at 13:47

François Richard · Accepted Answer · 2015-09-12 15:29:21Z

1

I would use socketio http://socket.io/ , each time your server new data you'll use socketio to send the new data to your clients model.

I suggest you use models on the client side, flux or backbone at least

edit:

You need two things:

A way to manage models in your clients for that I advise you to take a look at flux or backbone
A way to communicate in real time new data that are arriving to the server to your client, for that you'll use socket.io

[SERVER---(new_data)---socket.io_server_side] --------> [CLIENT ---socket.io_client_side--->update your models --- update your page]

edited Sep 12, 2015 at 15:29

answered Sep 12, 2015 at 15:09

François Richard

7,08411 gold badges47 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Safinn Over a year ago

Would socket.io work on it own? I would not need backbone or flux?

J. Mark Stevens Over a year ago

You don't need backbone or flux but your code will be much cleaner using flux. I don't know backbone so can't say how that works.

Collectives™ on Stack Overflow

display data from node module in real time using react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related