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

admin管理员组

文章数量:1357220

I'm in the process of experimenting with transitioning an existing web app from knockout to react js.

As it stands the application establishes a websocket connection to the server and receives update asynchronously (there can be many clients which can affect each others state, think chat room for example).

My Question is, if I were do the rendering server side, how could changes be pushed down to each client? I've only just started reading up on rendering on the server so I may be misunderstanding how it works but the way I believe:

Client performs an action which is sent to the server, server responds with an html fragment which the client then replaces into it's DOM

In the case of an app where the state can be changed by either the server or another client, would I still be forced to use websockets/http polling to show these updates?

Is it possible for the server to push down new fragments otherwise?

I'm in the process of experimenting with transitioning an existing web app from knockout to react js.

As it stands the application establishes a websocket connection to the server and receives update asynchronously (there can be many clients which can affect each others state, think chat room for example).

My Question is, if I were do the rendering server side, how could changes be pushed down to each client? I've only just started reading up on rendering on the server so I may be misunderstanding how it works but the way I believe:

Client performs an action which is sent to the server, server responds with an html fragment which the client then replaces into it's DOM

In the case of an app where the state can be changed by either the server or another client, would I still be forced to use websockets/http polling to show these updates?

Is it possible for the server to push down new fragments otherwise?

• javascript
• websocket
• reactjs

Share Improve this question Follow edited Jan 31, 2016 at 2:24 Dmitry Shvedov 3,31644 gold badges4040 silver badges5656 bronze badges asked Nov 13, 2014 at 1:45 iosephioseph 1,9172121 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

With React, unidirectional flows are often the best way to do it. To achieve this, we should use an event emitter.

Your get JSON from the server using websockets, SSE, or polling (it doesn't matter). They should be in an envelope format. This would be an example for a chat application.

{
  "type": "new-message", 
  "payload": {
    "from": "someone",
    "to": "#some-channel",
    "time": 1415844019196
  }
}

When you get this message from the server, you emit it as an event.

var handleMessage = function(envelope){
   myEventEmitter.emit(envelope.type, envelope.payload);
};

This is a form of dispatcher. It simply gets the event, and broadcasts it to anyone who's interested. Usually the interested party will be a ponent or a store (in flux).

var MessageList = React.createClass({
   ponentDidMount: function(){
      myEventEmitter.on('new-message', this.handleNewMessage);
   },
   handleNewMessage: function(message){
      if (message.to === this.props.channel) {
          this.setState({messages: this.state.messages.concat(message)});
      }
   },
   ponentWillUnmount: function(){
      myEventEmitter.removeListener(this.handleNewMessage);
   },
   ...
});

When the user submits a message, you'd emit a 'user-new-message' event. The same part of code that implements handleMessage would be listening to this event, send the message to the server, and emit a new-message event so that the UI could be updated.

You can also keep a list of received messages elsewhere in your code (not in a ponent), or make a request to get recent messages from the server.

Sending html from the server is usually a very bad, inflexible, and unperformant idea. AJAX is for getting data to the client, and the client chooses how to present this data to the user.

if I were do the rendering server side, how could changes be pushed down to each client?

Well, you just said it, via Sockets.

However, this is not really "optimal". You wouldn't want to push markup down the line every time. I suggest you push a template down to the client if they don't have it, or just pre-load it in the page. When they do, just push down data down the line instead and have the client-side render it.

In the case of an app where the state can be changed by either the server or another client, would I still be forced to use websockets/http polling to show these updates?

There's an alternative to WebSockets called Server-Side Events. It's kinda like WebSockets but it's one-way, server -> browser only. Browser listens for server-side stuff the same way you would via WebSockets. However, municatiing to the server, you can use plain old AJAX or forms or whatever. Support is limited but there are polyfills.

In fact, you can do the same thing with WebSockets, just utilize the downline, but that would defeat its purpose.

本文标签： javascriptReact serverside rendering without polling for changesStack Overflow