CODEWITHSUNDEEP
javascriptnode.jsreactjs
Safinn
Safinn

Reputation: 632

display data from node module in real time using react

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?

Upvotes: 0

Views: 1143

Answers (1)

Fran&#231;ois Richard
Fran&#231;ois Richard

Reputation: 7045

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:

  1. A way to manage models in your clients for that I advise you to take a look at flux or backbone
  2. 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]

Upvotes: 1

Related Questions