websocket-server – Blame information for rev 1
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
1 | office | 1 | <!doctype html> |
2 | <html> |
||
3 | <head> |
||
4 | <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> |
||
5 | <meta content="utf-8" http-equiv="encoding" /> |
||
6 | <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0" /> |
||
7 | <meta name="apple-mobile-web-app-capable" content="yes" /> |
||
8 | <meta name="apple-mobile-web-app-status-bar-style" content="black" /> |
||
9 | <title>Web Socket Demo</title> |
||
10 | <style type="text/css"> |
||
11 | * { margin: 0; padding: 0; box-sizing: border-box; } |
||
12 | body { font: 13px Helvetica, Arial; } |
||
13 | form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } |
||
14 | form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } |
||
15 | form button { width: 9%; background: rgb(130, 200, 255); border: none; padding: 10px; } |
||
16 | #messages { list-style-type: none; margin: 0; padding: 0; } |
||
17 | #messages li { padding: 5px 10px; } |
||
18 | #messages li:nth-child(odd) { background: #eee; } |
||
19 | </style> |
||
20 | </head> |
||
21 | <body> |
||
22 | <ul id="messages"></ul> |
||
23 | <form action=""> |
||
24 | <input id="txtBox" autocomplete="off" /><button>Send</button> |
||
25 | </form> |
||
26 | |||
27 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js" ></script> |
||
28 | <script type="text/javascript"> |
||
29 | |||
30 | var CONNECTION; |
||
31 | |||
32 | window.onload = function () { |
||
33 | // open the connection to the Web Socket server
|
||
34 | CONNECTION = new WebSocket('ws://' + location.host + ':80/chat'); |
||
35 | |||
36 | // When the connection is open
|
||
37 | CONNECTION.onopen = function () { |
||
38 | $('#messages').append($('<li>').text('Connection opened')); |
||
39 | }; |
||
40 | |||
41 | // when the connection is closed by the server
|
||
42 | CONNECTION.onclose = function () { |
||
43 | $('#messages').append($('<li>').text('Connection closed')); |
||
44 | }; |
||
45 | |||
46 | // Log errors
|
||
47 | CONNECTION.onerror = function (e) { |
||
48 | console.log('An error occured'); |
||
49 | }; |
||
50 | |||
51 | // Log messages from the server
|
||
52 | CONNECTION.onmessage = function (e) { |
||
53 | $('#messages').append($('<li>').text(e.data)); |
||
54 | }; |
||
55 | }; |
||
56 | |||
57 | // when we press the Send button, send the text to the server
|
||
58 | $('form').submit(function(){ |
||
59 | CONNECTION.send($('#txtBox').val()); |
||
60 | $('#txtBox').val(''); |
||
61 | return false; |
||
62 | }); |
||
63 | |||
64 | </script> |
||
65 | </body> |
||
66 | </html> |