中津川篤司Twitter3Facebook31はてブ5Pocket7LINEここ数年、チャット系のアプリが流行っています。代表的なものにLINE、Facebookメッセンジャー、WhatsAppなどが存在します。誰かが書き込んだ内容が即座に反映されてこそ、会話が盛り上がるというものです。そんなチャットアプリの裏側を支える技術が、リアルタイム通信機能になります。前回は、リアルタイム通信を実現するWebSocketサーバの概要と導入について解説しました。今回はWebSocketを使って簡易的なチャットアプリを作ってみたいと思います。WebSocketサーバについてWebSocketサーバですが、前回の記事でご紹介したgoofmint/ruby-websockets-chat-demoを使っています。Heroku]をクリックするだけで、すぐに自分でサーバが立てられるはずです。アプリ構成こちらが出来上がったアプリです。最初にユーザ名を決めます。ユーザ名を決めるとチャット画面に入ります。今回はメッセージをデータベースに保存していませんので、最初は何もメッセージがない状態からはじまります。メッセージが届くと、それが即座に画面に反映されます。他の人が書いたメッセージは青で、名前も一緒に表示されます。自分が書いたメッセージも表示されます。この場合は色は緑、文字は右寄せとしています。画面について今回のアプリは2つの画面から構成されています。UIで実装しています。コンポーネントを定義しておきます。起動して最初に表示されるのがユーザ名を決める入室画面です。class="content"><p>チャットへようこそ。/>名前を決めてください。次にチャット画面です。メッセージは動的に追加しますのでここでは定義しません。画面下にテキストボックスとボタンを固定表示しています。modifier="quiet">送信</ons-button></div></ons-page></template>CSS定義スタイルシートは以下のように定義しています。98%;}JavaScriptについてではコードを書いていきます。コメントだけで大まかな流れを紹介します。ページが切り替わる度に呼ばれます。UIでは、通常OSに合わせて自動でスタイルが変化します。今回のチャットアプリはiOS、Androidともに同じスタイルに設定したいので、はじめに以下のコードを実行してiOSスタイル(フラットデザイン)に統一します。12ons.forcePlatformStyling('ios');WebSocketサーバの定義WebSocketサーバはHerokuにデプロイしたものを使います。URLは自分の環境を設定してください。SSL/TLSに対応しているのでwssがプロトコルになります。最初はWebSocketオブジェクトを格納する変数にnullを設定しておきます。入室ボタンが押されたらWebSocketの接続を確立して、チャット画面に遷移します。WebSocketオブジェクトの生成と同時に、サーバーへの接続が行われます。イベントが呼ばれます。自分が送り主だった場合はボタンを緑にして右寄せ、他のユーザからのメッセージはデフォルト色のボタンを左寄せ表示します。メッセージの下にユーザ名も表示します。使ってJSONを文字列に変換した上で送信します。最後に入室画面に戻るときの処理です。機能によって前の画面に戻りますが、そのタイミングでWebSocketのコネクションを切断します。null;});コード全文は以下のようになります。ページが切り替わる度に呼ばれます。null;});});以上でチャットアプリの完成となります。今回作成したのは簡易的なサンプルアプリなので、データベースは利用していません。過去のメッセージは消えてしまいます。本格的なチャットアプリを作る際にはメッセージを保存する仕組みが必要です。他に必要な機能としては、以下のような機能が挙げられるでしょう。画像アップロード参加者一覧メッセージ検索ぜひ今回のコードをベースにしてカスタマイズしてみてください。チャットは単独のアプリだけでなく、既存のアプリをさらに魅力的にするために追加しても良い機能になります。WebSocketを使うことで、そのための実装はすぐに実現できるでしょう。今回のコードはmoongift/monaca-with-websocketにアップロードしてあります。実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。