main/webapp/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();
                txt = $.trim(txt);
                //append(txt);
                if (txt == "")
                        return;
                
                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.onerror = function(evt) {
                        append("*** Error om client websocket ***");
                }
        
                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);
                
                if (nick == "") {
                        alert("Nick can not be empty");
                        return;
                }
                
                try {
                        socket.send( "NICK#" + nick);                   
                } catch(exception) {
                        append(exception);
                }
                
        });
        
        $(document).keypress(function(e) {
                if(e.which == 13) {
                        sendMessage();
                }
        });
        
        $(window).unload(function(){
                socket.close();
        });
        
});


</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	torben	2516	<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			txt = $.trim(txt);
26			//append(txt);
27			if (txt == "")
28			return;
29
30			socket.send( "CHAT#" + txt);
31
32			$("#txt").val("");
33			setActTime();
34
35			} catch(exception) {
36			append(exception);
37			}
38			}
39
40			$( function() {
41			$("#log").val("");
42			append("starting app");
43
44			try {
45			var url = "ws://" + document.location.host + "/Test3/wstest";
46			append("Opening connection to " + url)
47
48			socket = new WebSocket(url);
49
50			socket.onopen = function() {
51			append("Socket has been opened!");
52			setActTime();
53			}
54
55			socket.onmessage = function(msg){
56			append(msg.data); //Awesome!
57			setActTime();
58			}
59
60			socket.onerror = function(evt) {
61			append("* Error om client websocket *");
62			}
63
64			socket.onclose = function(){
65			var now = new Date().getTime();
66			var elapsed = now - actTime;
67			elapsed = elapsed / 1000;
68
69			append('Connection closed after ' + elapsed + ' seconds of inactivity');
70			}
71			} catch(exception){
72			append(exception);
73			}
74
75			$("#btn").click( function() {
76			sendMessage();
77			});
78
79			$("#btnNick").click( function() {
80			var nick = $("#nick").val();
81			nick = $.trim(nick);
82
83			if (nick == "") {
84			alert("Nick can not be empty");
85			return;
86			}
87
88			try {
89			socket.send( "NICK#" + nick);
90			} catch(exception) {
91			append(exception);
92			}
93
94			});
95
96			$(document).keypress(function(e) {
97			if(e.which == 13) {
98			sendMessage();
99			}
100			});
101
102			$(window).unload(function(){
103			socket.close();
104			});
105
106			});
107
108
109			</script>
110
111			</head>
112			<body>
113
114			<h2>Websocket test chat</h2>
115
116			<textarea rows="30" cols="160" id="log" readonly></textarea>
117			<br>
118			<input size=120 type="text" name="txt" id="txt">
119			<button id="btn">Submit</button><br><br>
120
121			<input size=20 type="text" name="nick" id="nick">
122			<button id="btnNick">Set Nick</button><br><br>
123
124			<br><br>
125			<font size="2">
126			If using websockets with haproxy look into <code>timeout tunnel</code> option.
127			</font>
128
129			</body>
130			</html>