Phenquestions
Protokol WebSocket memungkinkan terjadinya komunikasi dua arah antara klien dan server. Proses ini mirip dengan cara melakukan panggilan di ponsel Anda: pertama, Anda membuat koneksi, dan kemudian Anda dapat mulai berkomunikasi satu sama lain. Protokol WebSocket digunakan hampir di semua tempat - mulai dari game browser multipemain hingga aplikasi obrolan.
Artikel ini menunjukkan cara membuat protokol WebSocket dan menggunakannya untuk berkomunikasi dengan banyak pengguna.
Prasyarat
Sebelum melanjutkan ke proses pembuatan dan penggunaan protokol WebSocket, Anda harus menginstal terlebih dahulu beberapa hal yang diperlukan untuk proses ini. Hal pertama yang perlu Anda instal adalah Node.js, platform sisi server yang mengubah bahasa pemrograman JavaScript menjadi kode mesin yang memungkinkan Anda menjalankan JavaScript secara langsung di komputer Anda. Untuk menginstal Node.js, pengguna Windows cukup pergi ke Node resmi.js dan klik tombol LTS hijau yang ada di tengah layar.
Untuk pengguna Linux dan macOS, klik pada Unduhan bagian di sub-judul situs web.
Setelah membuka Unduhan bagian, Anda akan melihat file instalasi untuk ketiga platform utama. Pilih paket yang didukung oleh sistem Anda.
Jalankan penginstal yang disertakan dengan file yang diunduh, dan Node.js akan diinstal di komputer Anda. Untuk memeriksa apakah program telah diinstal, buka terminal dan jalankan perintah berikut:
$ simpul -v
Setelah menginstal Node.js, Anda sekarang memiliki akses ke berbagai modul JavaScript, yang akan membuat pekerjaan Anda lebih efisien dalam jangka panjang. Buka direktori tempat Anda ingin membuat arsitektur klien dan server Anda, lalu buka terminal di dalam direktori itu dan jalankan perintah berikut:
$npm init -y
Perintah ini digunakan untuk membuat paket.file json yang memungkinkan Anda untuk mengatur dan menginstal berbagai Node.paket js. Instal paket protokol WebSocket dengan mengeluarkan perintah berikut di terminal:
$npm instal ws
Buat tiga file, yang disebut indeks.html, klien.js, dan server.js. Seperti yang ditunjukkan oleh namanya, file JavaScript ini adalah arsitektur klien dan server dari protokol WebSocket kami. Sekarang, kita akhirnya dapat mulai menulis kode aplikasi klien dan server kita.
Membuat Server WebSocket
Untuk membuat server WebSocket, kita akan mulai dengan menulis kode untuk server. Buka server.js file yang Anda buat di dalam editor teks atau IDE Anda di bagian sebelumnya dan masukkan baris berikut di dalam file.
const WebSocket = membutuhkan('ws');const ws = WebSocket baru.Server(port: 8080);
menghibur.log("Server Dimulai");
ws.pada('koneksi', (wss) =>
menghibur.log("Klien baru Terhubung")
wss.send('Selamat datang di Server!');
wss.pada('pesan', (pesan) =>
menghibur.log('Server Diterima: $pesan');
wss.send('Dapatkan Pesan Anda: ' + pesan);
);
);
Sekarang, kami akan menjelaskan apa yang dilakukan setiap baris secara lebih rinci.
Penjelasan Kode
Seperti disebutkan sebelumnya, ada beberapa modul bawaan yang tersedia di Node.js yang membuat pekerjaan Anda lebih mudah. Untuk mengimpor modul ini, kami akan menggunakan memerlukan kata kunci.
const WebSocket = membutuhkan('ws');const ws = WebSocket baru.Server(port: 8080);
menghibur.log("Server Dimulai");
Baris pertama digunakan untuk mengimpor Node.modul js WebSocketket. Menggunakan modul ini, di baris berikutnya, kami membuat server WebSocket kami, yang mendengarkan pada port 8080. Itu menghibur.catatan() line hanya ada di sana untuk memberi tahu kami bahwa Server telah dimulai. Anda akan melihat ini muncul di dalam terminal Anda ketika Anda menjalankan perintah berikut di terminal:
$ server simpul
Di baris berikutnya, kami membuat koneksi antara server dan klien.
ws.pada('koneksi', (wss) =>menghibur.log("Klien baru Terhubung")
);
Setelah koneksi dibuat, wss.send() baris mengirim pesan ke klien. Dalam hal ini, pesannya adalah "Selamat datang di Server".”
wss.send('Selamat datang di Server!');Akhirnya wss.on ('pesan') adalah untuk server menerima pesan dari klien. Untuk konfirmasi, server mengirimkan pesan ini kembali ke klien di baris terakhir.
wss.pada('pesan', (pesan) =>menghibur.log('Server Diterima: $pesan');
wss.send('Dapatkan Pesan Anda: ' + pesan);
);
Membuat Klien WebSocket
Untuk sisi klien, kami membutuhkan kedua indeks.file html dan klien.file js. Tentu saja, Anda cukup menambahkan konten dari klien.file js ke dalam indeks Anda.html, tapi saya lebih suka memisahkannya. Mari kita lihat kliennya dulu.kode js. Buka file dan masukkan baris berikut di dalam file:
const socket = new WebSocket('ws://localhost:8080');stopkontak.addEventListener('buka', () =>
menghibur.log('Terhubung ke Server!');
);
stopkontak.addEventListener('pesan', (pesan) =>
menghibur.log('Klien Diterima: $msg.data');
);
const sendMsg = () =>
stopkontak.send('Bagaimana kabarnya amigo!');
Penjelasan Kode
Seperti dengan server.js, kita akan membuat WebSocket baru yang mendengarkan port 8080, yang dapat dilihat di localhost:8080 bagian kode.
const socket = new WebSocket('ws://localhost:8080');Di baris berikutnya, tambahkanEventListener membuat klien Anda mendengarkan setiap peristiwa yang sedang terjadi. Dalam hal ini, itu akan membuat dan memulai server. Setelah koneksi dibuat, klien mengeluarkan pesan ke terminal.
stopkontak.addEventListener('buka', () =>menghibur.log('Terhubung ke Server!');
);
Sekali lagi, klien mendengarkan setiap peristiwa yang sedang terjadi. Ketika server mengirim pesan, klien menerima ini dan kemudian menampilkan pesan di terminal.
stopkontak.addEventListener('pesan', (pesan) =>menghibur.log('Klien Diterima: $msg.data');
);
Beberapa baris terakhir hanyalah fungsi di mana klien mengirim pesan ke server. Kami akan menghubungkan ini ke tombol di file html kami untuk pemahaman yang lebih baik tentang cara kerjanya.
const sendMsg = () =>stopkontak.send('Bagaimana kabarnya amigo!');
Menyiapkan File HTML
Terakhir, buka indeks.html dan tambahkan referensi ke klien Anda.file js di dalamnya. Dalam kasus saya, saya hanya akan menambahkan baris kode berikut:
Seperti yang Anda lihat pada baris di bawah ini, src (di dalam tag skrip) merujuk ke file javascript klien. Fungsi sendMsg, yang dibuat di klien.file js, juga telah terhubung ke fungsi onClick tombol.
Menyatukan Semuanya
Anda sekarang dapat mulai menguji Arsitektur Klien dan Server Anda. Pertama, buka terminal dan jalankan perintah berikut untuk memulai server Anda:
$ server simpul
Setelah memulai server Anda, buka direktori tempat indeks Anda.html ada, dan klik dua kali untuk membukanya di browser Anda. Anda akan melihat pesan berikut muncul di terminal yang menyatakan bahwa klien telah terhubung:
Anda juga dapat memeriksa pesan yang dikirim dari server ke klien dengan menekan tombol klik kanan dan kemudian membuka Memeriksa jendela. Di jendela ini, klik Menghibur bagian, dan Anda akan dapat melihat pesan yang dikirim dari server.
Setelah Anda mengklik tombol, server dan klien akan dapat mengirim dan menerima pesan ke dan dari satu sama lain.
Server:
Klien:
Voila, koneksi WebSocket Anda telah dibuat!
Kesimpulan
Protokol WebSocket adalah cara terbaik untuk membangun komunikasi antara klien dan server. Protokol ini digunakan di beberapa bidang, termasuk game browser multipemain, sistem obrolan berbagai platform media sosial, dan bahkan proses kolaborasi antar coders.
