-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (122 loc) · 3.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<title>Tornado WebSocket: simple example</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>Tornado WebSocket: simple example</h1>
<hr>
WebSocket status : <span id="message"></span>
<hr>
<h3>The following table shows values by using WebSocket</h3>
<div class="row">
<div class="span4">
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>No.</th><th>id</th><th>value</th>
</tr>
<tr id="row1">
<td> 1 </td><td> id 1 </td><td id="1"> 0 </td>
</tr>
<tr id="row2">
<td> 2 </td><td> id 2 </td><td id="2"> 0 </td>
</tr>
<tr id="row3">
<td> 3 </td><td> id 3 </td><td id="3"> 0 </td>
</tr>
</table>
</div>
<div class="span4">
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>No.</th><th>id</th><th>value</th>
</tr>
<tr id="row4">
<td> 4 </td><td> id 4 </td><td id="4"> 0 </td>
</tr>
<tr id="row5">
<td> 5 </td><td> id 5 </td><td id="5"> 0 </td>
</tr>
<tr id="row6">
<td> 6 </td><td> id 6 </td><td id="6"> 0 </td>
</tr>
</table>
</div>
<div class="span4">
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>No.</th><th>id</th><th>value</th>
</tr>
<tr id="row7">
<td> 7 </td><td> id 7 </td><td id="7"> 0 </td>
</tr>
<tr id="row8">
<td> 8 </td><td> id 8 </td><td id="8"> 0 </td>
</tr>
<tr id="row9">
<td> 9 </td><td> id 9 </td><td id="9"> 0 </td>
</tr>
</table>
</div>
</div>
<hr>
<h3>REST API examples</h3>
<ol>
<li>Set the "id 1" value to 100
<ul><li>curl "http://localhost:8888/api?id=1&value=100"</li></ul>
</li>
<li>Set the "id 1" value to 300 ( The row No 1 will change to yellow )
<ul><li>curl "http://localhost:8888/api?id=1&value=300"</li></ul>
</li>
<li>Set The "id 1" value to 600 ( The row No 1 will change to red )
<ul><li>curl "http://localhost:8888/api?id=1&value=600"</li></ul>
</li>
</ol>
<ul>
<li>value 201 - 500 : change to yellow</li>
<li>value 501 - : change to red</li>
</ul>
<img src="./rest_api_example.png"/>
</div>
<script>
var host = window.location.host;
var ws = new WebSocket('ws://'+host+'/ws');
var $message = $('#message');
ws.onopen = function(){
$message.attr("class", 'label label-success');
$message.text('open');
};
ws.onmessage = function(ev){
$message.attr("class", 'label label-info');
$message.hide();
$message.fadeIn("slow");
$message.text('recieved message');
var json = JSON.parse(ev.data);
$('#' + json.id).hide();
$('#' + json.id).fadeIn("slow");
$('#' + json.id).text(json.value);
var $rowid = $('#row' + json.id);
if(json.value > 500){
$rowid.attr("class", "error");
}
else if(json.value > 200){
$rowid.attr("class", "warning");
}
else{
$rowid.attr("class", "");
}
};
ws.onclose = function(ev){
$message.attr("class", 'label label-important');
$message.text('closed');
};
ws.onerror = function(ev){
$message.attr("class", 'label label-warning');
$message.text('error occurred');
};
</script>
</body>
</html>