Awed’s blog

雑感とか

WAMPをいじってみた

WAMPって?

HTML5のサーバ通信の仕様としてWebSocketという仕様があるんですが、これは名前の通りソケットを作れるだけなので、これの上にメッセージプロトコルを用意しようというプロジェクトです。WebSocketに限らず使えるプロトコルではあるんですが、一番推奨はWSということのようです。

  • まずNode.jsをいれます。普通にインストールするだけなので説明は割愛
  • wampのルータとクライアントにOrangeのオープンソースプロジェクトであるwamp.rtを使ってみましょう。
  • GitHubからソースコードをダウンロードして展開します。
  • index.htmlをこんな感じで作成します。ついでにwampというディレクトリもmkdirしましょう。
  • さらにautobahn.jsをダウンロードしてwampディレクトリにいれます。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>wamp samples</h1>
<a href="wamp/">wamp</a>
</body>

 

  • 次にindex.jsを書き換えます。 

 

var http = require('http'); // HTTPサーバーをnode.jsに要求
var port = process.env.PORT || 5000; // portは5000

var httpServer = http.createServer(function(req, res) {

var fname = '.';
if(req.url=='/')
fname += '/index.html';
else if(req.url=='/wamp' || req.url=='/wamp/')
fname += '/wamp/wamp.html';
else
fname += req.url;

var file;
try {
file = require('fs').readFileSync(fname);
} catch(e) {
file = null;
}
if (file != null) {
var mimeType = 'text/html';
if (fname.lastIndexOf('.jgz') >= 0 || fname.lastIndexOf('.js') >= 0)
mimeType = 'text/javascript';
res.writeHead(200, { 'Content-Type': mimeType});
res.end(file);
} else {
res.writeHead(404);
res.end();
}
}).listen(port);

var WAMP = require('./wamp/wamp.js');
var wamp = new WAMP(httpServer, '/wamp/'); // HTTPサーバー生成

  • 次にルータ用のjsを用意します。wamp.jsというファイルを/wampに作ります。

//
// WAMP router
//

module.exports = wamp;

WAMPRT_TRACE = true;

var Router = require('./wamp.rt');


function wamp(httpServer, path) {

function onRPCRegistered(uri) {
console.log('onRPCRegistered RPC registered', uri);
}

function onRPCUnregistered(uri) {
console.log('onRPCUnregistered RPC unregistered', uri);
}


var app = new Router(
{ "server": httpServer,
"path": path,
handleProtocols: function(protocols,cb) {
console.log(protocols);
cb(true,protocols[0]);
//cb(false);
}

}
);
app.on('RPCRegistered', onRPCRegistered);
app.on('RPCUnregistered', onRPCUnregistered);

}

  •  呼び出し側(CALLER)のhtmlコードwamp.htmlも同じディレクトリに書きましょう。

<!DOCTYPE html>
<html>
<head>
<script src="autobahn.min.jgz"></script>
<script script="text/javascritp">
function onLoad() {
var href = document.location.href;
var url = href.replace('http', 'ws');

var calcTag = document.getElementById('calcTag');
var op1Tag = document.getElementById('op1Tag');
var op2Tag = document.getElementById('op2Tag');
var respTag = document.getElementById('respTag');
calcTag.style.backgroundColor = 'rgb(221, 221, 221)';

console.log("ws url=" + url);
var connection = new autobahn.Connection({
url: url,
realm: 'realm1'
});

connection.onopen = function (session) {
console.log('onopen');

calcTag.addEventListener('click', function() {
session.call('com.myapp.calc', [op1Tag.value, op2Tag.value]).then(
function (res) {
var msg = res;
console.log(msg);
respTag.value = msg;
}
);
});
};

connection.onclose = function (reason, details) {
console.log("onclose", reason, details);
};

connection.open();
}
</script>
<style type="text/css">
h1 {
font-size: 36px;
}
button,label,input {
font-size: 24px;
display: block;
width: 100px;
float: left;
margin-bottom: 10px;
}
label {
padding-left: 20px;
text-align: right;
padding-right: 10px;
}
input {
width: 100px;
}
br { clear: left; }
</style>
</head>
<body onload='onLoad()'>
<h1>WAMP Test (CALLER)</h1>
<div>
<button id="calcTag">Calc</button>
<label>Op1</label>
<input id="op1Tag" type="text"/>
<label>Op2</label>
<input id="op2Tag" type="text"/>
<label>Result</label>
<input id="respTag" type="text"/>
</div>
</body>
</html>

  •  最後に呼び出され側(CALLEE)のhtmlファイルwamp-callee.htmlを作ります。ファイル名をハードコードしていて汚いですが…まぁとりあえず。

