javascript - React server-side rendering without polling for changes -

javascript - React server-side rendering without polling for changes -

i'm in process of experimenting transitioning existing web app knockout react js.

as stands application establishes websocket connection server , receives update asynchronously (there can many clients can impact each others state, think chat room example).

my question is, if rendering server side, how changes pushed downwards each client? i've started reading on rendering on server may misunderstanding how works way believe:

client performs action sent server, server responds html fragment client replaces it's dom

in case of app state can changed either server or client, still forced utilize websockets/http polling show these updates?

is possible server force downwards new fragments otherwise?

with react, unidirectional flows best way it. accomplish this, should utilize event emitter.

your json server using websockets, sse, or polling (it doesn't matter). should in envelope format. illustration chat application.

class="lang-js prettyprint-override">{ "type": "new-message", "payload": { "from": "someone", "to": "#some-channel", "time": 1415844019196 } }

when message server, emit event.

class="lang-js prettyprint-override">var handlemessage = function(envelope){ myeventemitter.emit(envelope.type, envelope.payload); };

this form of dispatcher. gets event, , broadcasts who's interested. interested party component or store (in flux).

class="lang-js prettyprint-override">var messagelist = react.createclass({ componentdidmount: function(){ myeventemitter.on('new-message', this.handlenewmessage); }, handlenewmessage: function(message){ if (message.to === this.props.channel) { this.setstate({messages: this.state.messages.concat(message)}); } }, componentwillunmount: function(){ myeventemitter.removelistener(this.handlenewmessage); }, ... });

when user submits message, you'd emit 'user-new-message' event. same part of code implements handlemessage listening event, send message server, , emit new-message event ui updated.

you can maintain list of received messages elsewhere in code (not in component), or create request recent messages server.

sending html server bad, inflexible, , unperformant idea. ajax getting info client, , client chooses how nowadays info user.

javascript reactjs websocket react-jsx