Websocket chat tester

#!/usr/bin/env ruby

require 'sinatra'
require 'tilt/haml'

set :server, :thin

get '/' do
  haml :show
end

__END__

@@layout

%html
  %link{:crossorigin => "anonymous", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css", :integrity => "sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==", :rel => "stylesheet"}/
  %script{:src => "//code.jquery.com/jquery-1.11.3.min.js"}
  = yield

@@show

:javascript
  var chat_room = null;
  var ws = null;

  var clean = function(data) {
    return data.replace(/<(?:.|\n)*?>/gm, '');
  }

  var resetFormElement = function(e) {
    e.wrap('<form>').closest('form').get(0).reset();
    e.unwrap();

    // Prevent form submission
    e.stopPropagation();
    e.preventDefault();
  }

  var init_enter_chat_room_form = function(){
    $form = $('#enter_chat_room');
    $chat_room_field = $('#chat_room', $form);
    $user_name_field = $('#user_name', $form);

    $chat_room_field.focus();

    $form.submit(function(){
      chat_room = clean($chat_room_field.val());
      user_name = clean($user_name_field.val());

      $chat_room_field.val(chat_room);
      $user_name_field.val(user_name);

      if (chat_room == '' || user_name == '') { return false; }

      $form.hide();
      init_chat_session();

      return false;
    });
  }

  var init_chat_session = function(){
    ws = new WebSocket("ws://127.0.0.1:8080/" + chat_room);

    ws.onerror = function() {};
    ws.onclose = function() {};

    ws.onopen = function(){
      init_send_message_form();
    };

    ws.onmessage = function (e) {
      data = JSON.parse(e.data);
      var new_message = "<dt>"+data.user_name+"</dt><dd>"+data.message+"</dd>";
      if (data.image) {
        new_message += "<dd><img src=\"" + data.image + "\" height=\"200\" alt=\"Image loading...\"></dd>"
      }
      $('#chat_messages').append(new_message);
    };
  }

  var init_send_message_form = function(){
    $('#send_message').show();
    $('#chat_room_ro', $('#send_message')).val(chat_room);
    $form = $('#send_message');
    $message_field = $('#message', $form);
    $message_field.focus();
    $image_field = $('#image', $form);
    $image_preview = $('#image_preview', $form);
    $form.submit(function(){
      message = clean($message_field.val());
      if (message == '') { return false; }

      data = {
        user_name: user_name,
        chat_room: chat_room,
        message: message,
        image: $image_preview.attr("src")
      }

      try {
        ws.send(JSON.stringify(data));
      }
      catch(err) {
        console.debug(err);
      }

      $message_field.val("");
      $image_field.html($image_field.html());
      $image_preview.attr("src", "");
      return false;
    });

    $image_field.on("change", function () {
      var file = $image_field.get(0).files[0];
      var r = new FileReader();

      console.log("!!!");
      r.onload = function () {
        $image_preview.attr("src", r.result);
      }

      if (file) {
        r.readAsDataURL(file);
      } else {
        $image_preview.attr("src", "")
      }
    });

  };

  $(document).ready(function(){
    init_enter_chat_room_form();
  });

.container-fluid
  .row
    .col-md-4
      %form#enter_chat_room{:role => "form"}
        .form-group
          %label{:for => "chat_room"} Chat room
          %input#chat_room.form-control{:placeholder => "Enter chat room", :type => "text"}/
        .form-group
          %label{:for => "user_name"} Name
          %input#user_name.form-control{:placeholder => "Enter name", :type => "text"}/
        %button.btn.btn-default{:type => "submit"} Enter
      %form#send_message{:role => "form", style: "display:none"}
        .form-group
          %label{:for => "chat_room"} Chat Room
          %input#chat_room_ro.form-control{:readonly => "readonly", :type => "text"}/
        .form-group
          %label{:for => "message"} Message
          %input#message.form-control{:placeholder => "Enter message", :type => "text"}/
        .form-group
          %label{:for => "image"} Image
          %input#image.form-control{:type => "file"}/
          %img#image_preview{:alt => "Image preview...", :height => "200", :src => ""}/
        %button.btn.btn-default{:type => "submit"} Submit
    .col-md-8
      %dl#chat_messages.dl-horizontal