mamrehn/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Quick way to test binary websocket API behaviour.
Example outcome:
# Up
object [object ArrayBuffer], Key data: 38, String data: ☁
string , Key data: 38, String data: ☁

# Down
object [object ArrayBuffer], Key data: 40, String data: ⠁
string , Key data: 40, String data: ⠁

#Left
object [object ArrayBuffer], Key data: 37, String data: ━
string , Key data: 37, String data: ━

#Right
object [object ArrayBuffer], Key data: 39, String data: ✁
string , Key data: 39, String data: ✁

# Strg + c
object [object ArrayBuffer], Key data: 17, String data: ᄁ
object [object ArrayBuffer], Key data: 67, String data: 䌁
string , Key data: 67, String data: 䌁
string , Key data: 17, String data: ᄁ

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Binary Websocket Test</title>
</head>
<body>
  <script type="text/javascript">
    window.WebSocket = window.WebSocket || window.MozWebSocket;
    var connection = new WebSocket('ws://echo.websocket.org');
    connection.binaryType = "arraybuffer";

    connection.onmessage = function(event) {
      var node = document.getElementById('log');
      var t = typeof(event.data) + ' ' + event.data;
      if (event.data instanceof ArrayBuffer){
        // 1 === new Uint8Array(event.data)[0]
        t += ', Key data: ' + new Uint8Array(event.data)[1];
        t += ', String data: ' + String.fromCharCode.apply(null, new Uint16Array(event.data));
      }
      var para = document.createElement("p");
      para.innerHTML = t;
      node.appendChild(para);
    };
    window.onkeydown = function(e) {
      var byteArray = new Uint8Array(2);
      byteArray[0] = 1;
      byteArray[1] = e.keyCode;
      connection.send(byteArray.buffer);
    };
    window.onkeyup = function(e) {
      var c = String.fromCharCode(e.keyCode * 256 + 1)
      connection.send(', Key data: '+ e.keyCode + ', String data: ' + c);
    };
  </script>
  <h2>Binary Websocket Test</h2>
  <p>Log:</p>
  <div style="margin-left: 6px; padding-left: 2px;" id="log"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Binary Websocket Test</title>
	</head>
	<body>
	<script type="text/javascript">
	window.WebSocket = window.WebSocket \|\| window.MozWebSocket;
	var connection = new WebSocket('ws://echo.websocket.org');
	connection.binaryType = "arraybuffer";

	connection.onmessage = function(event) {
	var node = document.getElementById('log');
	var t = typeof(event.data) + ' ' + event.data;
	if (event.data instanceof ArrayBuffer){
	// 1 === new Uint8Array(event.data)[0]
	t += ', Key data: ' + new Uint8Array(event.data)[1];
	t += ', String data: ' + String.fromCharCode.apply(null, new Uint16Array(event.data));
	}
	var para = document.createElement("p");
	para.innerHTML = t;
	node.appendChild(para);
	};
	window.onkeydown = function(e) {
	var byteArray = new Uint8Array(2);
	byteArray[0] = 1;
	byteArray[1] = e.keyCode;
	connection.send(byteArray.buffer);
	};
	window.onkeyup = function(e) {
	var c = String.fromCharCode(e.keyCode * 256 + 1)
	connection.send(', Key data: '+ e.keyCode + ', String data: ' + c);
	};
	</script>
	<h2>Binary Websocket Test</h2>
	<p>Log:</p>
	<div style="margin-left: 6px; padding-left: 2px;" id="log"></div>
	</body>
	</html>