ここ数年、チャット系のアプリが流行っています。代表的なものにLINE、Facebookメッセンジャー、WhatsAppなどが存在します。誰かが書き込んだ内容が即座に反映されてこそ、会話が盛り上がるというものです。
そんなチャットアプリの裏側を支える技術が、リアルタイム通信機能になります。

前回は、リアルタイム通信を実現するWebSocketサーバの概要と導入について解説しました。今回はWebSocketを使って簡易的なチャットアプリを作ってみたいと思います。

WebSocketサーバについて

WebSocketサーバですが、前回の記事でご紹介したgoofmint/ruby-websockets-chat-demoを使っています。[Deploy to Heroku]をクリックするだけで、すぐに自分でサーバが立てられるはずです。

アプリ構成

こちらが出来上がったアプリです。最初にユーザ名を決めます。

ユーザ名を決めるとチャット画面に入ります。今回はメッセージをデータベースに保存していませんので、最初は何もメッセージがない状態からはじまります。

メッセージが届くと、それが即座に画面に反映されます。他の人が書いたメッセージは青で、名前も一緒に表示されます。

自分が書いたメッセージも表示されます。この場合は色は緑、文字は右寄せとしています。

画面について

今回のアプリは2つの画面から構成されています。画面はOnsen UIで実装しています。

まず、画面遷移などの機能を提供する<ons-navigator> コンポーネントを定義しておきます。

入室画面

起動して最初に表示されるのがユーザ名を決める入室画面です。

チャット画面

次にチャット画面です。メッセージは動的に追加しますのでここでは定義しません。
画面下にテキストボックスとボタンを固定表示しています。

CSS定義

スタイルシートは以下のように定義しています。

JavaScriptについて

ではコードを書いていきます。まずはコメントだけで大まかな流れを紹介します。

Onsen UIのスタイル定義

Onsen UIでは、通常OSに合わせて自動でスタイルが変化します。
今回のチャットアプリはiOS、Androidともに同じスタイルに設定したいので、
はじめに以下のコードを実行してiOSスタイル(フラットデザイン)に統一します。

WebSocketサーバの定義

WebSocketサーバはHerokuにデプロイしたものを使います。URLは自分の環境を設定してください。
Herokuにデプロイした場合、WebSockets over SSL/TLSに対応しているのでwssがプロトコルになります。

また、最初はWebSocketオブジェクトを格納する変数にnullを設定しておきます。

入室画面の処理

入室ボタンが押されたらWebSocketの接続を確立して、チャット画面に遷移します。
WebSocketオブジェクトの生成と同時に、サーバーへの接続が行われます。

チャット画面の処理 – WebSocketでメッセージを受け取った時

WebSocket経由でメッセージを受け取った時には onmessage イベントが呼ばれます。この時、データが文字列で送られてくるので、受信した際には JSON.parse で復元します。

そして、自分が送り主だった場合はボタンを緑にして右寄せ、他のユーザからのメッセージはデフォルト色のボタンを左寄せ表示します。メッセージの下にユーザ名も表示します。

チャット画面の処理 – 送信ボタンを押した時

メッセージを送信する時は、WebSocketの send メソッドを使います。この時は JSON.stringify を使ってJSONを文字列に変換した上で送信します。

入室画面に戻るときの処理

最後に入室画面に戻るときの処理です。<ons-back-button> の機能によって前の画面に戻りますが、そのタイミングでWebSocketのコネクションを切断します。
prepop は、ページがpopされる直前に発生するOnsen UIのイベントです。


コード全文は以下のようになります。

以上でチャットアプリの完成となります。
今回作成したのは簡易的なサンプルアプリなので、データベースは利用していません。過去のメッセージは消えてしまいます。本格的なチャットアプリを作る際にはメッセージを保存する仕組みが必要です。
他に必要な機能としては、以下のような機能が挙げられるでしょう。

  • 認証
  • チャットルーム選択
  • 画像アップロード
  • 参加者一覧
  • メッセージ検索

ぜひ今回のコードをベースにしてカスタマイズしてみてください。


チャットは単独のアプリだけでなく、既存のアプリをさらに魅力的にするために追加しても良い機能になります。WebSocketを使うことで、そのための実装はすぐに実現できるでしょう。

今回のコードはmoongift/monaca-with-websocketにアップロードしてあります。実装時の参考にしてください。