joobyでWebSocket通信を試してみます。
前提条件
- joobyのQUICK STARTが終了している
①クライアント用HTMLの準備
publicディレクトリ直下にws.htmlを配置します。
※下記はあくまでサンプルなので、最低限のメソッドしか記載しておりません。
ws.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocketサンプル</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
var ws = new WebSocket("ws://localhost:8080/ws");
ws.onmessage = function(message){
$("#log").prepend(message.data + "<br>");
}
$("#message").keyup(function(e){
ws.send($(this).val());
});
})
</script>
</head>
<body><input type="text" id="message"><div id="log"></div></body>
</html>
②サーバ側の処理追加
メッセージを受信して、送信元に返却しつつ、ブロードキャストするシンプル構成です。
App.java
{
assets("/ws.html", "ws.html");
ws("/ws", ws -> {
ws.onMessage(msg -> {
ws.send("send : " + msg.value());
ws.broadcast("broadcast : " + msg.value());
});
});
}
③ブラウザから複数タブで http://localhost:8080/ws.html にアクセスして、テキストボックスにメッセージを入力してみる
それぞれのタブで、自分の送ったメッセージとブロードキャスト両方が表示されていますので正常に動作しているようです。
タブ１
タブ２
最後に
たった、これだけの記述量で単純な WebSocket の通信が可能なので非常に楽で分かりやすいと思います。
ただ、昔からJavaに慣れ親しんだ人が見ると、あまりJavaのコードに見えないですけどねｗ