WebSocketでリアルタイム処理をする
- 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
- 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();
- 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");