Skip to content
Small experiment to see how easy it is to synchronize React.js components using Socket.io.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
index.html
index.js
package.json
react.js
readme.markdown
server.js
socket-mixin.js
utils.js

readme.markdown

React + Socket.io

Small experiment to see how easy it is to synchronize components using Socket.io.

git clone git@github.com:enome/react.io.git
cd react.io
npm install
node server.js

The main work here is done in the socket-mixin.js file which is a mixin you can include in your components. It will emit a change event when the state of a component changes. The server will then broadcast this event with the state to all components. Since this would update all the components the event also has a path which relates to the position of the component inside the dom.

In this example only the parent component (people) needs to sync it's state since it also sets the child components. If you do use the socketMixin in the person component you need to keep in mind that it will sync without telling the parent. So the state of the child component might differ from it's parent data.

If you load an other page after you already changed the data in the first page you might notice that they are out sync. This is because the same array gets initialized on each page load. Using a common data source (back-end data storage, indexedDB, ...) would fix this.

You can’t perform that action at this time.