index.html

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<html>
<head>
</head>
<body>
<div id="time">只是接受消息的地方</div>
<input type="text" id="txtMsg"/>
<br/>
<button type="button" onclick="sendMsg()">发送消息</button>
<br/>
<script type="text/javascript">
    //new WebSocket
    var webSocket = new WebSocket("ws://localhost:8080/websocket");

    function sendMsg() {
        var txt = document.getElementById("txtMsg").value;
        console.log("待发送的消息是:" + txt);
        webSocket.send(txt);
    }

    webSocket.onopen = function () {
        console.log("连接成功");
    }
    webSocket.onclose = function () {
        console.log("连接关闭");
    }
    webSocket.onerror = function () {
        console.log("连接出错");
    }
    webSocket.onmessage = function (msg) {
        console.log("收到的消息是:" + msg.data);
        document.getElementById("time").innerHTML = msg.data;
    }
</script>
</body>
</html>