6

私は、既存の Web アプリをノックアウトから反応 js に移行する実験を行っています。

現状では、アプリケーションはサーバーへの websocket 接続を確立し、非同期で更新を受信します (たとえば、チャット ルームのように、お互いの状態に影響を与える可能性のあるクライアントが多数存在する可能性があります)。

私の質問は、もし私がレンダリング サーバー側で行った場合、どのように変更を各クライアントにプッシュできるのでしょうか? サーバーでのレンダリングについて読み始めたばかりなので、それがどのように機能するかを誤解しているかもしれませんが、私が信じている方法は次のとおりです。

クライアントはサーバーに送信されるアクションを実行し、サーバーはクライアントがDOMに置き換えるhtmlフラグメントで応答します

サーバーまたは別のクライアントによって状態を変更できるアプリの場合、これらの更新を表示するために websockets/http ポーリングを使用する必要がありますか?

それ以外の場合、サーバーが新しいフラグメントをプッシュすることは可能ですか?

4

2 に答える 2

7

React では、多くの場合、単方向フローが最適な方法です。これを実現するには、イベント エミッターを使用する必要があります。

Websockets、SSE、またはポーリングを使用してサーバーから JSON を取得します (問題ありません)。封筒形式である必要があります。これは、チャット アプリケーションの例です。

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

サーバーからこのメッセージを受け取ると、それをイベントとして発行します。

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

これは一種のディスパッチャーです。単純にイベントを取得し、関心のある人にブロードキャストします。通常、利害関係者はコンポーネントまたはストア (流動的) になります。

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);
   },
   ...
});

ユーザーがメッセージを送信すると、'user-new-message' イベントを発行します。実装するコードの同じ部分は、handleMessageこのイベントをリッスンし、サーバーにメッセージを送信し、UI を更新できるように新しいメッセージ イベントを発行します。

受信したメッセージのリストをコード内 (コンポーネント内ではなく) に保持したり、サーバーから最近のメッセージを取得するように要求したりすることもできます。

サーバーから html を送信することは、通常、非常に良くない、柔軟性に欠ける、パフォーマンスの低いアイデアです。AJAX はクライアントにデータを取得するためのものであり、クライアントはこのデータをユーザーに提示する方法を選択します。

于 2014-11-13T02:07:12.780 に答える
0

私がレンダリング サーバー側を担当している場合、変更を各クライアントにプッシュするにはどうすればよいでしょうか?

さて、あなたはソケット経由でそれを言いました。

ただし、これは実際には「最適」ではありません。毎回マークアップを押し下げる必要はありません。テンプレートがない場合はクライアントにプッシュするか、ページにプリロードすることをお勧めします。その場合は、代わりにデータを下にプッシュして、クライアント側にレンダリングさせます。

サーバーまたは別のクライアントによって状態を変更できるアプリの場合、これらの更新を表示するために websockets/http ポーリングを使用する必要がありますか?

Server-Side Events と呼ばれる WebSocket の代替手段があります。これは WebSocket に似ていますが、サーバー -> ブラウザーのみの一方向です。ブラウザーは、WebSocket 経由と同じ方法でサーバー側のものをリッスンします。ただし、サーバーとの通信には、プレーンな古い AJAX やフォームなどを使用できます。サポートは限定的ですが、ポリフィルがあります。

実際、ダウンラインを利用するだけで WebSocket でも同じことができますが、それでは目的が果たせません。

于 2014-11-13T01:54:45.230 に答える