hanzo-chat/views/index.pug

doctype html
html(lang="en")
  head
    title Websockets Echo
    meta(charset="utf-8")
  //- [START form]
  body(data-external-ip=externalIp)
    p Echo demo
    form(id="echo-form")
      textarea(id="echo-text", placeholder="Enter some text...")
      button(type="submit") Send

    div
      p Response:
      pre(id="echo-response")

    div
      p Status:
      pre(id="echo-status")
    //- [END form]

    script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js")
    script.
      // [START js]
      $(function() {
        /* The external ip is determined by app.js and passed into the template. */
        var webSocketHost = location.protocol === 'https:' ? 'wss://' : 'ws://';
        var externalIp = $('body').data('external-ip');
        var webSocketUri =  webSocketHost + externalIp + ':65080/echo';

        /* Get elements from the page */
        var form = $('#echo-form');
        var textarea = $('#echo-text');
        var output = $('#echo-response');
        var status = $('#echo-status');

        /* Helper to keep an activity log on the page. */
        function log(text){
          status.text(status.text() + text + '\n');
        }

        /* Establish the WebSocket connection and register event handlers. */
        var websocket = new WebSocket(webSocketUri);

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

        websocket.onclose = function() {
          log('Closed');
        };

        websocket.onmessage = function(e) {
          log('Message received');
          output.text(e.data);
        };

        websocket.onerror = function(e) {
          log('Error (see console)');
          console.log(e);
        };

        /* Handle form submission and send a message to the websocket. */
        form.submit(function(e) {
          e.preventDefault();
          var data = textarea.val();
          websocket.send(data);
        });
      });
      // [END js]