JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
Spring-MVCの散歩道 > 応用の森(Spring-MVC編) > WebSocket(ライン風)サンプル 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ja">

<head>
<title>WebSocketサンプル</title>
<meta charset="UTF-8" />

<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
<!--<![endif]-->
<script type="text/javascript">
$(function(){

    /**
     * メッセージ行を一行追加する
     */
    var addRow = function (msg) {
        //改行コードを置換する
        var replace = msg.replace( /\n/g , "<br/>" ) ;
        //表示エリアに一行追加する
        var lastRow = $('#lineTable tbody > tr:last').after(replace);
    }

    // WebSocket作成
    var ws = new WebSocket("ws://arimodoki.dip.jp/j_Labo/wshandle.xhtml");

    // WebSocket open時のイベントハンドラ登録
    ws.onopen = function(){
        addRow("<tr><td>◆WebSocketが開きました。</td></tr>");
    };

    // WebSocket close時のイベントハンドラ登録
    ws.onclose = function(){
        addRow("<tr><td>◆WebSocketが閉じました。</td></tr>");
    };

    // WebSocket message受信時のイベントハンドラ登録
    ws.onmessage = function(message){
        //メッセージを描画
        addRow(message.data);
    };

    // WebSocket error時のイベントハンドラ登録
    ws.onerror = function(event){
        alert("エラー");
    };

    // Windowが閉じられた(例：ブラウザを閉じた)時のイベントを設定
    $(window).unload(function() {
        ws.onclose();
    })

    //送信ボタンクリック時のイベントを設定
    $("#send").click(function(){
        ws.send($("#message").val());   // WebSocketを使いサーバにメッセージを送信
        $("#message").val("");
        return false;
    });
});
</script>
<style>
<!--
table.bord {
    border:solid 1px #cccccc;
    padding:5px;
    border-collapse:separate;
    border-spacing:5px;
    width:60%;
    height: auto !important;
}
//-->
</style>
</head>

<body>
<table>
    <tr>
        <td>
            <span>WebSocket（ライン風）のサンプルです。</span><br />
            <!-- メッセージ表示エリア -->
            <table class="bord" id="lineTable">
                <tbody>
                <tr><td></td></tr>
                </tbody>
            </table>
            <!-- メッセージ表示エリア -->
        </td>
    </tr>
    <tr>
        <td>
            メッセージ：
            <form id="form">
                <textarea id="message" cols="40" rows="5"></textarea><br />
                <input type="button" id="send" value="送信" />
            </form>
        </td>
    </tr>
</table>
</body>

</html>