Tornado and Friends: SockJS-Tornado : chat example

<!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.3.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://' + window.location.host + '/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>
Tornado and Friends

Wednesday, May 28, 2014

SockJS-Tornado : chat example - html part

No comments:

Post a Comment
