master
1<!doctype html>
2<html>
3 <head>
4 <title>WebSockets Hello World</title>
5 <meta charset="utf-8" />
6 <style type="text/css">
7 body {
8 text-align: center;
9 min-width: 500px;
10 }
11 </style>
12 <script src="http://code.jquery.com/jquery.min.js"></script>
13 <script>
14 $(document).ready(function () {
15
16 var ws;
17
18 $("#open").click(function(evt) {
19 evt.preventDefault();
20
21 var host = $("#host").val();
22 var port = $("#port").val();
23 var uri = $("#uri").val();
24
25 ws = new WebSocket("ws://" + host + ":" + port + uri);
26
27 ws.onmessage = function(evt) {console.log("message received: " + evt.data)};
28
29 ws.onclose = function(evt) { console.log("Connection close"); };
30
31 ws.onopen = function(evt) {
32 $("#host").css("background", "#00ff00");
33 $("#port").css("background", "#00ff00");
34 $("#uri").css("background", "#00ff00");
35 };
36 });
37
38 });
39 </script>
40 </head>
41
42 <body>
43 <h1>WebSockets Hello World</h1>
44 <div>
45 <label for="host">host:</label>
46 <input type="text" id="host" value="localhost" style="background:#ff0000;"/><br />
47 <label for="port">port:</label>
48 <input type="text" id="port" value="8888" style="background:#ff0000;"/><br />
49 <label for="uri">uri:</label>
50 <input type="text" id="uri" value="/ws" style="background:#ff0000;"/><br />
51 <input type="submit" id="open" value="open" />
52 </div>
53 </body>
54</html>