ismasan · December 5, 2009 17:47
diff --git a/gistfile1.htm b/gistfile1.htm
 <!DOCTYPE html>
 <html>
    <head>
      <style type="text/css" media="screen">
        body {
          padding:1em;margin:0;
        }
        .line.close {
          color:red;
        }
        .line.open {
          color:green;
        }
        body,
        #message {
          font-family: monaco, unicode, sans-serif;
          font-size: 12px;
          background:#000;
          color:yellow;
          border-width:0;
        }
        #message {width:100%;}
        #message:focus {
          outline:none;
        }
      </style>
        <script>
            // webSocket is referenced from the HTML-elements, so it has to stay
            // in the global scope.
            var webSocket;

            function ready() {
                var out = document.getElementById('out');
                webSocket = new WebSocket('ws://localhost:3000/exec');

                webSocket.onopen = function() {
                    out.innerHTML += '<div class="line open">Connection opened.</div>';
                };

                webSocket.onmessage = function(event) {
                  var data = event.data.replace("\n", "<br />");
                  console.log(data);
                  out.innerHTML += "<div class='line'>"+data + '</div>';
                };

                webSocket.onclose = function() {
                    out.innerHTML += '<div class="line close">Connection closed.</div>';
                    setTimeout(function(){
                      console.log("REOPENING!!");
                    }, 5000);
                };
                document.getElementById('message').focus();
            };
            function keypressed(){ 
              if(event.keyCode=='13'){
                var m = document.getElementById('message').value;
                if(m == 'exit'){
                  webSocket.close();
                } else if(m != '') {
                  webSocket.send(m);
                  document.getElementById('message').value = '';
                  document.getElementById('message').focus();
                }
              } 
            };
            window.onkeypress = keypressed;
        </script>
    </head>
    <body onload="ready();">
      <div id="terminal">
        <div id="out"></div>
        <input type="text" id="message" value="" />
      </div>

    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css" media="screen">
	body {
	padding:1em;margin:0;
	}
	.line.close {
	color:red;
	}
	.line.open {
	color:green;
	}
	body,
	#message {
	font-family: monaco, unicode, sans-serif;
	font-size: 12px;
	background:#000;
	color:yellow;
	border-width:0;
	}
	#message {width:100%;}
	#message:focus {
	outline:none;
	}
	</style>
	<script>
	// webSocket is referenced from the HTML-elements, so it has to stay
	// in the global scope.
	var webSocket;

	function ready() {
	var out = document.getElementById('out');
	webSocket = new WebSocket('ws://localhost:3000/exec');

	webSocket.onopen = function() {
	out.innerHTML += '<div class="line open">Connection opened.</div>';
	};

	webSocket.onmessage = function(event) {
	var data = event.data.replace("\n", "<br />");
	console.log(data);
	out.innerHTML += "<div class='line'>"+data + '</div>';
	};

	webSocket.onclose = function() {
	out.innerHTML += '<div class="line close">Connection closed.</div>';
	setTimeout(function(){
	console.log("REOPENING!!");
	}, 5000);
	};
	document.getElementById('message').focus();
	};
	function keypressed(){
	if(event.keyCode=='13'){
	var m = document.getElementById('message').value;
	if(m == 'exit'){
	webSocket.close();
	} else if(m != '') {
	webSocket.send(m);
	document.getElementById('message').value = '';
	document.getElementById('message').focus();
	}
	}
	};
	window.onkeypress = keypressed;
	</script>
	</head>
	<body onload="ready();">
	<div id="terminal">
	<div id="out"></div>
	<input type="text" id="message" value="" />
	</div>

	</body>
	</html>