Test3/WebContent/WebsockTest.html

<html>
<head>
<title>Test3 :: Websocket Test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">

var actTime = 0;
var socket = null;

function setActTime() {
        actTime = new Date().getTime();
}

function append(str) {
        var d = new Date();
        var dateStr = "[" + d.toLocaleTimeString() + "] ";
        var log = $("#log");
        log.val( log.val() + dateStr + str + "\n")
}

function sendMessage() {
        try {
                var txt = $("#txt").val();
                //append(txt);
                
                socket.send( "CHAT#" + txt);
                
                $("#txt").val("");
                setActTime();
                
        } catch(exception) {
                append(exception);
        }
}

$( function() {
        $("#log").val("");
        append("starting app");
        
        try {
                var url = "ws://" + document.location.host + "/Test3/wstest";
                append("Opening connection to " + url)
                
                socket = new WebSocket(url);
                
                socket.onopen = function() {
                    append("Socket has been opened!");
                    setActTime();
                }
                
                socket.onmessage = function(msg){
                    append(msg.data); //Awesome!
                    setActTime();
                }
        
                socket.onclose = function(){
                        var now = new Date().getTime();
                        var elapsed = now - actTime;
                        elapsed = elapsed / 1000;
                        
                append('Connection closed after ' + elapsed + ' seconds of inactivity');
        } 
        } catch(exception){
        append(exception);
        }
        
        $("#btn").click( function() {
                sendMessage();
        });
        
        $("#btnNick").click( function() {
                var nick = $("#nick").val();
                nick = $.trim(nick);
                
                try {
                        socket.send( "NICK#" + nick);                   
                } catch(exception) {
                        append(exception);
                }
                
        });
        
        $(document).keypress(function(e) {
                if(e.which == 13) {
                        sendMessage();
                }
        });
        
});


</script>

</head>
<body>

<h2>Websocket test chat</h2>

<textarea rows="30" cols="160" id="log" readonly></textarea>
<br>
<input size=120  type="text" name="txt" id="txt">
<button id="btn">Submit</button><br><br>

<input size=20  type="text" name="nick" id="nick">
<button id="btnNick">Set Nick</button><br><br>

<br><br>
<font size="2">
If using websockets with haproxy look into <code>timeout tunnel</code> option.
</font>

</body>
</html>
1	<html>
2	<head>
3	<title>Test3 :: Websocket Test</title>
4	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
5
6	<script type="text/javascript">
7
8	var actTime = 0;
9	var socket = null;
10
11	function setActTime() {
12	actTime = new Date().getTime();
13	}
14
15	function append(str) {
16	var d = new Date();
17	var dateStr = "[" + d.toLocaleTimeString() + "] ";
18	var log = $("#log");
19	log.val( log.val() + dateStr + str + "\n")
20	}
21
22	function sendMessage() {
23	try {
24	var txt = $("#txt").val();
25	//append(txt);
26
27	socket.send( "CHAT#" + txt);
28
29	$("#txt").val("");
30	setActTime();
31
32	} catch(exception) {
33	append(exception);
34	}
35	}
36
37	$( function() {
38	$("#log").val("");
39	append("starting app");
40
41	try {
42	var url = "ws://" + document.location.host + "/Test3/wstest";
43	append("Opening connection to " + url)
44
45	socket = new WebSocket(url);
46
47	socket.onopen = function() {
48	append("Socket has been opened!");
49	setActTime();
50	}
51
52	socket.onmessage = function(msg){
53	append(msg.data); //Awesome!
54	setActTime();
55	}
56
57	socket.onclose = function(){
58	var now = new Date().getTime();
59	var elapsed = now - actTime;
60	elapsed = elapsed / 1000;
61
62	append('Connection closed after ' + elapsed + ' seconds of inactivity');
63	}
64	} catch(exception){
65	append(exception);
66	}
67
68	$("#btn").click( function() {
69	sendMessage();
70	});
71
72	$("#btnNick").click( function() {
73	var nick = $("#nick").val();
74	nick = $.trim(nick);
75
76	try {
77	socket.send( "NICK#" + nick);
78	} catch(exception) {
79	append(exception);
80	}
81
82	});
83
84	$(document).keypress(function(e) {
85	if(e.which == 13) {
86	sendMessage();
87	}
88	});
89
90	});
91
92
93	</script>
94
95	</head>
96	<body>
97
98	<h2>Websocket test chat</h2>
99
100	<textarea rows="30" cols="160" id="log" readonly></textarea>
101	<br>
102	<input size=120 type="text" name="txt" id="txt">
103	<button id="btn">Submit</button><br><br>
104
105	<input size=20 type="text" name="nick" id="nick">
106	<button id="btnNick">Set Nick</button><br><br>
107
108	<br><br>
109	<font size="2">
110	If using websockets with haproxy look into <code>timeout tunnel</code> option.
111	</font>
112
113	</body>
114	</html>