<!DOCTYPE html>
<html>
<head>
<script src="autobahn.min.jgz"></script>
<script script="text/javascritp">
function onLoad() {
var href = document.location.href;
var url0 = href.replace('http','ws');
var url = url0.replace('wamp-callee.html','');

var resTag = document.getElementById('resTag');

console.log("ws url=" + url);
var connection = new autobahn.Connection({
url: url,
realm: 'realm1'
});

connection.onopen = function (session) {
console.log('onopen');

function calc(args) {
console.log(args);
var val = Number(args[0]) + Number(args[1])
resTag.value = val;
return val;
}
session.register('com.myapp.calc', calc);
console.log('com.myapp.calc registered');
};

connection.onclose = function (reason, details) {
console.log("onclose", reason, details);
};

connection.open();
}
</script>
<style type="text/css">
h1 {
font-size: 36px;
}
button,label,input {
font-size: 24px;
display: block;
width: 100px;
float: left;
margin-bottom: 10px;
}
label {
padding-left: 20px;
text-align: right;
padding-right: 10px;
}
input {
width: 800px;
}
br { clear: left; }
</style>
</head>
<body onload='onLoad()'>
<h1>WAMP Test (CALLEE)</h1>
<div>
<label>Result</label>
<input id="resTag" type="text"/>
</div>
</body>
</html>

  •  二つのhtmlファイルwamp.htmlとwamp-callee.htmlをそれぞれブラウザで開くとwamp.htmlで入力した数字をwamp-callee.htmlで足し算して、結果をwamp.htmlに返すという処理が確認できます。
  • 呼び出され側のHTMLファイルwamp-callee.htmlの足し算Procedure calc(args)をwamp.html側からリモートで呼び出しているのでRPCが実現できていますね。
  • wamp.rtとautobahn.jsを使うとWebSocketサーバ上で簡単にこのような文書間通信ができるわけです。

 

QR Codeとか

QRコードって思ったより使われてるし便利

https://github.com/LazarSoft/jsqrcodeにあるように、JSでコードのデコードもできちゃうので余計なプラグインとか不要ですし、もっとカジュアルに使えても良いように思うのですが、思ったよりウェブアプリで見かけないですよね。

カメラ入力(つまりWebRTC)が普及してないせいかなとも思うのですが、せっかくスマホには100%カメラがついてるのだからこのあたりは普及してほしいところ。

f:id:Awed:20150223145914p:plain

 

Chromium WebViewでもlolipopからウェブビューでgetUserData()が使えるようになるようなので、期待ですね。

 

paizo.ioの紹介 #apijp

はてなのアカウント持ってたのすっかり忘れてましたよ。

id:kskyさんからWeb APIのAvent Calenderやってーって言われて、さてなにを書こうと思ったのですが、そもそもブログ書くのやめて久しいので、自宅サーバーも閉じちゃったし、書き先がないことに気が付きました。

はてなブログもいいかなと思って開設しようと思ったら、すでにメールアドレスが登録されてて、あれアカウント持ってたじゃんと…こういうの他にもありそうですね。

で、今回のネタですが、paizo.io (https://paiza.io/) っていうサイトの紹介です。

f:id:Awed:20141202100950p:plain

もちろんWeb API完備GitHubと連携してたりもするので、書いたコードをGitで管理公開できます。

実際使ってみるとこんな感じ。

f:id:Awed:20141202101210p:plain

Cobol懐かしいですね。右下の今、グレーになってるボタンがGit連携ボタンで、これをonにしてるとGitと同期してくれます。便利便利。

さらにTwitterと連携して、Twitter上でコードを実行できちゃったりします。

f:id:Awed:20141202101347p:plain

paiza_runにメンションしてコードくっつけると実行されるという言語オタにはたまらない仕様となっております。

関谷さんのお好きなGroovyは対応してないですが、DとかRとかClojureとか誰が使うねんっていう言語に対応してるのがおしゃれです。

 

はじめに

某イベントのためにブログ開設しました。

たまに何か書くために準備してみました。主にはFBに書いちゃってるので外部のブログを使ってなかったんですが、ぼちぼちやってこうかと。