HTML - Web Messaging

Halo, bakal pengembang web! Hari ini, kita akan melihat topik yang menarik tentang membuat bagian-bagian yang berbeda dalam aplikasi web Anda berbicara satu sama lain. Itu seperti mengajarkan halaman web Anda untuk melakukan percakapan! Marilah kita jelajahi dunia Web Messaging bersama-sama.

Pengenalan Web Messaging

Sebelum kita masuk ke kode, mari kita pahami apa itu Web Messaging. Bayangkan Anda memiliki dua halaman web terbuka di tab yang berbeda di browser Anda. Biasanya, halaman ini tidak dapat berkomunikasi secara langsung satu sama lain. Tetapi, apa bila Anda ingin mereka berbagi informasi? Itu di mana Web Messaging memainkan perannya!

Web Messaging memungkinkan bagian-bagian yang berbeda dalam sebuah aplikasi web mengirimkan pesan satu sama lain, bahkan jika mereka dari asal yang berbeda (seperti domain yang berbeda). Itu seperti memberikan halaman web Anda nomor telepon khusus untuk berbicara!

Event Pesan

Pada inti Web Messaging adalah event message. Event ini dipicu ketika sebuah pesan diterima. Mari kitauraikan ini secara berurutan.

Struktur Dasar

Berikut adalah contoh sederhana tentang bagaimana mendengarkan pesan:

<script>
window.addEventListener("message", function(event) {
console.log("Pesan diterima dari " + event.origin);
console.log("Isi pesan: " + event.data);
});
</script>

mariuraikan ini:

Kita menggunakan window.addEventListener untuk mendengarkan event "message".
Ketika sebuah pesan tiba, fungsi kita dipanggil.
Fungsi ini menerima objek event, yang berisi informasi tentang pesan.
Kita mencatat asal pesan dan isinya.

Mengirim Pesan

Sekarang, mari lihat bagaimana mengirim pesan:

<script>
// Diperkirakan kita ingin mengirim pesan ke iframe dengan id 'myFrame'
var iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage("Halo dari halaman induk!", "*");
</script>

Dalam contoh ini:

Kita mendapatkan referensi ke iframe di halaman kita.
Kita menggunakan postMessage untuk mengirim pesan ke iframe itu.
Argumen pertama adalah isi pesan.
Argumen kedua "*" berarti kita mengijinkan pesan untuk dikirim ke semua asal. Dalam aplikasi nyata, Anda ingin menentukan asal tepat karena alasan keamanan.

Pertimbangan Keamanan

Selalu ingat untuk memeriksa asal pesan yang masuk! Berikut adalah versi yang lebih aman dari pendengar pesan kita:

<script>
window.addEventListener("message", function(event) {
// Memeriksa jika pesan dari sumber yang dapat dipercaya
if (event.origin !== "https://sumber-yang-dipercaya.com") return;

console.log("Pesan terpercaya diterima: " + event.data);
});
</script>

Periksa ini memastikan kita hanya memproses pesan dari sumber yang kita percayai.

Contoh Praktis

Marilah kita lihat beberapa contoh dunia nyata di mana Web Messaging berjalan dengan baik!

Contoh 1: Komunikasi antara halaman dan iframe

Bayangkan Anda memiliki halaman utama yang memuat permainan di iframe. Anda ingin halaman utama memulai permainan saat tombol ditekan.

Halaman utama (parent.html):

<!DOCTYPE html>
<html>
<body>
<button onclick="startGame()">Mulai Permainan</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! Skor Anda telah direkam.");
}
});
</script>
</body>
</html>

Halaman permainan (game.html):

<!DOCTYPE html>
<html>
<body>
<h1>Permainan Menakjubkan</h1>
<div id="gameArea">Permainan akan dimulai sebentar...</div>

<script>
window.addEventListener("message", function(event) {
if (event.data === "start") {
document.getElementById('gameArea').innerHTML = "Permainan sedang berjalan!";
// Simulasi permainan berakhir setelah 5 detik
setTimeout(function() {
window.parent.postMessage("gameOver", "*");
}, 5000);
}
});
</script>
</body>
</html>

Dalam contoh ini:

Halaman utama memiliki tombol untuk memulai permainan.
Saat ditekan, ia mengirim pesan "start" ke iframe.
Halaman permainan mendengarkan pesan dan memulai permainan.
Ketika permainan berakhir, ia mengirim pesan "gameOver" kembali ke induk.
Halaman induk menampilkan alert saat ia menerima pesan "gameOver".

Contoh 2: Komunikasi antar jendela

Bayangkan Anda memiliki keranjang belanja di satu halaman dan detail produk di halaman lain. Anda ingin menambahkan item ke keranjang dari halaman produk.

Halaman produk (product.html):

<!DOCTYPE html>
<html>
<body>
<h1>Produk Menakjubkan</h1>
<button onclick="addToCart()">Tambah ke Keranjang</button>

<script>
function addToCart() {
window.opener.postMessage({
action: "addToCart",
product: "Produk Menakjubkan",
price: 19.99
}, "https://toko.example.com");
}
</script>
</body>
</html>

Halaman Keranjang Belanja (cart.html):

<!DOCTYPE html>
<html>
<body>
<h1>Keranjang Belanja Anda</h1>
<ul id="cartItems"></ul>

<script>
window.addEventListener("message", function(event) {
if (event.origin !== "https://toko.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>

Dalam scenario ini:

Halaman produk memiliki tombol "Tambah ke Keranjang".
Saat ditekan, ia mengirim pesan ke halaman keranjang (diperkirakan adalah jendela pembuka).
Halaman keranjang mendengarkan pesan dan menambahkan produk ke daftar saat diterima.

Kesimpulan

Web Messaging membuka peluang yang luas untuk menciptakan aplikasi web interaktif dan dinamis. Itu memungkinkan bagian-bagian yang berbeda dalam ekosistem web Anda untuk berkomunikasi tanpa hambatan, meningkatkan pengalaman pengguna dan fungsionalitas.

Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar! Selalu validasi asal pesan dan hanya terima pesan dari sumber yang dapat dipercaya. Semoga coding Anda selalu menyenangkan, dan halaman web Anda selalu memiliki percakapan yang menarik!

Credits: Image by storyset