SOCKET.IO

Socket.IO – Hello World

Written by huudoanh

Tạo một tệp có tên app.js và nhập mã sau đây để thiết lập express application

var app = require('express')();
var http = require('http').createServer(app);

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

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

Trong file app.js, chúng ta đã gọi res.send và truyền cho nó một chuỗi HTML. Sẽ rất khó hiểu nếu chúng ta đặt toàn bộ mã HTML ở cùng trong code javascript. Thay vào đó, chúng ta sẽ tạo một tệp index.html và gọi nó.

Tạo một file index.html như sau:

<!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>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

Thay thế đoạn mã res.send('<h1>Hello world</h1>'); thành res.sendFile(__dirname + '/index.html'); trong file app.js và kết quả khi chạy lại server:

socket-io-hello-word

Bây giờ chúng ta sẽ require Socket.IO và log lại sự kiện “a user connected”, mỗi khi người dùng truy cập trang và “user disconnected”, mỗi khi ai đó điều chuyển/ đóng trang.

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
   res.sendFile(__dirname + '/index.html');
});

//Whenever someone connects this gets executed
io.on('connection', function(socket) {
   console.log('a user connected');

   //Whenever someone disconnects this piece of code executed
   socket.on('disconnect', function () {
      console.log('user disconnected');
   });
});

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

require ('socket.io')(http) tạo một phiên socket.io mới được gắn vào máy chủ http. Trình xử lý sự kiện io.on xử lý kết nối, ngắt kết nối v.v., các sự kiện trong đó, sử dụng socket object.

Chúng ta đã thiết lập máy chủ của mình để log thông điệp kết nối và ngắt kết nối. Bây giờ chúng ta phải tạo client script và khởi tạo socket object ở đó, để client có thể thiết lập kết nối khi được yêu cầu. Kịch bản được phục vụ bởi io server của chúng tôi tại ‘/socket.io/socket.io.js’.

Cập nhật file index.html như bên dưới:

<!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>
  <script src = "/socket.io/socket.io.js"></script>
  <script>
      var socket = io();
   </script>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

Bây giờ bạn hãy truy cập vào localhost:3000 và kiểm tra server console logs:

a user connected

Khi bạn refresh trang, socket sẽ ngắt kết nối và khởi tạo kết nối mới:

user disconnected
a user connected