こんにちは村上です。
gmailをブラウザから使っている人がいると思います。
設定に「デスクトップ通知」というのがあって、それをONにするとタスクバーのあたりにピコンと通知がきます。
今日はそれをちょこっとやってみましょう。
Web Notifications
ピコンとくる「アレ」はWebNotificationsと言うらしいです。
|
1 2 3 4 5 6 |
<input id="notification" type="button" value="デスクトップ通知" /><script type="text/javascript">// <![CDATA[ $("#notification").click(function() { Notification.requestPermission(function(permission){}); var notify = new Notification('通知'); }); // ]]></script> |
こんな感じでコードを書くとタンを押した時に通知表示の許可が求められて、許可すると通知されると思います。
意外に簡単です。
WebSocketでChat
通知があったら便利なサービスっていうとChatです。
ChatといえばWebSocket！！
ということでWebSocket使ったChatアプリを作ってみます。
これも特に難しいことはなく、簡単につくれます。
こことかここのページを参照しながら作ってみました。
GitHubでもソースを公開されてます。
作成できたら
|
1 |
rails s |
っでサーバー起動です。
メッセージを入力すると下部にメッセージが順次追加されていると思います。
また、別のPCで開くと同じように追加されていっているのがわかると思います。
デスクトップ通知
ではデスクトップ通知をしてみましょう。
上記のサイトのサンプルどおりに作るとapp/assets/javascriptsにchat.js.coffeeがあると思います。
ここにデスクトップ通知のコードを書きましょう。
2行ほどです。
ます、デスクトップ通知の許可をする部分ですが、ボタンが押下されるところに以下の記述をしてください。
|
1 |
Notification.requestPermission() |
サンプルではsendMessageあたりです。
|
1 2 3 4 5 6 7 8 9 |
sendMessage: (event) => # Notificationの許可 Notification.requestPermission() # サーバ側にsend_messageのイベントを送信 # オブジェクトでデータを指定 user_name = $('#username').val() msg_body = $('#msgbody').val() @dispatcher.trigger 'new_message', { name: user_name , body: msg_body } $('#msgbody').val('') |
次に通知をする部分です。
クライアントがメッセージを受信するところに以下のコードを書いてください。
|
1 |
notification = new Notification "#{message.name} : #{message.body}" |
サンプルでは、receiveMessageあたりです。
|
1 2 3 4 |
receiveMessage: (message) => # 受け取ったデータをappend $('#chat').append "#{message.name} : #{message.body}" notification = new Notification "#{message.name} : #{message.body}" |
これでOKです！！
こんな感じになります。
上のブラウザはローカルのFirefoxで下のブラウザはVirtualBox上のLinuxのFirefoxです。
エエ感じにできております。
