Panduan Awal WebSocket

Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia yang menarik WebSocket. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - pada akhir panduan ini, Anda akan menjadi ahli WebSocket! Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita mulai perjalanan ini.

Apa Itu WebSocket?

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

Itu seperti cara komunikasi web tradisional bekerja. Browser Anda mengirimkan permintaan, menunggu tanggapan, dan kemudian menutup koneksi. Sedangkan WebSocket, seperti memiliki jalur telepon terbuka tempat Anda dan teman Anda dapat berbicara kapan saja tanpa terus menghubungi dan menutup panggilan. Keren, kan?

Sintaks

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

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

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

Atribut WebSocket

WebSocket datang dengan beberapa atribut yang praktis yang memberitahu kita tentang status koneksi saat ini. Mari kita lihat mereka dalam tabel:

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

Atribut readyState sangat berguna. Itu bisa 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

WebSocket tidak hanya tentang mengirimkan data - mereka juga dapat merespon berbagai event. Itu seperti menata papan bendera yang meledak saat hal tertentu terjadi! Berikut adalah event utama:

1. onopen: Diterapkan saat koneksi dibuat.
2. onmessage: Diterapkan saat data diterima dari server.
3. onerror: Diterapkan saat terjadi kesalahan.
4. onclose: Diterapkan 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 menata fungsi untuk menghandle setiap event. Saat koneksi terbuka, kita mencatat pesan. Saat kita menerima pesan, kita mencatatnya. Jika terjadi 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 bisa melakukan hal-hal dengan WebSocket. Berikut adalah metode utama:

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

Berikut cara 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 sangat sederhana! Dengan send(), kita dapat mengirimkan data apa pun yang kita inginkan ke server. Dan saat kita selesai, kita dapat secara sopan menutup koneksi dengan close().

Menyiapkan Server WebSocket dengan Python

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 bisa menyiapkan server WebSocket sederhana menggunakan Python. Jangan khawatir jika Anda tidak familiar dengan Python - konsepnya yang penting di sini.

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, diprefixer dengan "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 menghubungkan kepadanya:

<!DOCTYPE html>
<html>
<head>
<title>Test WebSocket</title>
</head>
<body>
<h1>Test 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 membuat interface sederhana tempat Anda dapat mengetikkan pesan, mengirimkannya ke server, dan melihat tanggapan yang diembalikan.

Dan itu dia! Kita telah meliputi dasar-dasar WebSocket, dari memahami apa itu mereka, hingga menyiapkan server dan membuat klien. Ingat, WebSocket tentang komunikasi real-time, dua arah. Mereka sempurna untuk aplikasi seperti ruang chat, pembaruan olahraga langsung, atau situasi lain dimana Anda memerlukan pertukaran data instan.

Sebagai Anda terus melanjutkan perjalanan Anda dalam pengembangan web, Anda akan menemukan bahwa WebSocket membuka dunia baru kemungkinan. Jadi terus latihan, terus eksperimen, dan terus bersenang-senang! Selamat coding!

Credits: Image by storyset