スマホサイト・アプリをつくろう。スマホサイト・アプリをつくろう。-こんにちは、福田です。リアルタイム感のあるサイトは見ていて楽しいですよね。今回はPHPのWebSocketサーバーライブラリ+jQueryMobileを使って、同じサイトを見ている全員にリアルタイムでメッセージを表示するシンプルなアプリケーションを作成してみます。WebSoketのおさらいWebSoketは、サーバーとブラウザ間における双方向通信(リアルタイムweb)の通信規格です。他にもリアルタイムwebを実現するための技術としてAjaxやCometなどがありますが、高負荷などのデメリットも目立ちます。WebSocketはそれらを克服して、いいとこ取りをしたものと言えそうです。IEでは未実装(2012/10/14現在。バージョン10で実装予定)など、使用する際は環境に注意する必要があります。今回は以下の環境で動作を確認しました。以下よりWebSocketサーバーライブラリ「php-websocket」ダウンロードし、サーバー上の任意の場所に解凍します。https://github.com/lemmingzshadow/php-websocket/downloadsここでは解凍したディレクトリ名を「lemmingzshadow-php-websocket」とします。以下の場所に、Application.phpを継承して新規にクラスを作成します。以下のファイルを編集し、先ほど作成したアプリケーションクラスを登録します。lemmingzshadow-php-websocket/server/server.php//======略=======//WebSocketを使用するドメインとポート番号を指定します。実装する環境に合わせて指定してください。false);//======略=======//ドメインを許可します。実装する環境に合わせて指定してください。//$server->setAllowedOrigin('foo.lh');$server->setAllowedOrigin('www13137ue.sakura.ne.jp');//======略=======//アプリケーションを登録します。今回は「popup」という名前で登録します。//$server->run();の前の行に追記してください。\WebSocket\Application\PopupApplication::getInstance());//======略=======※ここで指定するポート番号は、iptablesで開放しておく必要があります。先ほど編集したserver.phpを実行し、WebSocketサーバーを起動します。lemmingzshadow-php-websocket/server/server.php以下のように表示されれば、起動成功です。createdこれでサーバー側の準備は完了です。手順1でダウンロードしたlemmingzshadow-php-websocket/clientディレクトリ内のファイルを全て、ブラウザからアクセスできる場所に配置します。以下のようなHTMLを、同じ場所に作成します。ここでは、popup.htmlとして作成しました。※jQueryMobile1.2を使用しています。</div></body></html>WebSocketサーバが起動している状態でブラウザからアクセスし、status:onlineと表示されていればWebSocketで接続しています。inputからテキストを送信すると、アクセスしている人全員にポップアップで表示されます。同時に2箇所以上からご確認ください。http://www13137ue.sakura.ne.jp/websocket/popup.html最後に今回はjQueryMobileのpopupを使用しましたが、チャット的な利用はもちろんバイナリデータも送受信できることから、お絵かきアプリやサウンドを使ったアプリなど、多くの用途で使えるようです。以下の記事を参考にさせて頂きました。使用したライブラリ同梱のサンプルアプリケーションについても、こちらで触れられています。スマホサイト・アプリをつくろう。まめの木|モバイルSEO見積ツール株式会社セルバは携帯サイト作成・制作、メール配信、店舗検索など、携帯サイトの様々なサービスをご提供しています。