Source

gaechat / room.html

Full commit
<html>
  <head>
      <title>Simple ChatRoom based on Google Channel</title>
      <script src='/_ah/channel/jsapi'></script>
  </head>
  <body>
    <script type='text/javascript'>
      var state = {
        name: '{{ name }}',
        me: '{{ me }}'
      };
      sendMessage = function(path, opt_param) {
        path += '?name=' + state.name;
        if (opt_param) {
          path += '&' + opt_param;
        }
        var xhr = new XMLHttpRequest();
        xhr.open('POST', path, true);
        xhr.send();
      };
      sayWords = function(message) {
        sendMessage('/saywords', 'message=' + message);
      }
      onOpened = function() {
        sendMessage('/opened');
      };
      onMessage = function(m) {
        newState = JSON.parse(m.data);
        state.user = newState.user || state.user;
        state.curtime = newState.curtime || state.curtime;
        state.message = newState.message || state.message;
        var message = document.getElementById('message-table');
        var temp_tr = document.createElement("tr");
        var temp_td = document.createElement("tr");
        var temp_node = document.createTextNode(state.user + ' said "' + state.message + '" at ' + state.curtime);
        temp_td.appendChild(temp_node);
        temp_tr.appendChild(temp_td);
        message.appendChild(temp_tr);
      }
      openChannel = function() {
        var token = '{{ token }}';
        var channel = new goog.appengine.Channel(token);
        var handler = {
          'onopen': onOpened,
          'onmessage': onMessage,
          'onerror': function() {},
          'onclose': function() {}
        };
        var socket = channel.open(handler);
        socket.onopen = onOpened;
        socket.onmessage = onMessage;
      }
      initialize = function() {
        openChannel();
        var say = document.getElementById('say');
        say.onclick = function(){
            var words = document.getElementById('words').value;
            sayWords(words);
        };
        onMessage({data: '{{ initial_message }}'});
      }
      setTimeout(initialize, 100);
    </script>
    <div id='display-area'>
      <h2>Simple ChatRoom based on Google Channel</h2>
      <div id="message-list">
        <table id="message-table">
        </table>
      </div>
      <br/>
      <div>
        <input type="text" value="say words..." name="words" id="words" />
        <input type="button" value="SAY" name="say" id="say" />
      </div>
      <br/>
      <div id='this-game' float='top'>
        Invite other people to chat: <span id='this-game-link'><a href='{{ room_link }}'>{{ room_link }}</a></span>
      </div>
    </div>
  </body>
</html>