WebSocketでリアルタイム処理をする
20 likes•23,310 views
WebSocketを使って位置情報のトラッキングをリアルタイム処理するシステムを紹介。Heroku＋Node Ninjaを使用。
![ChromeExtensionの構成(manifest.json)
{
"manifest_version": 2,
"name": "Aphrael",
"description": "Aphrael for chrome",
"version": "0.0.1",
"permissions": [
"pushMessaging",
"notifications",
"tabs"
],],
"background": {
"scripts": ["notify.js"]
},
"content_scripts": [
{
"matches": [
"http://*/*"
],
"js": ["content_script.js", "jquery.min.js"],
"run_at": "document_end"
}
]
}](https://image.slidesharecdn.com/web20130713-130712084408-phpapp01/85/WebSocket-15-320.jpg)
![ChromeExtensionの構成(manifest.json)
{
"manifest_version": 2,
"name": "Aphrael",
"description": "Aphrael for chrome",
"version": "0.0.1",
"permissions": [
"pushMessaging",
"notifications",
"tabs"
],
初期状態から使用可能な
JavaScript
],
"background": {
"scripts": ["notify.js"]
},
"content_scripts": [
{
"matches": [
"http://*/*"
],
"js": ["content_script.js", "jquery.min.js"],
"run_at": "document_end"
}
]
}
JavaScript
読み込ませて使用する
JavaScript](https://image.slidesharecdn.com/web20130713-130712084408-phpapp01/85/WebSocket-16-320.jpg)
WebSocketでリアルタイム処理をする
- 7. システム構成
- 9. 急遽変更した点 Chromeとリアルタイム通信する箇所は当初は GCM(Google Cloud Messaging for Chrome)を使って いたが、node.jsに完全移行した。 変更した理由は、リクエスト回数制限(10000req/day)と APIの機能不足 複数ユーザで連続通信した場合越える可能性が高い 機能が少ない。例えばGCMは接続する全てのクライアントに同機能が少ない。例えばGCMは接続する全てのクライアントに同 じデータを送りつけるためユーザ単位の制御ができない。クライ アントの特定はChromeExtensionのChannelIdだが、インス トールしたクライアントですべて同じIDになってしまうため個別 の制御ができない 外部サービスに頼るのは基本的によくない(仕様変更、勉強の観点 から) Google Cloud Messaging for Chromeの基本について はhttp://www.slideshare.net/mapserver2007/web- 20130525を参照してください。
- 15. ChromeExtensionの構成(manifest.json) { "manifest_version": 2, "name": "Aphrael", "description": "Aphrael for chrome", "version": "0.0.1", "permissions": [ "pushMessaging", "notifications", "tabs" ],], "background": { "scripts": ["notify.js"] }, "content_scripts": [ { "matches": [ "http://*/*" ], "js": ["content_script.js", "jquery.min.js"], "run_at": "document_end" } ] }
- 16. ChromeExtensionの構成(manifest.json) { "manifest_version": 2, "name": "Aphrael", "description": "Aphrael for chrome", "version": "0.0.1", "permissions": [ "pushMessaging", "notifications", "tabs" ], 初期状態から使用可能な JavaScript ], "background": { "scripts": ["notify.js"] }, "content_scripts": [ { "matches": [ "http://*/*" ], "js": ["content_script.js", "jquery.min.js"], "run_at": "document_end" } ] } JavaScript 読み込ませて使用する JavaScript
- 18. content_script backgroundスクリプトから呼び出す chrome.tabs.executeScript( tabId, {file: "content_script.js"}, function(response) { // callback executeScriptで呼び出す Chromeのサンドボックスを超えて表示しているページで DOMアクセス可能 ただし表示しているページ内のJavaScriptへのアクセスは できない(関数実行は不可) // callback } );
- 19. ExtensionからWebSocketを使う // WebSocket通信開始 var webSocket = new WebSocket(“ws://localhost:9222”); // サーバからのメッセージを受信 webSocket.onmessage = function() { // content_scriptを呼び出して画面を書き換える }; // クローズ処理 webScoket.onclose = function() {…};webScoket.onclose = function() {…}; // エラー処理 webSocket.onerror = function() {…}; // クライアントからサーバへのメッセージ送信 webScoket.send(“message”); // クローズ webSocket.close();
- 20. ExtensionからWebSocketを使う newした段階で接続される 接続状況はwebSocket.readyStateで確認できる oncloseメソッドでサーバからの切断処理に対応 サーバからの切断を検知してオブジェクトのクリア処理などを書 // WebSocket通信開始 var webSocket = new WebSocket(“ws://localhost:9222”); サーバからの切断を検知してオブジェクトのクリア処理などを書 く
- 21. ExtensionからWebSocketを使う // WebSocket通信開始 var webSocket = new WebSocket(“ws://localhost:9222”); // サーバからのメッセージを受信 webSocket.onmessage = function() { // content_scriptを呼び出して画面を書き換える } // クローズ処理 webScoket.onclose = function() {…}webScoket.onclose = function() {…}
- 24. WebSocketサーバの実装 var WebSocketServer = require('ws').Server, httpServer = require('http').createServer(); var server = new WebSocketServer({ server: httpServer }); var connection = null; server.on('connection', function(ws) {server.on('connection', function(ws) { connection = ws; ws.on('close', function(code) { console.log(code); }); }); httpServer.listen("9222");
- 26. HTTPサーバの実装 var express = require('express'); var app = express(); app.get('/rest/position', function(req, res) { var data = { lat: req.query.lat, lng: req.query.lng }; try {try { connection.send(JSON.stringify(data)); res.send(200); } catch (e) { logger.error(e.message); throw e; } }); app.listen("9223");
- 31. Demo