いいね機能の実装の概要について

Question

いいね機能の実装について、概要だけでいいので、教えて頂けないでしょうか。

たとえば、Aが投稿したコンテンツに対して、Bがいいねボタンを押します。
このとき、いいねの数が9から10にカウントアップされるとします。
Cは、Bがいいねボタンを押す直前からAのコンテンツを閲覧しており（いいねの数が9のときから閲覧しており）、Bがいいねを押した瞬間にいいねの数が9から10に自動的に切り替わるのを確認します。

上記のいいね機能の実装について、簡単でいいので、教えて頂けないでしょうか。
Bがいいねボタンを押したときに、MySQLサーバーに格納されているAのコンテンツのいいねに関するカラム（？）が9から10に更新されるということは、想像できるのですが、CがAのコンテンツを閲覧しているときに、いいねが9から10に自動的に更新される処理は、どのように実装すればいいのかわかりません。

Ajaxを利用しているようにも思えるのですが、Ajaxは、send()したときに、データが返信されるものだという認識を持っており、そうすると、Cがsend()して、いいねの数を得れば、上記を実現できそうですが、Cがsend要求を行うトリガーはどうなっているのかなど、わからなくなってしまいます。

もしご存知の方がおりましたら、教えて頂けると幸いです。

Answer 1

見ている自分しか「いいね」しないわけではないので、
タイマーで定期的にいいねの数を取得する処理も持たせるのがよろしいかと。
１～２秒周期で、今表示中の投稿のいいねの数を再取得して画面上に反映するっていう。

twitterでも、スマホで見ているだけでも
どんどんRT数やいいね数が増えていくよう
画面が更新されるのがわかりますよね？

Comments

[torimingo]

ご回答ありがとうございます。
1、2秒周期で、Ajaxを使って、MySQLなどに問い合わせるイメージでしょうか。

[退会済みユーザー]

タイマー | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website https://shanabrian.com/web/javascript/timer.php
timerを使って、指定ミリ秒数経過後に呼び出すユーザー定義関数を指定するような感じとか。

[torimingo]

setIntervalが適当ではないでしょうか。
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

[退会済みユーザー]

やり方は一つじゃないので、まず実装してみればいいです。
（それとも、無駄なコードは書きたくないから、完全にやり方が分かるまでは1行も書きたくない、とか？）

[torimingo]

そうですね、頑張って実装してみます。

[torimingo]

よくわからないんですが、webSocketを使うっていうのは、間違いかわかりますでしょうか。

Answer 2

「いいね」にリアル性が求められるのかどうかは置いておいて、リアルタイムな web アプリを作成したいという事ですね？

php でやろうとすると結構ヤッカイです。

まず、実現する方法ですが、以下のサイトがざっくりと理解するにはよさそうでした。

リアルタイムなwebアプリを実現する方法(ポーリング、Comet、Server Sent Events、WebSocket)

php でお手軽に実装するのであれば、

・ポーリング
・comet もどき(ロングポーリング)

が候補にあがります。

サンプルも探せばそこそこあるので、セキュリティをそれほど気にしなくてよいのであれば、すぐに動かせる程度のモノはできると思います。
ただ、同時アクセス数によっては重いです。

php に拘らなければ、WebSocket で実装するのが楽です。
(SSE は IE が足を引っ張ります)
php でも WebSocket server は建てられるのですが、個人的にはメンドイので Firebase 等に任せてしまいます。

Comments

[torimingo]

ご回答ありがとうございました。
サーバからクライアントへのデータ送信ができそう（？）なWebSocketについて、調べてみようと思います。