Mapion マピオンラボ Javascript 【chrome拡張】Websocket Client作りました

【chrome拡張】Websocket Client作りました

Follow @honjo2

Websocket Clientインストールページ

これを作った目的は、

websocketアプリを作る時に便利。
chromeエクステンションを深く開発してみたかった。
HTML5系の技術を使ってみたかった。

です。

使い方

インストールするとアイコンが表示されます。

これをクリックすると

となるので、リンクをクリックしてオプションページに飛びます。

そして、とりあえず、ここで紹介したwsserverを以下のように設定してみます。

「set」をクリックして設定完了です。

これでwsserverをリッスンしている状態になりました。

次に、実際に動いているか確認してみます。

新規のchromeタブ（or ウィンドウ）で

ここにアクセスします。

そして、適当にささやいてみます。

すると、以下のようにアイコンが回転して数字が表示されます。

アイコンをクリックして内容を確認します。

次に、Websocket Clientからメッセージを送ってみます。

送るメッセージは

{"type":"whisper","time":1266547860232,"coordinates":"139.7,35.7,8","whisper":"テスト","user":"匿名"}

です。

「send」クリックでメッセージが送信されます。

同時に、同じメッセージが返ってきます。

ささやきアプリの方にも投稿が反映されています。

このwsserverは受けたものを全てのコネクションにそのまま返してるだけなので

どんな文字列を送っても全てのコネクションに送信されます。

LAN内に同じようなwsserverを立てれば、社内のメッセンジャー代わりに使えますね。

送られてきたメッセージのリストをカスタマイズしてみる

オプションページの「function」欄でリスナー関数をオーバーライドすることができます。
以下は、送られてきたメッセージから緯度経度を抜き出してマピオンへのリンクにするリスナーです。

設定後にメッセージを受けると

こんな感じになります。

技術ポイント

popupページなどからbackgroundにアクセスする方法

var background = chrome.extension.getBackgroundPage();

でbackgroundのwindowオブジェクトが取れます。

逆に、backgroundから他のページにアクセスする方法

backgroundは以下

chrome.extension.sendRequest({aaa: true});

他は以下

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
	if (request.aaa) {
		// 処理
	}
});

web storage

ローカルストレージは単純なkey:value形式なので、オブジェクトとか

複雑なデータは格納できない。（配列とか入れても文字列に変換されて保存される）

なので、ちょっとした設定とかを格納している。

Web SQL Database

メッセージはWeb SQL Databaseに保存しています。

function initDB() {
	db = openDatabase(dbName, "1.0", "Websocket Client Database", 200000);
	db.transaction(
		function(tx) {
			tx.executeSql(
				"SELECT COUNT(*) FROM " + tableName,
				[],
				function(tx, result) {

				},
				function(tx, error) {
					tx.executeSql(
						"CREATE TABLE " + tableName + " (id REAL UNIQUE, note TEXT, timestamp REAL)"
					)
				}
			);
		},
		function onError(error) {
		
		}
	);
}

: ニックネーム

: この記事のトラックバックURLhttp://labs.mapion.co.jp/mtos/mt-tb.cgi/42