Skip to content

Instantly share code, notes, and snippets.

@zpao

zpao/gist:5686416

Created May 31, 2013 17:10
Show Gist options
  • Save zpao/5686416 to your computer and use it in GitHub Desktop.
Save zpao/5686416 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. zpao created this gist May 31, 2013.
    31 changes: 31 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    /** @jsx React.DOM */
    var MyComponent = React.createClass({
    render: function() {
    // Defaults in case the props are undefined. We'll have a solution for this
    // soon that is less awkward.
    var perMinute = this.props.perMinute || '-';
    var perDay = this.props.perDay || '-';
    return (
    <div>
    <h3>Clickouts</h3>
    <p>last Minute: {perMinute}</p>
    <p>today: {perDay}</p>
    </div>
    );
    }
    });

    function renderOrUpdate(data) {
    // React.renderComponent will do an initial render OR perform an update if
    // needed. In this case you'll just continuously pass data in and as it comes
    // from the socket and the DOM will just keep updating. What this means is
    // that if only data.perMinute is updated and data.perDay stays the same,
    // we'll only update the <p> containing perMinute.
    React.renderComponent(
    <MyComponent perDay={data.perDay}, perMinute={data.perMinute} />,
    document.getElementById('domid')
    );
    }

    var socket = io.connect('http://localhost:3000');
    socket.on('business.clickout', renderOrUpdate);