Google Git
Sign in
chromium / external / pywebsocket / src / a4f0c32fa47bcdb4fa3c1cd103afffd4c2a79ee9 / . / example / console.html
blob: ccd6d8f80676b9991e22dfc7ec85083411ddd0b3 [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 {
141 return;
142 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]143
144 socket.onopen = function () {
tyoshino@chromium.orgcb349e82013-10-24 07:28:58[diff] [blame]145 var extraInfo = [];
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]146 if (('protocol' in socket) && socket.protocol) {
tyoshino@chromium.orgcb349e82013-10-24 07:28:58[diff] [blame]147 extraInfo.push('protocol = ' + socket.protocol);
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]148 }
tyoshino@chromium.orgcb349e82013-10-24 07:28:58[diff] [blame]149 if (('extensions' in socket) && socket.extensions) {
150 extraInfo.push('extensions = ' + socket.extensions);
151 }
152
153 var logMessage = 'Opened';
154 if (extraInfo.length > 0) {
155 logMessage += ' (' + extraInfo.join(', ') + ')';
156 }
157 addToLog(logMessage);
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]158 };
159 socket.onmessage = function (event) {
tyoshino@chromium.org4a98c442012-11-05 10:59:27[diff] [blame]160 if (('ArrayBuffer' in window) && (event.data instanceof ArrayBuffer)) {
161 addToLog('< Received an ArrayBuffer of ' + event.data.byteLength +
162 ' bytes')
163 } else if (('Blob' in window) && (event.data instanceof Blob)) {
164 addToLog('< Received a Blob of ' + event.data.size + ' bytes')
165 } else {
166 addToLog('< ' + event.data);
167 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]168 };
169 socket.onerror = function () {
170 addToLog('Error');
171 };
tyoshino@chromium.org6089e1e2011-05-09 09:15:31[diff] [blame]172 socket.onclose = function (event) {
173 var logMessage = 'Closed (';
174 if ((arguments.length == 1) && ('CloseEvent' in window) &&
175 (event instanceof CloseEvent)) {
176 logMessage += 'wasClean = ' + event.wasClean;
177 // code and reason are present only for
178 // draft-ietf-hybi-thewebsocketprotocol-06 and later
179 if ('code' in event) {
180 logMessage += ', code = ' + event.code;
181 }
182 if ('reason' in event) {
183 logMessage += ', reason = ' + event.reason;
184 }
185 } else {
186 logMessage += 'CloseEvent is not available';
187 }
188 addToLog(logMessage + ')');
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]189 };
190
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]191 if (protocols) {
192 addToLog('Connect ' + url + ' (protocols = ' + protocols + ')');
193 } else {
194 addToLog('Connect ' + url);
195 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]196}
197
tyoshino@chromium.org28e12002010-12-24 09:40:48[diff] [blame]198function closeSocket() {
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]199 if (!socket) {
200 addToLog('Not connected');
201 return;
202 }
203
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]204 if (codeBox.value || reasonBox.value) {
205 socket.close(codeBox.value, reasonBox.value);
206 } else {
207 socket.close();
208 }
tyoshino@chromium.org28e12002010-12-24 09:40:48[diff] [blame]209}
210
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]211function printState() {
212 if (!socket) {
213 addToLog('Not connected');
214 return;
215 }
216
217 addToLog(
218 'url = ' + socket.url +
219 ', readyState = ' + socket.readyState +
220 ', bufferedAmount = ' + socket.bufferedAmount);
221}
222
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]223function init() {
224 var scheme = window.location.protocol == 'https:' ? 'wss://' : 'ws://';
225 var defaultAddress = scheme + window.location.host + '/echo';
226
227 addressBox = document.getElementById('address');
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]228 protocolsBox = document.getElementById('protocols');
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]229 logBox = document.getElementById('log');
230 messageBox = document.getElementById('message');
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]231 fileBox = document.getElementById('file');
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]232 codeBox = document.getElementById('code');
233 reasonBox = document.getElementById('reason');
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]234
235 addressBox.value = defaultAddress;
tyoshino@chromium.org6089e1e2011-05-09 09:15:31[diff] [blame]236
tyoshino@chromium.org1d504df2014-04-25 06:21:26[diff] [blame]237 if (!('WebSocket' in window)) {
tyoshino@chromium.org6089e1e2011-05-09 09:15:31[diff] [blame]238 addToLog('WebSocket is not available');
239 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]240}
241</script>
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]242<style type="text/css">
243form {
244 margin: 0px;
245}
246
247#connect_div, #log_div, #send_div, #sendfile_div, #close_div, #printstate_div {
248 padding: 5px;
249 margin: 5px;
250 border-width: 0px 0px 0px 10px;
251 border-style: solid;
252 border-color: silver;
253}
254</style>
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]255</head>
256<body onload="init()">
257
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]258<div>
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]259
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]260<div id="connect_div">
261 <form action="#" onsubmit="connect(); return false;">
262 url <input type="text" id="address" size="40">
263 <input type="submit" value="connect">
264 <br/>
265 protocols <input type="text" id="protocols" size="20">
266 </form>
267</div>
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]268
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]269<div id="log_div">
270 <textarea id="log" rows="10" cols="40" readonly></textarea>
271 <br/>
272 <input type="checkbox"
273 name="showtimestamp"
274 value="showtimestamp"
275 onclick="showTimeStamp = this.checked">Show time stamp
276</div>
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]277
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]278<div id="send_div">
279 <form action="#" onsubmit="send(); return false;">
280 data <input type="text" id="message" size="40">
281 <input type="submit" value="send">
282 </form>
283</div>
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]284
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]285<div id="sendfile_div">
286 <form action="#" onsubmit="sendfile(); return false;">
287 <input type="file" id="file" size="40">
288 <input type="submit" value="send file">
289 </form>
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]290
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]291 Set binaryType
292 <input type="radio"
293 name="binarytype"
294 value="blob"
295 onclick="setbinarytype('blob')" checked>blob
296 <input type="radio"
297 name="binarytype"
298 value="arraybuffer"
299 onclick="setbinarytype('arraybuffer')">arraybuffer
300</div>
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]301
tyoshino@chromium.org8e925282013-01-25 05:58:07[diff] [blame]302<div id="close_div">
303 <form action="#" onsubmit="closeSocket(); return false;">
304 code <input type="text" id="code" size="10">
305 reason <input type="text" id="reason" size="20">
306 <input type="submit" value="close">
307 </form>
308</div>
309
310<div id="printstate_div">
311 <input type="button" value="print state" onclick="printState();">
312</div>
313
314</div>
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]315
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]316</body>
317</html>