Google Git
Sign in
chromium / external / pywebsocket / src / 8e925288ec3a5f19c6cdf2e6bffc0302e13dfc61 / . / example / console.html
blob: 3a46bfdaf540f6ef47a4fb657611ce0111b082da [file] [log] [blame]
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]1<!--
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]2Copyright 2011, Google Inc.
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]3All rights reserved.
4
5Redistribution and use in source and binary forms, with or without
6modification, are permitted provided that the following conditions are
7met:
8
9 * Redistributions of source code must retain the above copyright
10notice, this list of conditions and the following disclaimer.
11 * Redistributions in binary form must reproduce the above
12copyright notice, this list of conditions and the following disclaimer
13in the documentation and/or other materials provided with the
14distribution.
15 * Neither the name of Google Inc. nor the names of its
16contributors may be used to endorse or promote products derived from
17this software without specific prior written permission.
18
19THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
20"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
21LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
22A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
23OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
24SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
25LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
26DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
27THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
28(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30-->
31
32<!--
33A simple console for testing WebSocket server.
34
35Type an address into the top text input and click connect to establish
36WebSocket. Then, type some message into the bottom text input and click send
37to send the message. Received/sent messages and connection state will be shown
38on the middle textarea.
39-->
40
41<html>
42<head>
43<title>WebSocket console</title>
44<script>
45var socket = null;
46
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]47var showTimeStamp = false;
48
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]49var addressBox = null;
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]50var protocolsBox = null;
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]51var logBox = null;
52var messageBox = null;
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]53var fileBox = null;
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]54var codeBox = null;
55var reasonBox = null;
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]56
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]57function getTimeStamp() {
58 return new Date().getTime();
59}
60
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]61function addToLog(log) {
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]62 if (showTimeStamp) {
63 logBox.value += '[' + getTimeStamp() + '] ';
64 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]65 logBox.value += log + '\n'
66 // Large enough to keep showing the latest message.
67 logBox.scrollTop = 1000000;
68}
69
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]70function setbinarytype(binaryType) {
71 if (!socket) {
72 addToLog('Not connected');
73 return;
74 }
75
76 socket.binaryType = binaryType;
77 addToLog('Set binaryType to ' + binaryType);
78}
79
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]80function send() {
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]81 if (!socket) {
82 addToLog('Not connected');
83 return;
84 }
85
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]86 socket.send(messageBox.value);
87 addToLog('> ' + messageBox.value);
88 messageBox.value = '';
89}
90
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]91function sendfile() {
92 if (!socket) {
93 addToLog('Not connected');
94 return;
95 }
96
97 var files = fileBox.files;
98
99 if (files.length == 0) {
100 addToLog('File not selected');
101 return;
102 }
103
104 socket.send(files[0]);
105 addToLog('> Send ' + files[0].name);
106}
107
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]108function parseProtocols(protocolsText) {
109 var protocols = protocolsText.split(',');
110 for (var i = 0; i < protocols.length; ++i) {
111 protocols[i] = protocols[i].trim();
112 }
113
114 if (protocols.length == 0) {
115 // Don't pass.
116 protocols = null;
117 } else if (protocols.length == 1) {
118 if (protocols[0].length == 0) {
119 // Don't pass.
120 protocols = null;
121 } else {
122 // Pass as a string.
123 protocols = protocols[0];
124 }
125 }
126
127 return protocols;
128}
129
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]130function connect() {
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]131 var url = addressBox.value;
132 var protocols = parseProtocols(protocolsBox.value);
133
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]134 if ('WebSocket' in window) {
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]135 if (protocols) {
136 socket = new WebSocket(url, protocols);
137 } else {
138 socket = new WebSocket(url);
139 }
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]140 } else if ('MozWebSocket' in window) {
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]141 socket = new MozWebSocket(url);
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]142 } else {
143 return;
144 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]145
146 socket.onopen = function () {
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]147 if (('protocol' in socket) && socket.protocol) {
148 addToLog('Opened (protocol = ' + socket.protocol + ')');
149 } else {
150 addToLog('Opened');
151 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]152 };
153 socket.onmessage = function (event) {
tyoshino@chromium.org4a98c442012-11-05 10:59:27[diff] [blame]154 if (('ArrayBuffer' in window) && (event.data instanceof ArrayBuffer)) {
155 addToLog('< Received an ArrayBuffer of ' + event.data.byteLength +
156 ' bytes')
157 } else if (('Blob' in window) && (event.data instanceof Blob)) {
158 addToLog('< Received a Blob of ' + event.data.size + ' bytes')
159 } else {
160 addToLog('< ' + event.data);
161 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]162 };
163 socket.onerror = function () {
164 addToLog('Error');
165 };
tyoshino@chromium.org6089e1e2011-05-09 09:15:31[diff] [blame]166 socket.onclose = function (event) {
167 var logMessage = 'Closed (';
168 if ((arguments.length == 1) && ('CloseEvent' in window) &&
169 (event instanceof CloseEvent)) {
170 logMessage += 'wasClean = ' + event.wasClean;
171 // code and reason are present only for
172 // draft-ietf-hybi-thewebsocketprotocol-06 and later
173 if ('code' in event) {
174 logMessage += ', code = ' + event.code;
175 }
176 if ('reason' in event) {
177 logMessage += ', reason = ' + event.reason;
178 }
179 } else {
180 logMessage += 'CloseEvent is not available';
181 }
182 addToLog(logMessage + ')');
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]183 };
184
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]185 if (protocols) {
186 addToLog('Connect ' + url + ' (protocols = ' + protocols + ')');
187 } else {
188 addToLog('Connect ' + url);
189 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]190}
191
tyoshino@chromium.org28e12002010-12-24 09:40:48[diff] [blame]192function closeSocket() {
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]193 if (!socket) {
194 addToLog('Not connected');
195 return;
196 }
197
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]198 if (codeBox.value || reasonBox.value) {
199 socket.close(codeBox.value, reasonBox.value);
200 } else {
201 socket.close();
202 }
tyoshino@chromium.org28e12002010-12-24 09:40:48[diff] [blame]203}
204
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]205function printState() {
206 if (!socket) {
207 addToLog('Not connected');
208 return;
209 }
210
211 addToLog(
212 'url = ' + socket.url +
213 ', readyState = ' + socket.readyState +
214 ', bufferedAmount = ' + socket.bufferedAmount);
215}
216
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]217function init() {
218 var scheme = window.location.protocol == 'https:' ? 'wss://' : 'ws://';
219 var defaultAddress = scheme + window.location.host + '/echo';
220
221 addressBox = document.getElementById('address');
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]222 protocolsBox = document.getElementById('protocols');
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]223 logBox = document.getElementById('log');
224 messageBox = document.getElementById('message');
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]225 fileBox = document.getElementById('file');
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]226 codeBox = document.getElementById('code');
227 reasonBox = document.getElementById('reason');
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]228
229 addressBox.value = defaultAddress;
tyoshino@chromium.org6089e1e2011-05-09 09:15:31[diff] [blame]230
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]231 if ('MozWebSocket' in window) {
232 addToLog('Use MozWebSocket');
233 } else if (!('WebSocket' in window)) {
tyoshino@chromium.org6089e1e2011-05-09 09:15:31[diff] [blame]234 addToLog('WebSocket is not available');
235 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]236}
237</script>
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]238<style type="text/css">
239form {
240 margin: 0px;
241}
242
243#connect_div, #log_div, #send_div, #sendfile_div, #close_div, #printstate_div {
244 padding: 5px;
245 margin: 5px;
246 border-width: 0px 0px 0px 10px;
247 border-style: solid;
248 border-color: silver;
249}
250</style>
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]251</head>
252<body onload="init()">
253
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]254<div>
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]255
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]256<div id="connect_div">
257 <form action="#" onsubmit="connect(); return false;">
258 url <input type="text" id="address" size="40">
259 <input type="submit" value="connect">
260 <br/>
261 protocols <input type="text" id="protocols" size="20">
262 </form>
263</div>
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]264
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]265<div id="log_div">
266 <textarea id="log" rows="10" cols="40" readonly></textarea>
267 <br/>
268 <input type="checkbox"
269 name="showtimestamp"
270 value="showtimestamp"
271 onclick="showTimeStamp = this.checked">Show time stamp
272</div>
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]273
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]274<div id="send_div">
275 <form action="#" onsubmit="send(); return false;">
276 data <input type="text" id="message" size="40">
277 <input type="submit" value="send">
278 </form>
279</div>
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]280
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]281<div id="sendfile_div">
282 <form action="#" onsubmit="sendfile(); return false;">
283 <input type="file" id="file" size="40">
284 <input type="submit" value="send file">
285 </form>
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]286
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]287 Set binaryType
288 <input type="radio"
289 name="binarytype"
290 value="blob"
291 onclick="setbinarytype('blob')" checked>blob
292 <input type="radio"
293 name="binarytype"
294 value="arraybuffer"
295 onclick="setbinarytype('arraybuffer')">arraybuffer
296</div>
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]297
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame^]298<div id="close_div">
299 <form action="#" onsubmit="closeSocket(); return false;">
300 code <input type="text" id="code" size="10">
301 reason <input type="text" id="reason" size="20">
302 <input type="submit" value="close">
303 </form>
304</div>
305
306<div id="printstate_div">
307 <input type="button" value="print state" onclick="printState();">
308</div>
309
310</div>
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]311
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]312</body>
313</html>