HTML - Sự kiện được gửi từ máy chủ

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng nhau khám phá thế giới đầy thú vị của Sự kiện được gửi từ máy chủ (Server-Sent Events - SSE). Đừng lo lắng nếu bạn mới bắt đầu học lập trình; tôi sẽ hướng dẫn bạn từng bước qua chủ đề này, giống như tôi đã làm với hàng trăm học viên trong những năm dạy học của mình. Hãy lấy một tách cà phê và cùng bắt đầu nhé!

HTML - Server Sent Events

Sự kiện được gửi từ máy chủ là gì?

Trước khi chúng ta nhảy vào mã code, hãy hiểu qua về Sự kiện được gửi từ máy chủ. Hãy tưởng tượng bạn đang xem một trận thể thao trực tuyến. Bạn muốn thấy cập nhật điểm số theo thời gian thực mà không cần làm mới trang web. Đó là lúc SSE phát huy tác dụng!

Sự kiện được gửi từ máy chủ cho phép một trang web tự động nhận được cập nhật từ máy chủ. Nó giống như có một线路 điện thoại trực tiếp đến máy chủ, nơi nó có thể gửi tin nhắn cho bạn bất cứ lúc nào mà không cần bạn phải hỏi liên tục.

Làm thế nào để sử dụng SSE trong các ứng dụng web?

Bây giờ chúng ta đã hiểu được khái niệm, hãy xem cách chúng ta có thể triển khai SSE trong các ứng dụng web của mình. Chúng ta sẽ bắt đầu với mã client-side, được viết bằng HTML và JavaScript.

Bước 1: Tạo đối tượng EventSource

Đầu tiên, chúng ta cần tạo một đối tượng EventSource trong mã JavaScript của mình. Đối tượng này sẽ thiết lập kết nối với máy chủ.

<h1>Điểm số thể thao trực tiếp</h1>
<div id="score"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("score_updates.php");
source.onmessage = function(event) {
document.getElementById("score").innerHTML = event.data;
};
} else {
document.getElementById("score").innerHTML = "Xin lỗi, trình duyệt của bạn không hỗ trợ sự kiện được gửi từ máy chủ...";
}
</script>

Hãy phân tích này:

Chúng ta tạo một tiêu đề và một phần tử div để hiển thị điểm số.
Trong script, chúng ta kiểm tra xem trình duyệt có hỗ trợ EventSource hay không.
Nếu có, chúng ta tạo một đối tượng EventSource, chỉ định URL của script bên máy chủ.
Chúng ta sau đó thiết lập một bộ xử lý sự kiện onmessage. Hàm này sẽ được gọi mỗi khi chúng ta nhận được tin nhắn từ máy chủ.
Trong hàm, chúng ta cập nhật nội dung của phần tử "score" với dữ liệu nhận được từ máy chủ.
Nếu trình duyệt không hỗ trợ SSE, chúng ta hiển thị một thông báo cho người dùng.

Script bên máy chủ cho SSE

Bây giờ, hãy xem cách chúng ta thiết lập script bên máy chủ để gửi sự kiện. Chúng ta sẽ sử dụng PHP cho ví dụ này, nhưng khái niệm này cũng tương tự trong các ngôn ngữ lập trình server-side khác.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendUpdate($score) {
echo "data: $score\n\n";
ob_flush();
flush();
}

$score = 0;
while (true) {
$score++;
sendUpdate("Điểm số hiện tại: $score");
sleep(5);  // Đợi 5 giây trước khi gửi cập nhật tiếp theo
}
?>

Hãy phân tích script này:

Chúng ta đặt các header phù hợp cho SSE.
Chúng ta định nghĩa một hàm sendUpdate để gửi dữ liệu theo đúng định dạng cho SSE.
Chúng ta bắt đầu một vòng lặp vô hạn (trong một ứng dụng thực tế, bạn sẽ có một điều kiện để dừng vòng lặp này).
Trong mỗi lần lặp, chúng ta tăng điểm số và gửi một cập nhật.
Chúng ta sau đó đợi 5 giây trước khi gửi cập nhật tiếp theo.

Xử lý Sự kiện được gửi từ máy chủ

Bây giờ chúng ta đã có cả mã client và server-side, hãy xem cách chúng ta có thể xử lý các loại sự kiện khác nhau.

<h1>Cập nhật thể thao trực tiếp</h1>
<div id="score"></div>
<div id="commentary"></div>

<script>
var source = new EventSource("sports_updates.php");

source.addEventListener('score', function(e) {
document.getElementById('score').innerHTML = e.data;
}, false);

source.addEventListener('commentary', function(e) {
document.getElementById('commentary').innerHTML = e.data;
}, false);

source.onerror = function(e) {
console.log("Lỗi: " + e);
};
</script>

Trong ví dụ này:

Chúng ta tạo hai phần tử div cho điểm số và bình luận.
Chúng ta thiết lập bộ xử lý sự kiện cho hai loại sự kiện: 'score' và 'commentary'.
Mỗi sự kiện cập nhật một phần tử khác nhau trên trang.
Chúng ta cũng thêm một bộ xử lý lỗi để ghi lại bất kỳ lỗi nào.

Script bên máy chủ tương ứng có thể trông như này:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendEvent($event, $data) {
echo "event: $event\n";
echo "data: $data\n\n";
ob_flush();
flush();
}

$score = 0;
$commentary = ["Pha cản xuất đẹp!", "Cú射门 gần!", "Thẻ vàng!"];

while (true) {
$score++;
sendEvent('score', "Điểm số hiện tại: $score");

if ($score % 3 == 0) {
$randomComment = $commentary[array_rand($commentary)];
sendEvent('commentary', $randomComment);
}

sleep(5);
}
?>

Script này gửi một sự kiện 'score' mỗi 5 giây, và một sự kiện 'commentary' mỗi 15 giây (khi điểm số chia hết cho 3).

Bảng tóm tắt phương thức

Dưới đây là bảng tóm tắt các phương thức chính chúng ta đã sử dụng:

Phương thức	Mô tả
`new EventSource(url)`	Tạo một kết nối mới đến máy chủ
`EventSource.onmessage`	Xử lý tin nhắn không có tên sự kiện cụ thể
`EventSource.addEventListener(event, callback)`	Xử lý tin nhắn với tên sự kiện cụ thể
`EventSource.onerror`	Xử lý bất kỳ lỗi nào trong kết nối

Kết luận

Và thế là chúng ta đã bao quát cơ bản về Sự kiện được gửi từ máy chủ, từ việc thiết lập mã client-side đến việc tạo máy chủ gửi cập nhật. Nhớ rằng SSE là một công cụ mạnh mẽ để tạo các ứng dụng web theo thời gian thực, nhưng nó chỉ là giao tiếp một chiều. Nếu bạn cần giao tiếp hai chiều, bạn có thể sẽ muốn tìm hiểu về WebSockets trong tương lai.

Cũng như với bất kỳ khái niệm lập trình nào, cách tốt nhất để học là làm. Hãy thử tạo ứng dụng SSE của riêng bạn - có thể là một hệ thống chat trực tiếp hoặc một bảng thông báo cổ phiếu. Các khả năng là vô tận!

Chúc các bạn lập trình vui vẻ, các nhà phát triển web tương lai! Nhớ rằng, mỗi chuyên gia đều từng là người mới bắt đầu, vì vậy đừng nản lòng nếu mọi thứ không ngay lập tức hiểu rõ. Hãy tiếp tục thực hành, và bạn sẽ nhanh chóng trở thành chuyên gia!

Credits: Image by storyset