Skip to main content

Session 08: Deployment

https://socket.io/

Socket.io - một thư viện JavaScript hỗ trợ việc truyền tải dữ liệu qua các kết nối thời gian thực giữa các client và server.

Socket.io có thể được sử dụng để phát triển các ứng dụng web đa nền tảng, bao gồm cả ứng dụng di động. Với Socket.io, chúng ta có thể xây dựng các ứng dụng web thời gian thực như trò chơi trực tuyến, chat, tương tác thời gian thực v.v.

Giới thiệu về Socket.io​

Socket.io là một thư viện JavaScript được sử dụng để tạo kết nối giữa client và server thông qua các websocket hoặc các công nghệ truyền tải dữ liệu khác như SSE (Server-Sent Events). Socket.io được phát triển bởi Guillermo Rauch, và được phát hành lần đầu vào năm 2010.

Socket.io hỗ trợ các trình duyệt web hiện đại và các phiên bản trình duyệt cũ hơn sử dụng các kỹ thuật khác nhau để truyền tải dữ liệu. Socket.io cung cấp một API đơn giản để truyền tải dữ liệu giữa client và server.

Một trong những ưu điểm của Socket.io là tính năng fallback - tức là nếu websocket không được hỗ trợ trên trình duyệt của người dùng, Socket.io sẽ tự động chuyển sang sử dụng các công nghệ truyền tải dữ liệu khác như long polling.

Các khái niệm cơ bản của Socket.io​

Socket​

Socket trong Socket.io là một đối tượng biểu diễn kết nối giữa client và server. Khi client kết nối đến server, server sẽ tạo ra một socket để duy trì kết nối với client này.

Server​

Server trong Socket.io là một đối tượng chịu trách nhiệm quản lý các kết nối giữa client và server. Server sẽ lắng nghe các kết nối đến từ client và tạo ra các socket tương ứng để duy trì kết nối với client.

Client​

Client trong Socket.io là một đối tượng biểu diễn trình duyệt web hoặc ứng dụng di động. Client sẽ kết nối đến server để truyền tải dữ liệu.

Room​

Room trong Socket.io là một cơ chế để nhóm các socket vào cùng một phòng. Mỗi socket có thể tham gia vào nhiều phòng khác nhau, và các phòng có thể được sử dụng để gửi dữ liệu cho một nhóm socket cụ thể.

Event​

Event trong Socket.io là các thông điệp được gửi từ client đến server hoặc từ server đến client. Các event có thể được định nghĩa bởi người dùng và sử dụng để truyền tải dữ liệu giữa các client và server.

Các bước cơ bản để sử dụng Socket.io​

Để sử dụng Socket.io, chúng ta cần làm các bước sau:

  1. Cài đặt Socket.io trên server và client
  2. Tạo một server Socket.io
  3. Tạo các event để gửi và nhận dữ liệu giữa client và server
  4. Tạo các room để nhóm các socket vào cùng một phòng
  5. Sử dụng callback function để xác nhận thông điệp được gửi thành công
const server = require('http').createServer();
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('A client connected.');

  socket.on('chat message', (msg) => {
    console.log(`Received message: ${msg}`);
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('A client disconnected.');
  });
});

server.listen(3000, () => {
  console.log('Server is listening on port 3000.');
});

Trong ví dụ trên, chúng ta tạo một server Socket.io và lắng nghe các kết nối đến từ client. Khi một client kết nối đến, server sẽ in ra thông báo "A client connected". Khi server nhận được một event "chat message" từ client, server sẽ in ra thông báo "Received message" và gửi event "chat message" này đến tất cả các client khác. Khi một client disconnect, server sẽ in ra thông báo "A client disconnected".

Client Side Code
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Example</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      document.querySelector('form').addEventListener('submit', (event) => {
        event.preventDefault();
        const messageInput = document.getElementById('messageInput');
        socket.emit('chat message', messageInput.value);
        messageInput.value = '';
      });

      socket.on('chat message', (msg) => {
        const messagesList = document.getElementById('messagesList');
        const newMessage = document.createElement('li');
        newMessage.textContent = msg;
        messagesList.appendChild(newMessage);
      });
    </script>
  </head>
  <body>
    <ul id="messagesList"></ul>
    <form>
      <input id="messageInput" type="text" />
      <button type="submit">Send</button>
    </form>
  </body>
</html>

Trong ví dụ trên, chúng ta tạo một client Socket.io để kết nối đến server. Khi client nhấn nút "Send" để gửi tin nhắn, client sẽ gửi event "chat message" đến server và clear input để chuẩn bị cho tin nhắn tiếp theo. Khi client nhận được event "chat message" từ server, client sẽ tạo một thẻ <li> mới chứa nội dung của tin nhắn và thêm vào danh sách tin nhắn.

Trên đây là một ví dụ đơn giản về cách sử dụng Socket.io. Hy vọng bài giảng này sẽ giúp các bạn hiểu rõ hơn về Socket.io và cách sử dụng nó để phát triển các ứng dụng web thời gian thực.