WebSocket 使って Chat そしてデスクトップ通知!!

Pocket

こんにちは村上です。

gmailをブラウザから使っている人がいると思います。
設定に「デスクトップ通知」というのがあって、それをONにするとタスクバーのあたりにピコンと通知がきます。
今日はそれをちょこっとやってみましょう。

Web Notifications

ピコンとくる「アレ」はWebNotificationsと言うらしいです。

こんな感じでコードを書くとタンを押した時に通知表示の許可が求められて、許可すると通知されると思います。
意外に簡単です。

WebSocketでChat

通知があったら便利なサービスっていうとChatです。
ChatといえばWebSocket!!

ということでWebSocket使ったChatアプリを作ってみます。
これも特に難しいことはなく、簡単につくれます。

こことかここのページを参照しながら作ってみました。
GitHubでもソースを公開されてます。

作成できたら

っでサーバー起動です。

メッセージを入力すると下部にメッセージが順次追加されていると思います。
また、別のPCで開くと同じように追加されていっているのがわかると思います。

デスクトップ通知

ではデスクトップ通知をしてみましょう。

上記のサイトのサンプルどおりに作るとapp/assets/javascriptsにchat.js.coffeeがあると思います。
ここにデスクトップ通知のコードを書きましょう。
2行ほどです。

ます、デスクトップ通知の許可をする部分ですが、ボタンが押下されるところに以下の記述をしてください。

サンプルではsendMessageあたりです。

次に通知をする部分です。
クライアントがメッセージを受信するところに以下のコードを書いてください。

サンプルでは、receiveMessageあたりです。

これでOKです!!

こんな感じになります。

websocketxchatxwebnotifications

上のブラウザはローカルのFirefoxで下のブラウザはVirtualBox上のLinuxのFirefoxです。
エエ感じにできております。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です