$(document).ready(function() {
  var socket = io.connect("http://127.0.0.1:8080", { reconnection: true, transports: ['websocket', 'xhr-polling', 'polling', 'htmlfile', 'flashsocket'] });

  socket.on('connect_error', function() {
    $('#content').html('Wystąpił błąd, nie można pobrać danych.');
  });

  socket.on('connect', function() {
    socket.emit('connected', { user: 'test' });
  });
/*
  socket.on('message', function(msg) {
    console.log(msg);
    $('#content').append($('<div>').html(msg['user']['login'] + ': ' + formatMessage(msg['body'])));
  });
*/
/*
  socket.on('history', function(msg) {
    console.log(msg);

    msg.forEach(function(msg) {
      $('#content').append($('<div>').html(msg['user']['login'] + ': ' + formatMessage(msg['body'])));
    })
  });
*/
  function formatMessage(msg) {
    return msg.replace(new RegExp('\ ','g'), '&nbsp;').replace(new RegExp('\r?\n','g'), '<br />');
  }

  function setCaretPosition(ctrl, pos) {
    if(ctrl.setSelectionRange) {
      ctrl.focus();
      ctrl.setSelectionRange(pos,pos);
    } else if (ctrl.createTextRange) {
      var range = ctrl.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }

/*
  $(document).on('keypress', '#input', function(e) {
    if (e.keyCode === 13) {
      socket.emit('message', { message: this.value, user_id: 1 });
      this.value = '';
    }
  });
*/
  var ChatApp = React.createClass({
    getInitialState: function() {
      socket.on('message', this.messageReceive);
      return { messages: [] };
    },

    componentDidMount: function() {
      $.ajax({
        url: '/messages',
        dataType: 'json',
        success: function(data) {
          console.log(data);
          this.setState({ messages: data });
        }.bind(this),
        failure: function(xhr, status, err) {
          console.err(url, status, err.toString());
        }.bind(this)
    });
    },

    messageReceive: function(msg) {
      console.log('dostalem wiadomosc: ' + msg);
      var messages = this.state.messages;
      messages.push(msg);
      //console.log(msg);
      this.setState({ messages: messages });
    },

    messageSend: function(e) {
      console.log(e.keyCode);
      if (e.keyCode === 13) {
        e.preventDefault();
        socket.emit('message', { message: e.target.value, user_id: 1 });
        e.target.value = '';
        setCaretPosition(e.target, 0);
      }
    },

    render: function() {
      return (
        <div>
          <div className="well" id="content">
            {this.state.messages.map(function(msg) {
              return <div key={msg['id']} dangerouslySetInnerHTML={{ __html: msg['user']['login'] + ':' + formatMessage(msg['body']) }}></div>
            })}
          </div>
          <textarea className="form-control" id="input" rows="1" onKeyDown={this.messageSend}></textarea>
        </div>
      );
    }
  });

  ReactDOM.render(<ChatApp />, document.getElementById('main'));
});

@@ -205,583 +205,78 @@
 nect
-_error', function() %7B%0A    $('#content').html('Wyst%C4%85pi%C5%82 b%C5%82%C4%85d, nie mo%C5%BCna pobra%C4%87 danych.');%0A  %7D);%0A%0A  socket.on('connect', function() %7B%0A    socket.emit('connected', %7B user: 'test' %7D);%0A  %7D);%0A/*%0A  socket.on('message', function(msg) %7B%0A    console.log(msg);%0A    $('#content').append($('%3Cdiv%3E').html(msg%5B'user'%5D%5B'login'%5D + ': ' + formatMessage(msg%5B'body'%5D)));%0A  %7D);%0A*/%0A/*%0A  socket.on('history', function(msg) %7B%0A    console.log(msg);%0A%0A    msg.forEach(function(msg) %7B%0A      $('#content').append($('%3Cdiv%3E').html(msg%5B'user'%5D%5B'login'%5D + ': ' + formatMessage(msg%5B'body'%5D)));%0A    %7D)%0A  %7D);%0A*/
+', function() %7B%0A    socket.emit('connected', %7B user: 'test' %7D);%0A  %7D);%0A
 %0A  f
@@ -767,197 +767,8 @@
  %7D%0A%0A
-/*%0A  $(document).on('keypress', '#input', function(e) %7B%0A    if (e.keyCode === 13) %7B%0A      socket.emit('message', %7B message: this.value, user_id: 1 %7D);%0A      this.value = '';%0A    %7D%0A  %7D);%0A*/%0A
   va
@@ -878,24 +878,80 @@
 geReceive);%0A
+      socket.on('connect_error', this.connectionError);%0A
       return
@@ -1101,22 +1101,17 @@
 ss: 
-function
 (data)
+ =%3E
  %7B%0A 
@@ -1192,27 +1192,16 @@
        %7D
-.bind(this)
 ,%0A      
@@ -1211,24 +1211,16 @@
 ailure: 
-function
 (xhr, st
@@ -1229,16 +1229,19 @@
 us, err)
+ =%3E
  %7B%0A     
@@ -1300,25 +1300,127 @@
    %7D
-.bind(this)%0A    %7D
+%0A      %7D);%0A    %7D,%0A%0A    connectionError: function() %7B%0A      $('#content').html('Wyst%C4%85pi%C5%82 b%C5%82%C4%85d, nie mo%C5%BCna pobra%C4%87 danych.'
 );%0A 

fix bugs