chat/13/template/chat.ejs - master - eb/nodejs-screencast

chat/13/template/chat.ejs
74 строки2 KB
Ilya Kantor
added part 13
07 дек 2013, 14:38
07 дек 2013, 14:38565f01b
<% layout('layout/page') -%>
<% block('title', "Чат") -%>

<script src="/vendor/bower_components/socket.io-client/dist/socket.io.js"></script>

<div id="room">
  <ul class="list-unstyled"></ul>
  <form>
    <input disabled class="form-control" autocomplete="off" autofocus placeholder="Сообщение...">
  </form>
</div>

<script>
  var input = $('#room input');
  var ul = $('#room ul');
  var form = $('#room form');

  var socket = io.connect('', {
    reconnect: false
  });

  socket
      .on('message', function(username, message) {
        printMessage(username + "> " + message);
      })
      .on('leave', function(username) {
        printStatus(username + " вышел из чата");
      })
      .on('join', function(username) {
        printStatus(username + " вошёл в чат");
      })
      .on('connect', function() {
        printStatus("соединение установлено");
        form.on('submit', sendMessage);
        input.prop('disabled', false);
      })
      .on('disconnect', function() {
        printStatus("соединение потеряно");
        form.off('submit', sendMessage);
        input.prop('disabled', true);
        this.$emit('error');
      })
      .on('logout', function() {
        location.href = "/";
      })
      .on('error', function(reason) {
        if (reason == "handshake unauthorized") {
          printStatus("вы вышли из сайта");
        } else {
          setTimeout(function() {
            socket.socket.connect();
          }, 500);
        }
      });

  function sendMessage() {
    var text = input.val();
    socket.emit('message', text, function() {
      printMessage("я> " + text);
    });

    input.val('');
    return false;
  }

  function printStatus(status) {
    $('<li>').append($('<i>').text(status)).appendTo(ul);
  }

  function printMessage(text) {
    $('<li>').text(text).appendTo(ul);
  }

</script>