jamchamb/interactive-websocket.html

## interactive-websocket.html
<!doctype HTML>
<html>
  <head>
  <meta charset="utf-8" />
  <title>WebSocket Test</title>
  </head>
  <body>
  <script language="javascript" type="text/javascript">
    //var wsUri = 'ws://demos.kaazing.com/echo';
    var output;

    function init()
    {
        output = document.getElementById("output");
        testWebSocket();
    }

    function testWebSocket(wsUri)
    {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) { onOpen(evt) };
        websocket.onclose = function(evt) { onClose(evt) };
        websocket.onmessage = function(evt) { onMessage(evt) };
        websocket.onerror = function(evt) { onError(evt) };
    }

    function onOpen(evt)
    {
        writeToScreen("CONNECTED");
        //doSend("hello");
    }

    function onClose(evt)
    {
        writeToScreen("DISCONNECTED: " + evt.code);
        writeToScreen(evt.reason);
    }

    function onMessage(evt)
    {
        writeToScreen('RESPONSE: ' + evt.data, 'blue');
      //websocket.close();
    }

    function onError(evt)
    {
        writeToScreen('ERROR: ' + evt.data, 'red');
    }

    function doSend(message)
    {
        writeToScreen("SENT: " + message);
        websocket.send(message);
    }

    function writeToScreen(message, color='black')
    {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.style.color = color;
        pre.innerText = message;
        output.appendChild(pre);
    }

    window.addEventListener("load", init, false);
    </script>

  <h2>WebSocket Test</h2>
  <form>
    <input type="text" id="wsUri" value="ws://demos.kaazing.com/echo" size="70">
    <input type="button" id="connectButton" value="Connect" onClick="testWebSocket(getElementById('wsUri').value)">
    <input type="button" id="disconnectButton" value="Disconnect" onClick="websocket.close()">
    <br>

    <textarea id="sendtext">hello world</textarea>
    <input type="button" id="sendbutton" value="Send" onClick="doSend(getElementById('sendtext').value)">
  </form>
  <div id="output"></div>
</body>
</html>
	<!doctype HTML>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>WebSocket Test</title>
	</head>
	<body>
	<script language="javascript" type="text/javascript">
	//var wsUri = 'ws://demos.kaazing.com/echo';
	var output;

	function init()
	{
	output = document.getElementById("output");
	testWebSocket();
	}

	function testWebSocket(wsUri)
	{
	websocket = new WebSocket(wsUri);
	websocket.onopen = function(evt) { onOpen(evt) };
	websocket.onclose = function(evt) { onClose(evt) };
	websocket.onmessage = function(evt) { onMessage(evt) };
	websocket.onerror = function(evt) { onError(evt) };
	}

	function onOpen(evt)
	{
	writeToScreen("CONNECTED");
	//doSend("hello");
	}

	function onClose(evt)
	{
	writeToScreen("DISCONNECTED: " + evt.code);
	writeToScreen(evt.reason);
	}

	function onMessage(evt)
	{
	writeToScreen('RESPONSE: ' + evt.data, 'blue');
	//websocket.close();
	}

	function onError(evt)
	{
	writeToScreen('ERROR: ' + evt.data, 'red');
	}

	function doSend(message)
	{
	writeToScreen("SENT: " + message);
	websocket.send(message);
	}

	function writeToScreen(message, color='black')
	{
	var pre = document.createElement("p");
	pre.style.wordWrap = "break-word";
	pre.style.color = color;
	pre.innerText = message;
	output.appendChild(pre);
	}

	window.addEventListener("load", init, false);
	</script>

	<h2>WebSocket Test</h2>
	<form>
	<input type="text" id="wsUri" value="ws://demos.kaazing.com/echo" size="70">
	<input type="button" id="connectButton" value="Connect" onClick="testWebSocket(getElementById('wsUri').value)">
	<input type="button" id="disconnectButton" value="Disconnect" onClick="websocket.close()">
	<br>

	<textarea id="sendtext">hello world</textarea>
	<input type="button" id="sendbutton" value="Send" onClick="doSend(getElementById('sendtext').value)">
	</form>
	<div id="output"></div>
	</body>
	</html>