WebSocketメモ書き

JavaScript 開発

WebSocketをはじめようとJetty7でWebSocket開発という記事を読んでみたのですが何点かつまづいたのでメモしときます。元の記事の補足なので情報量はあまりないです。

WhisperServletクラス

元の記事のWhisperServletはファイルの置き場所やソースコードの一部が端折られていて困りました。

ファイルの置き場所は以下の通り。

aaa/src/main/java

ここにjp.co.mapion.honjo.aaaというpackageを作成してWhisperServlet.javaを配置します。

端折られているソースコードは以下のような感じです。

package jp.co.mapion.honjo.aaa;

import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.eclipse.jetty.util.log.Log;
import org.eclipse.jetty.websocket.WebSocket;
import org.eclipse.jetty.websocket.WebSocketServlet;

start.bat

Eclipseのワークスペースを別のドライブに置いてる場合cdの際に/dをつける。

telnet

telnetでHTTPのプロトコルを手打ちする際、入力した文字が見えないが、これはtelnetの仕様らしい。
文字を可視化するにはtelnetでset localecho。

ここから何したらいいの？

元の記事はtelnetでハンドシェイクを確認するところで終わっていて、ここから何をやっていけばよいのかわかりませんでした。このWhisperServletは簡単なチャットになっていて、そのクライアントを作る必要があります。これについてはEmerge Technology: WebSocketでChatを作ってみたに掲載されているhtmlのソースコードをとってきて、ws://の部分を自分のアドレスに合わせて書き換えればokです。今回の例に合わせると以下のようになります。

<html>
<head><title>Web Socket Chat</title></head>
<body>
<script>
var ws = new WebSocket("ws://127.0.0.1:8080/aaa/whisper/");
ws.onopen = function() {
};

ws.onmessage = function(message) {
 var txtNode = document.createTextNode(message.data);
 var brNode = document.createElement('br');
 var cnode = document.getElementById("content");
 cnode.appendChild(txtNode);
 cnode.appendChild(brNode);
};
</script>
<h1>Web Socket Chat</h1>
<div id="content">
</div>
<input id="message" type="text" onChange="javascript:ws.send(this.value);this.value='';"/>
</body>
</html>

あとはstart.batを実行したあとでこのhtmlを開いてみます。
成功すれば以下のようにWebSocket is success!!!という文字がでてきます。あとはチャットとして使えます。