WebSocket adalah teknologi integral dalam banyak aplikasi web modern. Jika Anda menulis kode untuk web, Anda mungkin pernah mendengar istilah itu sebelumnya, tetapi mungkin Anda tidak yakin apa sebenarnya itu atau bagaimana menggunakannya. Untungnya, WebSocket bukanlah konsep yang rumit, dan Anda bisa mendapatkan pemahaman dasar tentangnya dengan cukup cepat.
Apa itu WebSocket?
WebSocket, sayangnya, adalah salah satu nama yang sekilas tidak masuk akal. WebSocket sebenarnya adalah nama protokol komunikasi yang memungkinkan komunikasi dua arah antara klien dan server web.
Dalam istilah yang lebih sederhana, WebSocket adalah teknologi yang memungkinkan klien dan server untuk membuat koneksi di mana salah satu pihak dapat mengirim pesan kepada yang lain kapan saja.
Ini berbeda dari koneksi HTTP biasa, di mana klien harus memulai permintaan, dan baru kemudian server dapat mengirim respons. Faktanya, WebSocket adalah protokol komunikasi yang sama sekali berbeda dari HTTP yang dirancang agar kompatibel dengan HTTP. Ketika aplikasi klien ingin memulai koneksi WebSocket, aplikasi tersebut perlu menggunakan:
Mekanisme peningkatan HTTP untuk beralih ke protokol WebSocket.Pada titik ini, Anda mungkin berpikir: "protokol hanyalah seperangkat aturan, bagaimana Anda bisa menggunakannya untuk membuat kode?".
Bagian yang hilang adalah sesuatu yang disebut tumpukan protokol. Pada dasarnya, perangkat yang mendukung protokol memiliki perangkat keras dan perangkat lunak yang terpasang di dalamnya yang memungkinkan Anda untuk menulis aplikasi yang berkomunikasi menggunakan protokol. Protokol tidak langsung digunakan untuk membangun apa pun.
Mengapa WebSocket Dibuat?
Untuk mengilustrasikan perlunya WebSocket, pertimbangkan mekanisme di balik chatting di internet.
Seseorang mengirim pesan ke server obrolan dari perangkat mereka, tetapi server masih harus mengirim pesan itu ke perangkat Anda sebelum Anda dapat membacanya. Jika server menggunakan HTTP, server tidak dapat meneruskan pesan tersebut secara langsung kepada Anda, karena server tidak dapat memulai permintaan.
Ada beberapa cara untuk memperbaiki masalah ini dengan HTTP. Salah satu caranya adalah agar klien terus-menerus mengirim permintaan pembaruan ke server, dan server akan meneruskan data apa pun yang dimilikinya sebagai tanggapan. Teknik ini disebut polling, dan setiap permintaan disebut polling. Ada dua varian polling: polling panjang dan polling pendek.
Menggunakan varian polling panjang berarti perangkat klien terus-menerus menanyakan server apakah ada pesan baru yang tersedia. Jika pesan baru tersedia, server akan mengirim pesan sebagai tanggapan. Jika tidak, server akan menunda merespons dan menahan koneksi terbuka sampai ada data untuk dikirim kembali, dan kemudian klien akan segera membuat permintaan baru.
Teknik ini tidak efisien, karena HTTP tidak dirancang untuk digunakan dengan cara ini. Ini bekerja secara memadai dalam skala kecil, tetapi setiap permintaan HTTP melibatkan pengiriman data tambahan di header, dan ini menghasilkan peningkatan beban yang signifikan di server saat banyak klien melakukan polling dia.
Berikut adalah diagram yang menggambarkan polling panjang:
Varian polling pendek bahkan kurang efisien. Dalam polling singkat, server tidak menahan koneksi terbuka sampai ada data baru, yang berarti klien harus terus polling server pada interval yang tetap dan sangat pendek.
Teknik lain untuk komunikasi dua arah dalam HTTP disebut streaming.
Dalam streaming, setelah permintaan pertama dikirim, server membuat koneksi tetap terbuka tanpa batas waktu, mengirimkan potongan informasi baru sebagai respons parsial berkelanjutan ke klien.
Menggunakan streaming menghasilkan overhead data dan beban server yang lebih kecil daripada polling, karena idealnya klien hanya membuat satu permintaan HTTP. Sayangnya, streaming menimbulkan masalah dalam kondisi tertentu karena browser dan perantara jaringan (seperti proxy) sering kali mencoba menanganinya respons parsial sebagai bagian yang rusak dari satu respons HTTP besar (yang merupakan perilaku HTTP normal), alih-alih sebagai pesan terpisah yang dimaksudkan untuk menjadi.
WebSocket dibuat untuk mengatasi masalah ini. Tidak seperti HTTP, WebSocket dirancang khusus untuk komunikasi dua arah. Dengan WebSocket, setelah koneksi dibuka, klien dan server dapat mengirim pesan bolak-balik tanpa masalah polling atau streaming.
Gunakan Kasus untuk WebSocket
WebSocket bagus, tetapi itu tidak berarti harus digunakan di mana-mana.
Menerapkan WebSocket dapat menambah kerumitan pada aplikasi Anda, terutama di sisi server, jadi itu tidak boleh dilakukan kecuali Anda memiliki alasan yang kuat. Itu menimbulkan pertanyaan: seperti apa alasan yang bagus?
WebSocket sangat ideal untuk kasus penggunaan di mana komunikasi dua arah yang sering pada latensi rendah diperlukan. Dengan kata lain, WebSocket memberikan keuntungan bagi aplikasi yang perlu sering berkomunikasi atau dalam skala besar. Jika komunikasi tidak perlu real-time atau aplikasi tidak akan pernah berkembang menjadi skala besar, polling atau streaming mungkin cukup untuk digunakan dalam aplikasi tersebut.
Penggunaan khas WebSocket adalah dalam membangun aplikasi obrolan, game multipemain online, kolaborasi waktu nyata dan perangkat lunak notifikasi, dll.
Cara Menggunakan WebSocket di Sisi Klien
Menggunakan WebSocket di sisi server dapat agak terlibat, dan prosesnya sangat bervariasi tergantung pada bahasanya (seperti C#, Jawa, dll.) dan perpustakaan pilihan, jadi kami tidak akan membahasnya di sini. Selanjutnya, kita akan membahas secara singkat cara menggunakan WebSocket di sisi klien.
Semua browser modern mengimplementasikan API web yang disebut WebSocket API, yang merupakan tumpukan protokol browser untuk protokol WebSocket. Anda dapat menggunakan WebSocket dalam JavaScript menggunakan API ini. API memungkinkan Anda membuat objek WebSocket, di mana Anda membuat koneksi WebSocket dan berinteraksi dengan server WebSocket.
Anda dapat menggunakan format kode berikut untuk membuat objek WebSocket:
biarkan exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protokol boneka");Argumen pertama ke konstruktor adalah URI server WebSocket yang ingin Anda buat koneksinya. Itu akan selalu dimulai dengan "ws" atau "wss". Argumen kedua adalah opsional. Nilainya adalah string atau array string, yang menentukan sub-protokol yang Anda dukung.
Objek WebSocket memiliki properti read-only yang disebut readyState. Mengakses properti ini menyediakan status koneksi WebSocket saat ini. readyState memiliki empat kemungkinan nilai: "menghubungkan", "terbuka", "menutup", dan "tertutup".
Ketika baris kode itu berjalan, browser akan mencoba dan terhubung ke server yang ditentukan. Koneksi tidak akan selesai sekaligus, jadi readyState dari exampleSocket akan "menghubungkan". Tidak ada pesan yang dapat dikirim atau diterima sampai koneksi selesai, di mana nilai readyState akan menjadi "terbuka".
Itu contohSocket objek memiliki pendengar acara (yang berbeda dari pendengar acara DOM) disebut "onopen" yang memungkinkan Anda melakukan tindakan lebih lanjut hanya setelah koneksi dibuat. Objek juga memiliki metode "kirim" yang memungkinkan Anda mengirim string, Blob (data biner), dan ArrayBuffers sebagai pesan ke server.
Berikut ini contoh menggunakan ini bersama-sama:
contohSocket.onopen = fungsi (peristiwa) {
contohSocket.send("WebSocket sangat keren");
};API juga menyediakan cara bagi Anda untuk dapat bereaksi terhadap pesan yang dikirim server. Ini dilakukan dengan pendengar acara "onmessage". Berikut ini contohnya:
contohSocket.onmessage = fungsi (peristiwa) {
menghibur.catatan(peristiwa.data);
}Sebagai gantinya, Anda juga bisa menulis fungsi panah:
exampleSocket.onmessage = (acara) => { menghibur.log (acara.data); }API juga menyediakan menutup() metode untuk menutup koneksi. Berikut tampilannya:
contohSocket.menutup();WebSocket Memungkinkan Komunikasi Dua Arah yang Efisien
WebSocket adalah protokol komunikasi dua arah. Server dan browser menerapkan tumpukan protokol untuk berkomunikasi menggunakan WebSocket. WebSocket ada karena HTTP tidak dirancang untuk dua arah. Ada metode untuk menerapkan koneksi dua arah dengan HTTP, tetapi mereka memiliki masalah.
WebSocket adalah teknologi yang kuat, tetapi tidak diperlukan dalam semua kasus, karena dapat secara signifikan memperumit arsitektur aplikasi. Menggunakan WebSocket di sisi klien dilakukan dengan browser WebSocket API.