hacktracking: # Socket.io chat

# Socket.io chat

# cat chat.io
var http = require('http');
var fs = require('fs');
var url = require('url');

var nicknames_list = [];
var ip_address = '192.168.1.1'
var port = 1234
var socketio_path = '/usr/local/lib/node_modules/socket.io'
var index_path = '/index.html'
var jquery_path = '/jquery.min.js'
var css_path = '/style.css'
var encoding = 'utf-8'

var server = http.createServer(function (req, res){
 var pathname = url.parse(req.url).pathname;
 if(pathname === '/'){
  fs.readFile('.' + index_path, function (err, data){
   res.writeHead(200, {'content-type': 'text/html'});
   res.end(data, encoding);
  });
 }else if(pathname === jquery_path){
  fs.readFile('.' + jquery_path, function (err, data){
   res.writeHead(200, {'content-type': 'application/javascript'});
   res.end(data, encoding);
  });
 }else if(pathname === css_path){
  fs.readFile('.' + css_path, function (err, data){
   res.writeHead(200, {'content-type': 'text/css'});
   res.end(data, encoding);
  });
 }
}).listen(port, ip_address);

var io = require(socketio_path).listen(server);

io.sockets.on('connection', function (socket){

 socket.on('nickname', function (data, callback){
  if(nicknames_list.indexOf(data) !== -1){
   callback(false);
  }else{
   callback(true);
   nicknames_list.push(data);
   socket.nickname = data;
   console.log('Nickname list: ' + nicknames_list);
   io.sockets.emit('nicknames_list', nicknames_list);
  }
 });

 socket.on('message', function (data){
  io.sockets.emit('message', {nickname: socket.nickname, message: data});
 });

 socket.on('disconnect', function (){
  if(!socket.nickname) return;
  var index = nicknames_list.indexOf(socket.nickname);
  if(index > -1){
   nicknames_list.splice(index, 1);
  }
  console.log('Nickname list: ' + nicknames_list);
  io.sockets.emit('nicknames_list', nicknames_list);
 });

});
# cat index.html
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset='utf-8'>
  <title>chat.io</title>
  <link rel='stylesheet' type='text/css' href='style.css'>

  <script src='/jquery.min.js'></script>
  <script src='/socket.io/socket.io.js'></script>

  <script>
   var host = '192.168.1.1';
   var port = '1234';
   var socket = io.connect('http://' + host + ':' + port);
   jQuery(function ($){

    var nickname = $('#nickname');
    var nickname_form = $('#nickname_form');
    var nicknames_list = $('#nicknames_list');
    var message = $('#message');
    var message_ml = $('#message_ml');
    var message_form = $('#message_form');
    var message_ml_form = $('#message_ml_form');
    var messages_list = $('#messages_list');

    nickname_form.submit(function (event){
     event.preventDefault();
     socket.emit('nickname', nickname.val(), function (data){
      if(data){
       nickname_form.hide();
       nicknames_list.show();
       message_form.show();
       message_ml_form.show();
       messages_list.show();
      }else{
       nickname_form.prepend('<p>Sorry, the nickname is taken.</p>');
      }
     });
    });

    message_form.submit(function (event){
     event.preventDefault();
     if(message.val() !== ''){
      socket.emit('message', message.val());
      message.val('').focus();
     }
    });

    message_ml_form.submit(function (event){
     event.preventDefault();
     if(message_ml.val() !== ''){
      socket.emit('message', message_ml.val());
      message_ml.val('').focus();
     }
    });

    socket.on('nicknames_list', function (data){
     var nl = '';
     for(var i = 0; i < data.length; i++){
      nl += '<li>[' + data[i] + ']</li>';
     }
     nicknames_list.empty().append(nl);
    });

    socket.on('message', function(data){
     messages_list.val(messages_list.val() + '\n[' + data.nickname + '] ' + data.message);
     messages_list.scrollTop(messages_list[0].scrollHeight - messages_list.height());
    });

   });
  </script>
 </head>
 <body>
  <div id='top'>
   <div id='title'>chat.io</div>
  </div>
  <div id='center'>
   <div id='right'>
    <section id='nicknames_list'>
     <ul></ul>
    </section>
   </div>

   <div id='left'>
    <form id='nickname_form'>
     <input type='text' id='nickname' placeholder='<Enter your nickname>'>
     <button type='submit'>Submit</button>
    </form>

    <textarea id='messages_list' readonly></textarea>

    <form id='message_form'>
     <input type='text' id='message' placeholder='<Send single line>'></input>
     <button type='submit'>Send</button>
    </form>

    <form id='message_ml_form'>
     <textarea id='message_ml' placeholder='<Paste multiline>'></textarea>
     <button type='submit'>Paste</button>
    </form>
   </div>
  </div>
 </body>
</html>
# cat style.css
html {
 background: #000;
 color: #575;
 font-family: monospace;
 font-size: 12px;
 margin: 0;
 padding: 0;
}

input, button, textarea {
 background: #000;
 border: 1px solid #575;
 color: #575;
 font-family: monospace;
 font-size: 12px;
 margin-bottom: 10px;
 padding-left: 5px;
}

#top {
 width: 100%;
}

#center {
 width: 100%;
}

#left {
 width: 80%;
}

#right {
 float: right;
 width: 20%;
}

#title {
 font-size: 30px;
}

#nickname {
 width: 90%;
}

#message_form, #message_ml_form {
 display: none;
}

#message, #message_ml {
 width: 90%;
}

#messages_list{
 display: none;
 height: 400px;
 width: 90%;
}

#nicknames_list {
 display: none;
 list-style-type: none;
}
# nodejs chat.io
   info  - socket.io started
# Socket.io chat

No comments:
