Nodejs + SocketIO

Bài đăng này đã không được cập nhật trong 2 năm

1. Nodejs là gì?

Là một framework javascript được thiết kết để xây dựng những ứng dụng thời gian thực.
Sử dụng Google V8 JavaScript engine để thực thi code
Được chạy ở phía server
Viết bằng Javascript

Server code.

 var http = require('http');
 http.createServer(function (req, res) {
   res.writeHead(200, {'Content-Type': 'text/plain'});
   res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

Run server

  $ node example.js
  Server running at http://127.0.0.1:1337/

Lúc này ta đã có một server lắng nghe các request http tại cổng 1337

2. Socket IO

Là một module của Nodejs
Được sử dụng trong các ứng dụng web thời gian thực.
Tạo ra một cơ chế liên lạc giữa client và server
Có thể cài đặt các module của Nodejs bằng NPM.

3. Cài đặt Nodejs

apt-get install nodejs (setup nodejs)
apt-get install npm (setup npm)

4. Tạo server Nodejs

  $ mkdir node_server
  $ cd node_server
  $ npm install express
  $ npm install http
  $ npm install socket.io

Code server:

 var app = require('express')();
 var http = require('http').Server(app);
 var io = require('socket.io')(http);
 app.get('/',  function(req,  res){
  res.send("Hello you");
 });
 io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
  console.log('user disconnected');
  });
 socket.on('server', function(from, msg){
    console.log('from: ' + from);
    console.log('message: ' + msg);
    io.emit('server',from, msg);
  });
});

http.listen(3001,  function(){
  console.log('listening on *:3001');
});

Trong đó method io.on() hoạt động như 1 socket lắng nghe những kết nối từ client đến server.

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

Method socket.on() là hàm cho phép người dùng định nghĩa ra một event mà event này sẽ được trigger từ phía client.

socket.on('server', function(from, msg){
    console.log('from: ' + from);
    console.log('message: ' + msg);
    io.emit('server',from, msg);
  });

4. Tạo Client socket.

Chúng ta đã có một server socket đang chờ request từ client và lúc này ta cần một client socket để connect đến server, và sockeio đã cung cấp thư viện socket.client.js để chúng ta connect đến server

Import thư viện.

 <script src="http://localhost:3001/socket.io/socket.io.js"></script>

Kết nối tới server

<script>
  var socket = io.connect('http://localhost:3001');
</script>

Method io.connect('http://localhost:3001'); tạo một kết nối tới server và trả lại 1 đối tượng socket (đối tượng này quản lý việc kết nối với server).

Client app.

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <input id="name" type="text"></input>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

<script src="http://localhost:3001/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost:3001');
  $('form').submit(function(){
    socket.emit('server', $('#name').val(), $('#m').val());
    $('#m').val('');
    return false;
  });

  socket.on('server', function(from, msg){
    $('#messages').append($('<li>').text(from +" :  "+ msg));
  });
</script>