appengine/websockets/views/index.pug

//- Copyright 2018 Google LLC.
//-
//- Licensed under the Apache License, Version 2.0 (the "License");
//- you may not use this file except in compliance with the License.
//- You may obtain a copy of the License at
//-
//-     http://www.apache.org/licenses/LICENSE-2.0
//-
//- Unless required by applicable law or agreed to in writing, software
//- distributed under the License is distributed on an "AS IS" BASIS,
//- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//- See the License for the specific language governing permissions and
//- limitations under the License.

//- [START gae_websockets_index]
//- [START appengine_websockets_index]
doctype html
html(lang="en")
  head
    title Socket.IO chat on App Engine
    meta(charset="utf-8")
    style.
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
  //- [START gae_websockets_form]
  //- [START appengine_websockets_form]
  body
    ul(id="messages")
    form(action="")
      input(id="m" autocomplete="off")
      button Send
    //- [END appengine_websockets_form]
    //- [END gae_websockets_form]

    script(src="/socket.io/socket.io.js")
    script(src="https://code.jquery.com/jquery-1.11.1.js")
    script.
      // [START gae_websockets_js]
      // [START appengine_websockets_js]
      $(function () {
        var socket = io();
        $('form').submit(function(){
          console.log($('#m').val());
          socket.emit('chat message', $('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('chat message', function(msg){
          console.log(msg);
          $('#messages').append($('<li>').text(msg));
          window.scrollTo(0, document.body.scrollHeight);
        });
      });
      // [END appengine_websockets_js]
      // [END gae_websockets_js]
//- [END appengine_websockets_index]
//- [END gae_websockets_index]