Panduan untuk WebSocket: Untuk Pemula

Hai teman-teman pengembang web masa depan! Hari ini, kita akan melompat ke dunia yang menarik dari WebSockets. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - pada akhir panduan ini, Anda akan menjadi ahli WebSocket! Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita mulai perjalanan ini.

Apa Itu WebSockets?

Sebelum kita masuk ke detilnya, mari kita pahami apa itu WebSockets dan mengapa mereka sangat keren. Bayangkan Anda sedang berbicara dengan seorang teman. Dalam panggilan telepon biasa, Anda harus menelpon, menunggu mereka menjawab, mengatakan apa yang Anda inginkan, dan kemudian menutup panggilan. Jika Anda ingin berbicara lagi, Anda mengulangi keseluruhan proses itu. Terdengar ribet, kan?

Itu adalah cara komunikasi web tradisional berkerja. Browser Anda mengirimkan permintaan, menunggu tanggapan, dan kemudian menutup koneksi. WebSockets, di sisi lain, seperti memiliki jalur telepon terbuka di mana Anda dan teman Anda dapat berbicara kapan saja tanpa terus menelpon dan menutup panggilan. Keren, kan?

Sintaks

Sekarang, mari kita lihat bagaimana kita sebenarnya menggunakan WebSockets dalam HTML. Sintaksnya mengejutkan karena sangat sederhana:

<script>
var socket = new WebSocket('ws://example.com/socket');
</script>

Di sini, kita menciptakan objek WebSocket baru dan menghubungkannya ke server di 'ws://example.com/socket'. Bagian 'ws://' adalah seperti 'http://' tapi khusus untuk WebSockets. Ada juga versi aman, 'wss://', seperti 'https://'.

Atribut WebSocket

WebSockets datang dengan beberapa atribut yang membantu kita mengetahui tentang keadaan koneksi saat ini. Mari kita lihat mereka dalam tabel:

Atribut	Deskripsi
readyState	Keadaan saat ini dari koneksi
bufferedAmount	Jumlah byte data yang diantrekan menggunakan metode send()
extensions	Ekstensi yang dipilih oleh server
protocol	Nama sub-protokol yang dipilih oleh server

Atribut readyState sangat berguna. Itu dapat memiliki empat nilai:

1. 0 (CONNECTING): Koneksi belum terbuka.
2. 1 (OPEN): Koneksi terbuka dan siap untuk berkomunikasi.
3. 2 (CLOSING): Koneksi sedang dalam proses penutupan.
4. 3 (CLOSED): Koneksi ditutup atau tidak dapat dibuka.

Event WebSocket

WebSockets tidak hanya tentang mengirimkan data - mereka juga dapat merespon berbagai event. Itu seperti menatakan papan bunga yang meletup saat sesuatu yang spesifik terjadi! Berikut adalah event utama:

1. onopen: Terjadi saat koneksi dibuat.
2. onmessage: Terjadi saat data diterima dari server.
3. onerror: Terjadi saat terjadi kesalahan.
4. onclose: Terjadi saat koneksi ditutup.

Mari kita lihat bagaimana kita gunakan ini dalam kode:

<script>
var socket = new WebSocket('ws://example.com/socket');

socket.onopen = function(event) {
console.log('Koneksi terbentuk!');
};

socket.onmessage = function(event) {
console.log('Pesan dari server:', event.data);
};

socket.onerror = function(error) {
console.log('Kesalahan WebSocket:', error);
};

socket.onclose = function(event) {
console.log('Koneksi ditutup.');
};
</script>

Dalam contoh ini, kita menatakan fungsi untuk menghandle setiap event ini. Saat koneksi terbuka, kita mencatat pesan. Saat kita menerima pesan, kita mencatatnya. Jika ada kesalahan, kita mencatatnya juga. Dan saat koneksi ditutup, kita berkata selamat tinggal!

Metode WebSocket

Sekarang kita tahu bagaimana mendengarkan event, mari kita lihat bagaimana kita dapat melakukan hal-hal dengan WebSocket kita. Berikut adalah metode utama:

Metode	Deskripsi
send()	Mengirim data ke server
close()	Menutup koneksi WebSocket

Berikut adalah bagaimana kita gunakan metode ini:

<script>
var socket = new WebSocket('ws://example.com/socket');

// Mengirim pesan ke server
socket.send('Halo, Server!');

// Menutup koneksi
socket.close();
</script>

Itu sungguh-sungguh mudah! Dengan send(), kita dapat mengirimkan data apa pun yang kita inginkan ke server. Dan saat kita selesai, kita dapat secara hormat menutup koneksi dengan close().

Menyiapkan Server WebSocket dengan Python

Sekarang, saya tahu kita fokus pada HTML di sini, tapi saya pikir itu penting untuk memahami kedua sisi percakapan. Jadi, mari kita lihat secara singkat bagaimana kita dapat mengatur server WebSocket sederhana menggunakan Python. Jangan khawatir jika Anda belum familiar dengan Python - konsepnya yang penting disini.

import asyncio
import websockets

async def echo(websocket, path):
async for message in websocket:
await websocket.send(f"Echo: {message}")

start_server = websockets.serve(echo, "localhost", 8765)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

Server ini secara sederhana mengembalikan setiap pesan yang diterima, ditambahkan awalan "Echo: ". Itu berjalan di localhost (komputer Anda sendiri) di port 8765.

Menyiapkan Klien HTML untuk Server

Sekarang kita punya server, mari kita buat halaman HTML yang dapat menghubungkan ke server itu:

<!DOCTYPE html>
<html>
<head>
<title>Uji WebSocket</title>
</head>
<body>
<h1>Uji WebSocket</h1>
<input type="text" id="messageInput" placeholder="Masukkan pesan">
<button onclick="sendMessage()">Kirim</button>
<div id="messages"></div>

<script>
var socket = new WebSocket('ws://localhost:8765');

socket.onopen = function(event) {
console.log('Koneksi terbentuk!');
};

socket.onmessage = function(event) {
var messages = document.getElementById('messages');
messages.innerHTML += '<p>' + event.data + '</p>';
};

function sendMessage() {
var input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
</script>
</body>
</html>

Halaman HTML ini menciptakan interface sederhana di mana Anda dapat mengetikkan pesan, mengirimkannya ke server, dan melihat tanggapan yang diembalikan.

Dan itu saja! Kita telah meliputi dasar-dasar WebSockets, dari memahami apa itu mereka, hingga mengatur server dan membuat klien. Ingat, WebSockets tentang komunikasi real-time dan dua arah. Mereka sempurna untuk aplikasi seperti ruang chat, update olahraga langsung, atau situasi lain di mana Anda memerlukan pertukaran data instan.

Sebagai Anda terus melanjutkan perjalanan Anda dalam pengembangan web, Anda akan menemukan bahwa WebSockets membuka pintu ke dunia baru kemungkinan. Jadi terus latih, terus eksperimen, dan terutama, terus bersenang-senang! Coding yang menyenangkan!

Credits: Image by storyset