Jetty8で作るWebSocketチャット(ブラウザ側編）

Java 開発

前エントリに続いてブラウザ側の実装について。

こちらは単純ですね。
WebSocket の有無を確認して、使えるなら WebSocket の URL を指定してコネクションを開く。
後は、メッセージが届いたら div ブロックを追加してメッセージ表示。送信ボタンが押されたら入力中のメッセージを送信しているだけです。

サーバ側では、カレントディレクトリをドキュメントルートにしたので、カレントディレクトリに index.html と名付けて保存します。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    // WebSocket 確認
    if (!window.WebSocket && !window.MozWebSocket) {
        alert("WebSocket disabled!!");
        return;
    }

    // WebSocket 初期化
    var wsurl = "ws://"+location.host+"/ws/";
    var ws = window.MozWebSocket ? new MozWebSocket(wsurl) : new WebSocket(wsurl);
    $(window).unload(function(){ ws.close(); ws = null });

    // メッセージを受けたらそのメッセージを追加
    ws.addEventListener("message",function(msg) {
        if (msg == null || msg.data == null)
            return;
        $("#log").append("<div class='message'>"+msg.data+"</div>");
    }, false);

    // 送信ボタンでメッセージ送信
    $("#send").click(function(e) {
        var text = $("#text").val();
        ws.send(text);
        $("#text").val("");
    });
});
</script>
</head>
<body>
  <div class="content">
    <div id="log"></div>
    <div id="send_textbox">
      <input type="text" id="text"></input><input type="button" id="send" value="send"></input>
    </div>
  </div>
</body>
</html>