Webアプリケーションでサーバーからブラウザの挙動を非同期で制御する方法

Question

囲碁解析ソフトのUIをJavaScriptで実装しようと思っています(ただし解析処理はサーバー側のPHPでおこなう)

そこでPHPの解析の途中経過をブラウザでリアルタイムに表示したいのですが、

サーバーからブラウザのJavaScriptに非同期でデータを送り処理・表示させる方法がわかりません。

何か良いアイデアをいただけないでしょうか。

Answer 1

まずはじめに断っておくと、PHPは非同期処理が苦手な言語です。GoやNode.jsなど、非同期処理を得意とした環境で実装するほうがいいかもしれません。

で、非同期でサーバからクライアントにデータを送りたい、という場合には、大きく分けて2通りの方法が考えられます。

1. ときどきブラウザのJavaScriptからリクエストを投げて、結果を取ってくる（ポーリング）
2. WebSocketでサーバとブラウザをつないでおいて、そこ経由で送信する

「解析の途中経過」という状況を考えれば、ポーリング型でもそんなに困らないかな、と思います。

Answer 2

1. setInterval()などを使って、フロント側で定期的にデータを受信する。
2. websocketでサーバーと接続して、サーバー側からフロント側にデータをプッシュする。

のどちらかになると思います。

データを受信して、前回のデータと比較して値が変更されていたら、
画面に値を反映するという方法を自分はよく使います。

どれくらいの頻度でどれくらいのデータを受信しないといけないのかわかりませんが、
受信するデータの容量が軽いんだったら1の方法でも問題ないように思います。

逆にデータの容量がそこそこあるんだったら、２の方法で更新があったタイミングでデータを
フロント側に送ってあげる方が、通信コストもかからないし、ユーザーフレンドリーかと思います。