HTML - Web Messaging (id)

Halo, para pengembang web masa depan! Hari ini, kita akan melihat sebuah topik yang menarik tentang cara membuat bagian-bagian 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.

HTML - Web Messaging

Pengenalan Web Messaging

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

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

The Message Event

Pada hati Web Messaging adalah message event. Event ini terjadi saat sebuah pesan diterima. Mari kitauraikan ini secara langkah demi langkah.

Struktur Dasar

Ini adalah contoh sederhana tentang cara 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 "message" event.
Saat pesan tiba, fungsi kita dipanggil.
Fungsi ini menerima objek event yang mengandung 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 mengizinkan pesan untuk dikirim ke semua origins. Dalam aplikasi nyata, Anda ingin menentukan origin tepat karena alasan keamanan.

Pertimbangan Keamanan

Selalu ingat untuk memeriksa origin pesan yang masuk! Ini adalah versi yang lebih aman dari penggunaan pesan:

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

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

Pemeriksaan tambahan ini memastikan kita hanya memproses pesan dari sumber yang dapat dipercaya.

Contoh Praktis

Mari kita lihat beberapa contoh dunia nyata di mana Web Messaging berjaya!

Contoh 1: Komunikasi antara halaman dan iframe

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

Halaman utama (parent.html):

<!DOCTYPE html>
<html>
<body>
<button onclick="startGame()">Mulai Game</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 game (game.html):

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

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

Dalam contoh ini:

Halaman utama memiliki tombol untuk memulai game.
Saat ditekan, itu mengirim pesan "start" ke iframe.
Halaman game mendengarkan pesan ini dan memulai game.
Ketika game selesai, itu mengirim pesan "gameOver" kembali ke induk.
Halaman induk menampilkan alert saat menerima pesan "gameOver".

Contoh 2: Komunikasi antar jendela

Bayangkan Anda memiliki keranjang belanja di salah 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://shop.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://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>

Dalam konteks ini:

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

Kesimpulan

Web Messaging membuka jalan untuk menciptakan aplikasi web interaktif dan dinamis. Itu memungkinkan bagian-bagian berbeda dalam ekosistem web Anda untuk berkomunikasi secara mulus, meningkatkan pengalaman pengguna dan fungsionalitas.

Ingat, dengan kekuatan besar datang tanggung jawab besar! Selalu validasi origin pesan dan hanya terima yang berasal dari sumber yang dapat dipercaya. Selamat coding, dan semoga halaman web Anda selalu melakukan percakapan menarik!

Metode	Deskripsi
`window.postMessage(message, targetOrigin)`	Mengirim pesan ke jendela lain
`window.addEventListener("message", function(event) { ... })`	Mendengarkan pesan masuk
`event.data`	Mengandung data yang dikirimkan dengan pesan
`event.origin`	Menunjukkan origin pengirim
`event.source`	Menyediakan referensi ke jendela pengirim

Tabel ini menggabungkan metode dan properti utama yang kita diskusikan dalam perjalanan Web Messaging kami. Jaga-jaga dan gunakan ini sebagai panduan saat Anda mulai mengembangkan implementasi pesan Anda sendiri!

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - IndexedDB

Tutorial Selanjutnya:

HTML - CORS Web