teratailのように新着情報を自動で表示させるためには？

Question

Twitterやteratailではユーザーがページを閲覧中に
新しい他のユーザーの投稿があった場合、
「新着xxx件あります」のような表示がタイムライン上部に出ます。

これと同じことをするためには、どういった技術が必要なのでしょうか？

単純にjavascriptで一定間隔でサーバー側のapiに非同期通信を行なって、
新着情報を取得してDOMに追加しているのでしょうか？

それとも、他の方法で行うものなのでしょうか？

Answer 1

単純にjavascriptで一定間隔でサーバー側のapiに非同期通信を行なって、
新着情報を取得してDOMに追加しているのでしょうか？

そのやり方、「ポーリング」はよく使われる方式です。仕組みも単純ですし、高頻度にしなければ負荷も大してかかりません。
ただ、リアルタイム性はなく、最大でポーリング間隔の分だけ更新が遅延します。
（そういう欠点があるからこそのこの質問だと思います）

リアルタイム性を実現する手法はいくつかあります。

• ロングポーリング（別名Comet）: ポーリングのように一定間隔で更新情報を問い合わせるのですが、サーバー側は新たな情報がなければレスポンスを返しません。新たな情報が発生したか制限時間に達したときに初めてレスポンスを返します。
• WebSocket: HTTPを拡張し、上下方向に任意のデータブロックを任意のタイミングでストリーム送信できるようにした規格です。モダンブラウザならJavaScriptから利用できます。
• MQTT: Cometと似ているのですが、更新情報が発生するとレスポンスが完了するのではなく、更新情報があるたびにサイズ未指定のレスポンスに続きが追加されてくる方式です。レスポンスの内容はXMLです（最後の最後に閉じタグが送られてきて全体で一本のXML文書として完成します）。

ただ、リアルタイム性を実現する手法は大規模なサービスになるほど採用しにくくなってきます。

• イベントを統括するサーバーが必要になり、ここが多重化しにくいので負荷分散に向かない
• ソケットをつなぎっぱなしになるのでソケット資源負荷がボトルネックになる