HTML - Giao tiếp Web

Xin chào các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ cùng khám phá một chủ đề rất thú vị, đó là cách làm cho các phần khác nhau của ứng dụng web của bạn có thể giao tiếp với nhau. Đó giống như dạy các trang web của bạn biết cách trò chuyện! Hãy cùng nhau khám phá thế giới Giao tiếp Web.

HTML - Web Messaging

Giới thiệu về Giao tiếp Web

Trước khi chúng ta nhảy vào mã, hãy hiểu rõ Giao tiếp Web là gì. Hãy tưởng tượng bạn có hai trang web mở trong các thẻ tab khác nhau của trình duyệt. Thường thì các trang này không thể giao tiếp với nhau trực tiếp. Nhưng nếu bạn muốn chúng chia sẻ thông tin thì sao? Đó là lúc Giao tiếp Web ra vào!

Giao tiếp Web cho phép các phần khác nhau của một ứng dụng web gửi tin nhắn cho nhau, thậm chí khi chúng 来自 khác nhau (như các域名 khác nhau). Điều này giống như tặng các trang web của bạn một线路 điện thoại đặc biệt để trò chuyện!

Sự kiện Message

Tại tâm của Giao tiếp Web là sự kiện message. Sự kiện này được kích hoạt khi một tin nhắn được nhận. Hãy phân tích nó từng bước một.

Cấu trúc Cơ bản

Dưới đây là một ví dụ đơn giản về cách lắng nghe tin nhắn:

<script>
window.addEventListener("message", function(event) {
console.log("Tin nhắn nhận từ " + event.origin);
console.log("Nội dung tin nhắn: " + event.data);
});
</script>

Hãy giải mã điều này:

Chúng ta sử dụng window.addEventListener để lắng nghe sự kiện "message".
Khi một tin nhắn đến, hàm của chúng ta được gọi.
Hàm nhận một đối tượng event, chứa thông tin về tin nhắn.
Chúng ta đang ghi lại nguồn gốc và nội dung của tin nhắn.

Gửi một Tin nhắn

Bây giờ, hãy xem cách gửi một tin nhắn:

<script>
// Giả sử chúng ta muốn gửi tin nhắn đến một iframe với id 'myFrame'
var iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage("Xin chào từ trang cha!", "*");
</script>

Trong ví dụ này:

Chúng ta lấy tham chiếu đến một iframe trên trang của mình.
Chúng ta sử dụng postMessage để gửi tin nhắn đến iframe đó.
Argument đầu tiên là nội dung tin nhắn.
Argument thứ hai "*" có nghĩa là chúng ta cho phép tin nhắn được gửi đến bất kỳ nguồn gốc nào. Trong các ứng dụng thực tế, bạn nên chỉ định nguồn gốc chính xác vì lý do an toàn.

Vấn đề An toàn

Luôn nhớ kiểm tra nguồn gốc của các tin nhắn đến! Dưới đây là phiên bản an toàn hơn của người nghe tin nhắn:

<script>
window.addEventListener("message", function(event) {
// Kiểm tra nếu tin nhắn 来自 một nguồn đáng tin cậy
if (event.origin !== "https://trusted-site.com") return;

console.log("Tin nhắn đáng tin cậy nhận được: " + event.data);
});
</script>

Kiểm tra này đảm bảo rằng chúng ta chỉ xử lý các tin nhắn từ các nguồn mà chúng ta tin tưởng.

Ví dụ Thực tế

Hãy xem xét một số kịch bản thực tế nơi Giao tiếp Web tỏa sáng!

Ví dụ 1: Giao tiếp giữa một trang và một iframe

Hãy tưởng tượng bạn có một trang chính và một iframe chứa một trò chơi. Bạn muốn trang chính bắt đầu trò chơi khi một nút được nhấp.

Trang chính (parent.html):

<!DOCTYPE html>
<html>
<body>
<button onclick="startGame()">Bắt đầu Trò chơi</button>
<iframe id="gameFrame" src="game.html"></iframe>

<script>
function startGame() {
var gameFrame = document.getElementById('gameFrame');
gameFrame.contentWindow.postMessage("start", "*");
}

