|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <title>Command Example</title> |
5 | | -<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> |
6 | 5 | <script type="text/javascript"> |
7 | | - $(function() { |
8 | | - |
| 6 | +window.onload = function () { |
9 | 7 | var conn; |
10 | | - var msg = $("#msg"); |
11 | | - var log = $("#log"); |
| 8 | + var msg = document.getElementById("msg"); |
| 9 | + var log = document.getElementById("log"); |
12 | 10 |
|
13 | | - function appendLog(msg) { |
14 | | - var d = log[0] |
15 | | - var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight; |
16 | | - msg.appendTo(log) |
| 11 | + function appendLog(item) { |
| 12 | + var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1; |
| 13 | + log.appendChild(item); |
17 | 14 | if (doScroll) { |
18 | | - d.scrollTop = d.scrollHeight - d.clientHeight; |
| 15 | + log.scrollTop = log.scrollHeight - log.clientHeight; |
19 | 16 | } |
20 | 17 | } |
21 | 18 |
|
22 | | - $("#form").submit(function() { |
| 19 | + document.getElementById("form").onsubmit = function () { |
23 | 20 | if (!conn) { |
24 | 21 | return false; |
25 | 22 | } |
26 | | - if (!msg.val()) { |
| 23 | + if (!msg.value) { |
27 | 24 | return false; |
28 | 25 | } |
29 | | - conn.send(msg.val()); |
30 | | - msg.val(""); |
31 | | - return false |
32 | | - }); |
| 26 | + conn.send(msg.value); |
| 27 | + msg.value = ""; |
| 28 | + return false; |
| 29 | + }; |
33 | 30 |
|
34 | 31 | if (window["WebSocket"]) { |
35 | | - conn = new WebSocket("ws://{{$}}/ws"); |
36 | | - conn.onclose = function(evt) { |
37 | | - appendLog($("<div><b>Connection closed.</b></div>")) |
38 | | - } |
39 | | - conn.onmessage = function(evt) { |
40 | | - appendLog($("<pre/>").text(evt.data)) |
41 | | - } |
| 32 | + conn = new WebSocket("ws://" + document.location.host + "/ws"); |
| 33 | + conn.onclose = function (evt) { |
| 34 | + var item = document.createElement("div"); |
| 35 | + item.innerHTML = "<b>Connection closed.</b>"; |
| 36 | + appendLog(item); |
| 37 | + }; |
| 38 | + conn.onmessage = function (evt) { |
| 39 | + var messages = evt.data.split('\n'); |
| 40 | + for (var i = 0; i < messages.length; i++) { |
| 41 | + var item = document.createElement("div"); |
| 42 | + item.innerText = messages[i]; |
| 43 | + appendLog(item); |
| 44 | + } |
| 45 | + }; |
42 | 46 | } else { |
43 | | - appendLog($("<div><b>Your browser does not support WebSockets.</b></div>")) |
| 47 | + var item = document.createElement("div"); |
| 48 | + item.innerHTML = "<b>Your browser does not support WebSockets.</b>"; |
| 49 | + appendLog(item); |
44 | 50 | } |
45 | | - }); |
| 51 | +}; |
46 | 52 | </script> |
47 | 53 | <style type="text/css"> |
48 | 54 | html { |
|
0 commit comments