mrjoes · March 9, 2012 19:54
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="http://cdn.sockjs.org/sockjs-0.1.2.min.js"></script>
  <script>
    $(function() {
      var conn = null;

      function log(msg) {
        var control = $('#log');
        control.html(control.html() + msg + '<br/>');
        control.scrollTop(control.scrollTop() + 1000);
      }

      function connect() {
        disconnect();

        var transports = $('#protocols input:checked').map(function(){
            return $(this).attr('id');
        }).get();

        conn = new SockJS('http://localhost:8081/chat', transports);

        log('Connecting...');

        conn.onopen = function() {
          log('Connected.');
          update_ui();
        };

        conn.onmessage = function(e) {
          log('Received: ' + e.data);
        };

        conn.onclose = function() {
          log('Disconnected.');
          conn = null;
          update_ui();
        };
      }

      function disconnect() {
        if (conn != null) {
          log('Disconnecting...');

          conn.close();
          conn = null;

          update_ui();
        }
      }

      function update_ui() {
        var msg = '';

        if (conn == null || conn.readyState != SockJS.OPEN) {
          $('#status').text('disconnected');
          $('#connect').text('Connect');
        } else {
          $('#status').text('connected (' + conn.protocol + ')');
          $('#connect').text('Disconnect');
        }
      }

      $('#connect').click(function() {
        if (conn == null) {
          connect();
        } else {
          disconnect();
        }

        update_ui();
        return false;
      });

      $('form').submit(function() {
        var text = $('#text').val();
        log('Sending: ' + text);
        conn.send(text);
        $('#text').val('').focus();
        return false;
      });
    });
 </script>
 </head>
 <body>
 <h3>Chat!</h3>
 <div id="protocols" style="float: right">
  <ul>
    <li>
      <input id="websocket" type="checkbox" value="websocket" checked="checked"></input>
      <label for="websocket">websocket</label>
    </li>
    <li>
      <input id="xhr-streaming" type="checkbox" value="xhr-streaming" checked="checked"></input>
      <label for="xhr-streaming">xhr-streaming</label>
    </li>
    <li>
      <input id="iframe-eventsource" type="checkbox" value="iframe-eventsource" checked="checked"></input>
      <label for="iframe-eventsource">iframe-eventsource</label>
    </li>
    <li>
      <input id="iframe-htmlfile" type="checkbox" value="iframe-htmlfile" checked="checked"></input>
      <label for="iframe-htmlfile">iframe-htmlfile</label>
    </li>
    <li>
      <input id="xhr-polling" type="checkbox" value="xhr-polling" checked="checked"></input>
      <label for="xhr-polling">xhr-polling</label>
    </li>
    <li>
      <input id="iframe-xhr-polling" type="checkbox" value="iframe-xhr-polling" checked="checked"></input>
      <label for="iframe-xhr-polling">iframe-xhr-polling</label>
    </li>
    <li>
      <input id="jsonp-polling" type="checkbox" value="jsonp-polling" checked="checked"></input>
      <label for="jsonp-polling">jsonp-polling</label>
    </li>
  </ul>
 </div>

 <div>
  <a id="connect" href="#">Connect</a>&nbsp;|&nbsp;Status: <span id="status">disconnected</span>
 </div>
 <div id="log" style="width: 60em; height: 20em; overflow:auto; border: 1px solid black">
 </div>
 <form id="chatform">
  <input id="text" type="text" />
  <input type="submit" />
 </form>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="http://cdn.sockjs.org/sockjs-0.1.2.min.js"></script>
	<script>
	$(function() {
	var conn = null;

	function log(msg) {
	var control = $('#log');
	control.html(control.html() + msg + '<br/>');
	control.scrollTop(control.scrollTop() + 1000);
	}

	function connect() {
	disconnect();

	var transports = $('#protocols input:checked').map(function(){
	return $(this).attr('id');
	}).get();

	conn = new SockJS('http://localhost:8081/chat', transports);

	log('Connecting...');

	conn.onopen = function() {
	log('Connected.');
	update_ui();
	};

	conn.onmessage = function(e) {
	log('Received: ' + e.data);
	};

	conn.onclose = function() {
	log('Disconnected.');
	conn = null;
	update_ui();
	};
	}

	function disconnect() {
	if (conn != null) {
	log('Disconnecting...');

	conn.close();
	conn = null;

	update_ui();
	}
	}

	function update_ui() {
	var msg = '';

	if (conn == null \|\| conn.readyState != SockJS.OPEN) {
	$('#status').text('disconnected');
	$('#connect').text('Connect');
	} else {
	$('#status').text('connected (' + conn.protocol + ')');
	$('#connect').text('Disconnect');
	}
	}

	$('#connect').click(function() {
	if (conn == null) {
	connect();
	} else {
	disconnect();
	}

	update_ui();
	return false;
	});

	$('form').submit(function() {
	var text = $('#text').val();
	log('Sending: ' + text);
	conn.send(text);
	$('#text').val('').focus();
	return false;
	});
	});
	</script>
	</head>
	<body>
	<h3>Chat!</h3>
	<div id="protocols" style="float: right">
	<ul>
	<li>
	<input id="websocket" type="checkbox" value="websocket" checked="checked"></input>
	<label for="websocket">websocket</label>
	</li>
	<li>
	<input id="xhr-streaming" type="checkbox" value="xhr-streaming" checked="checked"></input>
	<label for="xhr-streaming">xhr-streaming</label>
	</li>
	<li>
	<input id="iframe-eventsource" type="checkbox" value="iframe-eventsource" checked="checked"></input>
	<label for="iframe-eventsource">iframe-eventsource</label>
	</li>
	<li>
	<input id="iframe-htmlfile" type="checkbox" value="iframe-htmlfile" checked="checked"></input>
	<label for="iframe-htmlfile">iframe-htmlfile</label>
	</li>
	<li>
	<input id="xhr-polling" type="checkbox" value="xhr-polling" checked="checked"></input>
	<label for="xhr-polling">xhr-polling</label>
	</li>
	<li>
	<input id="iframe-xhr-polling" type="checkbox" value="iframe-xhr-polling" checked="checked"></input>
	<label for="iframe-xhr-polling">iframe-xhr-polling</label>
	</li>
	<li>
	<input id="jsonp-polling" type="checkbox" value="jsonp-polling" checked="checked"></input>
	<label for="jsonp-polling">jsonp-polling</label>
	</li>
	</ul>
	</div>

	<div>
	<a id="connect" href="#">Connect</a> \| Status: <span id="status">disconnected</span>
	</div>
	<div id="log" style="width: 60em; height: 20em; overflow:auto; border: 1px solid black">
	</div>
	<form id="chatform">
	<input id="text" type="text" />
	<input type="submit" />
	</form>
	</body>
	</html>