window.addEventListener("message", function(event) {
if (event.data === "gameOver") {
alert("Game Over! Điểm số của bạn đã được ghi nhận.");
}
});
</script>
</body>
</html>

Trang trò chơi (game.html):

<!DOCTYPE html>
<html>
<body>
<h1>Trò chơi Awsome</h1>
<div id="gameArea">Trò chơi sẽ bắt đầu sớm...</div>

<script>
window.addEventListener("message", function(event) {
if (event.data === "start") {
document.getElementById('gameArea').innerHTML = "Trò chơi đang chạy!";
// Simulate game over after 5 seconds
setTimeout(function() {
window.parent.postMessage("gameOver", "*");
}, 5000);
}
});
</script>
</body>
</html>

Trong ví dụ này:

Trang chính có một nút để bắt đầu trò chơi.
Khi được nhấp, nó gửi một tin nhắn "start" đến iframe.
Trang trò chơi lắng nghe tin nhắn này và bắt đầu trò chơi.
Khi trò chơi kết thúc, nó gửi một tin nhắn "gameOver" zurück zum trang chính.
Trang chính hiển thị một thông báo khi nhận được tin nhắn "gameOver".

Ví dụ 2: Giao tiếp giữa các cửa sổ

Hãy giả sử bạn có một giỏ hàng trên một trang và chi tiết sản phẩm trên một trang khác. Bạn muốn thêm sản phẩm vào giỏ hàng từ trang chi tiết sản phẩm.

Trang chi tiết sản phẩm (product.html):

<!DOCTYPE html>
<html>
<body>
<h1>Sản phẩm Awsome</h1>
<button onclick="addToCart()">Thêm vào Giỏ hàng</button>

<script>
function addToCart() {
window.opener.postMessage({
action: "addToCart",
product: "Sản phẩm Awsome",
price: 19.99
}, "https://shop.example.com");
}
</script>
</body>
</html>

Trang Giỏ hàng (cart.html):

<!DOCTYPE html>
<html>
<body>
<h1>Giỏ hàng của bạn</h1>
<ul id="cartItems"></ul>

<script>
window.addEventListener("message", function(event) {
if (event.origin !== "https://shop.example.com") return;

if (event.data.action === "addToCart") {
var cartList = document.getElementById('cartItems');
var newItem = document.createElement('li');
newItem.textContent = event.data.product + " - $" + event.data.price;
cartList.appendChild(newItem);
}
});
</script>
</body>
</html>

Trong kịch bản này:

Trang chi tiết sản phẩm có một nút "Thêm vào Giỏ hàng".
Khi được nhấp, nó gửi một tin nhắn đến trang giỏ hàng (giả sử là cửa sổ mở trước).
Trang giỏ hàng lắng nghe tin nhắn và thêm sản phẩm vào danh sách khi nhận được.

Kết luận

Giao tiếp Web mở ra nhiều khả năng cho việc tạo ra các ứng dụng web tương tác và động. Nó cho phép các phần khác nhau của hệ sinh thái web của bạn giao tiếp mượt mà, nâng cao trải nghiệm người dùng và tính năng.

Nhớ rằng, với quyền lực lớn đi kèm với trách nhiệm lớn! Luôn xác minh nguồn gốc của các tin nhắn và chỉ chấp nhận những tin nhắn từ các nguồn đáng tin cậy. Chúc các bạn mã hóa vui vẻ, và mong các trang web của bạn luôn có những cuộc trò chuyện thú vị!

Phương thức	Mô tả
`window.postMessage(message, targetOrigin)`	Gửi một tin nhắn đến cửa sổ khác
`window.addEventListener("message", function(event) { ... })`	Lắng nghe các tin nhắn đến
`event.data`	Chứa dữ liệu được gửi kèm theo tin nhắn
`event.origin`	Chỉ định nguồn gốc của người gửi
`event.source`	Cung cấp một tham chiếu đến cửa sổ của người gửi

Bảng này tóm tắt các phương thức và thuộc tính chính mà chúng ta đã thảo luận trong hành trình Giao tiếp Web. Hãy giữ nó bên cạnh để tham khảo khi bạn bắt đầu thử nghiệm với các thực hiện tin nhắn của riêng mình!

Credits: Image by storyset