gigawatts/wsecho.html

## wsecho.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebSocket Echo Client</title>
</head>
<body>
    <h1>WebSocket Echo Client</h1>
    <p>
        <script language="JavaScript">
          document.write('<input id="server" type="text" value="ws://' + window.location.hostname + '/ws" size="40">' );
        </script>
        <button onclick="openSocket()">Open</button>
        <button onclick="closeSocket()">Close</button>
    </p>

    <p>
        <form action="javascript:void(0);">
            <input id="message" type="text" size="40">
            <button type=submit onclick="sendText()">Send Text</button>
            <button type=button onclick="sendBinary()">Send Hex/Binary</button>
            <button type=button onclick="clearOutput()">Clear Output</button>
        </form>
    </p>

    <ul id="messages"></ul>

    <script>
        var ws;

        function openSocket() {
            log('opening');

            var url = document.getElementById('server').value;
            ws = new WebSocket(url);
            ws.binaryType = 'arraybuffer'; // default is 'blob'

            ws.onopen = function() {
                log('open');
                sessionStorage.echoServer = url;
            };

            ws.onclose = function() {
                log('close');
            };

            ws.onmessage = function(e) {
                if (e.data instanceof Blob) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        log('received blob: ' + encodeHexString(new Uint8Array(e.target.result)));
                    };
                    reader.readAsArrayBuffer(e.data);
                } else if (e.data instanceof ArrayBuffer) {
                    log('received array buffer: ' + encodeHexString(new Uint8Array(e.data)));
                } else {
                    log('received: ' + e.data);
                }
            };

            ws.onerror = function() {
                log('error');
            };
        }

        function closeSocket() {
            log('closing');
            ws.close();
        }

        function sendText() {
            var message = document.getElementById('message').value;
            log('sending: ' + message);
            ws.send(message);
        }

        function sendBinary() {
            var message = decodeHexString(document.getElementById('message').value);
            log('sending binary: ' + encodeHexString(message));
            ws.send(new Uint8Array(message).buffer);
        }

        function clearOutput() {
            document.getElementById('messages').innerHTML = "";
        }

        function decodeHexString(text) {
            if (text.search(/[^0-9a-f\s]/i) !== -1) {
                alert('Can\'t decode "' + text + '" as hexadecimal...');
            } else {
                text = text.replace(/\s/g, '');
                if (text.length % 2 === 1) {
                    text = '0' + text;
                }
                var data = [];
                for (var i = 0, len = text.length; i < len; i += 2) {
                    data.push(parseInt(text.substr(i, 2), 16));
                }
                return data;
            }
        }

        function encodeHexString(data) {
            var bytes = [];
            for (var i = 0, len = data.length; i < len; i++) {
                var value = data[i];
                bytes[i] = value.toString(16);
                if (value < 16) {
                    bytes[i] = '0' + bytes[i];
                }
            }
            return bytes.join(' ');
        }

        function log(message) {
            var li = document.createElement('li');
            li.innerHTML = message;
            document.getElementById('messages').appendChild(li);
        }

        if (sessionStorage.echoServer) {
            document.getElementById('server').value = sessionStorage.echoServer;
        }
    </script>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>WebSocket Echo Client</title>
	</head>
	<body>
	<h1>WebSocket Echo Client</h1>
	<p>
	<script language="JavaScript">
	document.write('<input id="server" type="text" value="ws://' + window.location.hostname + '/ws" size="40">' );
	</script>
	<button onclick="openSocket()">Open</button>
	<button onclick="closeSocket()">Close</button>
	</p>

	<p>
	<form action="javascript:void(0);">
	<input id="message" type="text" size="40">
	<button type=submit onclick="sendText()">Send Text</button>
	<button type=button onclick="sendBinary()">Send Hex/Binary</button>
	<button type=button onclick="clearOutput()">Clear Output</button>
	</form>
	</p>

	<ul id="messages"></ul>

	<script>
	var ws;

	function openSocket() {
	log('opening');

	var url = document.getElementById('server').value;
	ws = new WebSocket(url);
	ws.binaryType = 'arraybuffer'; // default is 'blob'

	ws.onopen = function() {
	log('open');
	sessionStorage.echoServer = url;
	};

	ws.onclose = function() {
	log('close');
	};

	ws.onmessage = function(e) {
	if (e.data instanceof Blob) {
	var reader = new FileReader();
	reader.onload = function(e) {
	log('received blob: ' + encodeHexString(new Uint8Array(e.target.result)));
	};
	reader.readAsArrayBuffer(e.data);
	} else if (e.data instanceof ArrayBuffer) {
	log('received array buffer: ' + encodeHexString(new Uint8Array(e.data)));
	} else {
	log('received: ' + e.data);
	}
	};

	ws.onerror = function() {
	log('error');
	};
	}

	function closeSocket() {
	log('closing');
	ws.close();
	}

	function sendText() {
	var message = document.getElementById('message').value;
	log('sending: ' + message);
	ws.send(message);
	}

	function sendBinary() {
	var message = decodeHexString(document.getElementById('message').value);
	log('sending binary: ' + encodeHexString(message));
	ws.send(new Uint8Array(message).buffer);
	}

	function clearOutput() {
	document.getElementById('messages').innerHTML = "";
	}

	function decodeHexString(text) {
	if (text.search(/[^0-9a-f\s]/i) !== -1) {
	alert('Can\'t decode "' + text + '" as hexadecimal...');
	} else {
	text = text.replace(/\s/g, '');
	if (text.length % 2 === 1) {
	text = '0' + text;
	}
	var data = [];
	for (var i = 0, len = text.length; i < len; i += 2) {
	data.push(parseInt(text.substr(i, 2), 16));
	}
	return data;
	}
	}

	function encodeHexString(data) {
	var bytes = [];
	for (var i = 0, len = data.length; i < len; i++) {
	var value = data[i];
	bytes[i] = value.toString(16);
	if (value < 16) {
	bytes[i] = '0' + bytes[i];
	}
	}
	return bytes.join(' ');
	}

	function log(message) {
	var li = document.createElement('li');
	li.innerHTML = message;
	document.getElementById('messages').appendChild(li);
	}

	if (sessionStorage.echoServer) {
	document.getElementById('server').value = sessionStorage.echoServer;
	}
	</script>
	</body>
	</html>