1<!--
2Copyright 2011, Google Inc.
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
47var showTimeStamp = false;
48
49var addressBox = null;
50var logBox = null;
51var messageBox = null;
52var fileBox = null;
53var codeBox = null;
54var reasonBox = null;
55
56function getTimeStamp() {
57  return new Date().getTime();
58}
59
60function addToLog(log) {
61  if (showTimeStamp) {
62    logBox.value += '[' + getTimeStamp() + '] ';
63  }
64  logBox.value += log + '\n'
65  // Large enough to keep showing the latest message.
66  logBox.scrollTop = 1000000;
67}
68
69function setbinarytype(binaryType) {
70  if (!socket) {
71    addToLog('Not connected');
72    return;
73  }
74
75  socket.binaryType = binaryType;
76  addToLog('Set binaryType to ' + binaryType);
77}
78
79function send() {
80  if (!socket) {
81    addToLog('Not connected');
82    return;
83  }
84
85  socket.send(messageBox.value);
86  addToLog('> ' + messageBox.value);
87  messageBox.value = '';
88}
89
90function sendfile() {
91  if (!socket) {
92    addToLog('Not connected');
93    return;
94  }
95
96  var files = fileBox.files;
97
98  if (files.length == 0) {
99    addToLog('File not selected');
100    return;
101  }
102
103  socket.send(files[0]);
104  addToLog('> Send ' + files[0].name);
105}
106
107function connect() {
108  if ('WebSocket' in window) {
109    socket = new WebSocket(addressBox.value);
110  } else if ('MozWebSocket' in window) {
111    socket = new MozWebSocket(addressBox.value);
112  } else {
113    return;
114  }
115
116  socket.onopen = function () {
117    addToLog('Opened');
118  };
119  socket.onmessage = function (event) {
120    addToLog('< ' + event.data);
121  };
122  socket.onerror = function () {
123    addToLog('Error');
124  };
125  socket.onclose = function (event) {
126    var logMessage = 'Closed (';
127    if ((arguments.length == 1) && ('CloseEvent' in window) &&
128        (event instanceof CloseEvent)) {
129      logMessage += 'wasClean = ' + event.wasClean;
130      // code and reason are present only for
131      // draft-ietf-hybi-thewebsocketprotocol-06 and later
132      if ('code' in event) {
133        logMessage += ', code = ' + event.code;
134      }
135      if ('reason' in event) {
136        logMessage += ', reason = ' + event.reason;
137      }
138    } else {
139      logMessage += 'CloseEvent is not available';
140    }
141    addToLog(logMessage + ')');
142  };
143
144  addToLog('Connect ' + addressBox.value);
145}
146
147function closeSocket() {
148  if (!socket) {
149    addToLog('Not connected');
150    return;
151  }
152
153  if (codeBox.value || reasonBox.value) {
154    socket.close(codeBox.value, reasonBox.value);
155  } else {
156    socket.close();
157  }
158}
159
160function printState() {
161  if (!socket) {
162    addToLog('Not connected');
163    return;
164  }
165
166  addToLog(
167      'url = ' + socket.url +
168      ', readyState = ' + socket.readyState +
169      ', bufferedAmount = ' + socket.bufferedAmount);
170}
171
172function init() {
173  var scheme = window.location.protocol == 'https:' ? 'wss://' : 'ws://';
174  var defaultAddress = scheme + window.location.host + '/echo';
175
176  addressBox = document.getElementById('address');
177  logBox = document.getElementById('log');
178  messageBox = document.getElementById('message');
179  fileBox = document.getElementById('file');
180  codeBox = document.getElementById('code');
181  reasonBox = document.getElementById('reason');
182
183  addressBox.value = defaultAddress;
184
185  if ('MozWebSocket' in window) {
186    addToLog('Use MozWebSocket');
187  } else if (!('WebSocket' in window)) {
188    addToLog('WebSocket is not available');
189  }
190}
191</script>
192</head>
193<body onload="init()">
194
195<form action="#" onsubmit="connect(); return false;">
196<input type="text" id="address" size="40">
197<input type="submit" value="connect">
198<input type="button" value="print state" onclick="printState();">
199</form>
200
201<textarea id="log" rows="10" cols="40" readonly></textarea>
202
203<form action="#" onsubmit="send(); return false;">
204<input type="text" id="message" size="40">
205<input type="submit" value="send">
206</form>
207
208<form action="#" onsubmit="sendfile(); return false;">
209<input type="file" id="file" size="40">
210<input type="submit" value="send file">
211</form>
212
213<form>
214<input type="radio"
215       name="binarytype"
216       value="blob"
217       onclick="setbinarytype('blob')" checked>blob
218<input type="radio"
219       name="binarytype"
220       value="arraybuffer"
221       onclick="setbinarytype('arraybuffer')">arraybuffer
222</form>
223
224<form>
225<input type="checkbox"
226       name="showtimestamp"
227       value="showtimestamp"
228       onclick="showTimeStamp = this.checked">Show time stamp
229</form>
230
231<form action="#" onsubmit="closeSocket(); return false;">
232Code <input type="text" id="code" size="10">
233Reason <input type="text" id="reason" size="20">
234<input type="submit" value="close">
235</form>
236
237</body>
238</html>
239