Phenquestions
Protokol WebSocket memungkinkan komunikasi dua hala berlaku antara klien dan pelayan. Proses ini serupa dengan cara panggilan di telefon anda: pertama, anda membuat sambungan, dan kemudian anda boleh mula berkomunikasi antara satu sama lain. Protokol WebSocket digunakan hampir di mana sahaja - dari permainan penyemak imbas berbilang pemain hingga aplikasi sembang.
Artikel ini menunjukkan cara membuat protokol WebSocket dan menggunakannya untuk berkomunikasi dengan beberapa pengguna.
Prasyarat
Sebelum beralih ke proses membuat dan menggunakan protokol WebSocket, pertama anda perlu memasang beberapa perkara yang diperlukan untuk proses ini. Perkara pertama yang perlu anda pasang ialah Node.js, platform sisi pelayan yang mengubah bahasa pengaturcaraan JavaScript menjadi kod mesin yang membolehkan anda menjalankan JavaScript secara langsung di komputer anda. Untuk memasang Node.js, pengguna Windows boleh pergi ke Node rasmi.laman web js dan klik pada butang LTS hijau yang terdapat di bahagian tengah skrin.
Untuk pengguna Linux dan macOS, klik pada Muat turun bahagian dalam sub-tajuk laman web.
Selepas membuka Muat turun bahagian, anda akan melihat fail pemasangan untuk ketiga-tiga platform utama. Pilih pakej yang disokong oleh sistem anda.
Jalankan pemasang yang disertakan dengan fail yang dimuat turun, dan Node.js akan dipasang di komputer anda. Untuk memeriksa sama ada program telah dipasang, buka terminal dan keluarkan arahan berikut:
$ simpul -v
Selepas memasang Node.js, anda kini mempunyai akses ke pelbagai modul JavaScript, yang akan menjadikan kerja anda lebih cekap dalam jangka masa panjang. Buka direktori di mana anda ingin membuat seni bina pelanggan dan pelayan anda, kemudian buka terminal di dalam direktori tersebut dan jalankan perintah berikut:
$ npm init -y
Perintah ini digunakan untuk membuat pakej.fail json yang membolehkan anda mengatur dan memasang Node yang berbeza.pakej js. Pasang pakej protokol WebSocket dengan mengeluarkan perintah berikut di terminal:
$ npm pasang ws
Buat tiga fail, dipanggil indeks.html, pelanggan.js, dan pelayan.js. Seperti yang ditunjukkan oleh nama, file JavaScript ini adalah arsitektur klien dan pelayan protokol WebSocket kami. Sekarang, kita akhirnya dapat mula menulis kod aplikasi pelanggan dan pelayan kita.
Membuat Pelayan WebSocket
Untuk membuat pelayan WebSocket, kita akan memulakan dengan menulis kod untuk pelayan. Buka pelayan.js fail yang anda buat di dalam editor teks atau IDE anda di bahagian sebelumnya dan masukkan baris berikut di dalam fail.
const WebSocket = memerlukan ('ws');const ws = WebSocket baru.Pelayan (port: 8080);
konsol.log ("Pelayan Dimulakan");
ws.pada ('sambungan', (wss) =>
konsol.log ("Pelanggan Baru Disambungkan")
wss.hantar ('Selamat Datang ke Pelayan!');
wss.pada ('message', (message) =>
konsol.log ('Pelayan Diterima: $ message');
wss.hantar ('Got Your Message:' + message);
);
);
Sekarang, kami akan menerangkan apa yang dilakukan oleh setiap baris dengan lebih terperinci.
Penjelasan Kod
Seperti yang telah disebutkan sebelumnya, terdapat beberapa modul bawaan yang terdapat di Node.js yang menjadikan kerja anda lebih mudah. Untuk mengimport modul ini, kami akan menggunakan memerlukan kata kunci.
const WebSocket = memerlukan ('ws');const ws = WebSocket baru.Pelayan (port: 8080);
konsol.log ("Pelayan Dimulakan");
Baris pertama digunakan untuk mengimport Node.Modul WebSocket js. Dengan menggunakan modul ini, pada baris seterusnya, kami membuat pelayan WebSocket kami, yang mendengar pada port 8080. The konsol.log () talian hanya ada untuk memberitahu kami bahawa Pelayan telah bermula. Anda akan melihat ini muncul di dalam terminal anda apabila anda menjalankan perintah berikut di terminal:
pelayan $ node
Di baris seterusnya, kami menjalin hubungan antara pelayan dan klien.
ws.pada ('sambungan', (wss) =>konsol.log ("Pelanggan Baru Disambungkan")
);
Setelah sambungan terjalin, wss.talian hantar () menghantar mesej kepada pelanggan. Dalam kes ini, mesej adalah "Selamat Datang ke Pelayan."
wss.hantar ('Selamat Datang ke Pelayan!');Akhirnya, wss.on ('message') adalah untuk pelayan menerima mesej dari klien. Untuk pengesahan, pelayan menghantar kembali mesej ini kepada pelanggan di baris terakhir.
wss.pada ('message', (message) =>konsol.log ('Pelayan Diterima: $ message');
wss.hantar ('Got Your Message:' + message);
);
Membuat Pelanggan WebSocket
Untuk pelanggan, kami memerlukan kedua-dua indeks.fail html dan pelanggan.fail js. Sudah tentu, anda boleh menambahkan kandungan dari pelanggan.fail js ke dalam indeks anda.fail html, tetapi saya lebih suka memisahkannya. Mari kita melihat pelanggan terlebih dahulu.kod js. Buka fail dan masukkan baris berikut di dalam fail:
const socket = WebSocket baru ('ws: // localhost: 8080');soket.addEventListener ('buka', () =>
konsol.log ('Bersambung ke Pelayan!');
);
soket.addEventListener ('message', (msg) =>
konsol.log ('Pelanggan Diterima: $ msg.data ');
);
const sendMsg = () =>
soket.hantar ('Bagaimana keadaannya amigo!');
Penjelasan Kod
Seperti dengan pelayan.js, kita akan membuat WebSocket baru yang mendengarkan port 8080, yang dapat dilihat di localhost: 8080 bahagian kod.
const socket = WebSocket baru ('ws: // localhost: 8080');Di baris seterusnya, tambahEventListener membuat pelanggan anda mendengar sebarang kejadian yang sedang berlaku. Dalam kes ini, ia akan membuat dan memulakan pelayan. Setelah sambungan dibuat, pelanggan mengeluarkan mesej ke terminal.
soket.addEventListener ('buka', () =>konsol.log ('Bersambung ke Pelayan!');
);
Sekali lagi, pelanggan mendengar sebarang kejadian yang sedang berlaku. Semasa pelayan menghantar mesej, pelanggan menerimanya dan kemudian memaparkan mesej di terminal.
soket.addEventListener ('message', (msg) =>konsol.log ('Pelanggan Diterima: $ msg.data ');
);
Beberapa baris terakhir hanyalah fungsi di mana pelanggan menghantar mesej ke pelayan. Kami akan menyambungkannya ke butang dalam fail html kami untuk pemahaman yang lebih baik mengenai bagaimana ini berfungsi.
const sendMsg = () =>soket.hantar ('Bagaimana keadaannya amigo!');
Menyiapkan Fail HTML
Akhirnya, buka indeks.fail html dan tambahkan rujukan kepada pelanggan anda.fail js di dalamnya. Dalam kes saya, saya hanya akan menambah baris kod berikut:
Seperti yang anda lihat dalam baris di bawah, src (di dalam tag skrip) merujuk kepada fail javascript klien. Fungsi sendMsg, yang dibuat di klien.fail js, juga telah disambungkan ke fungsi onClick butang.
Menggabungkan Semuanya
Anda kini boleh mula menguji Senibina Pelanggan dan Pelayan anda. Pertama, buka terminal dan jalankan arahan berikut untuk memulakan pelayan anda:
pelayan $ node
Setelah memulakan pelayan anda, buka direktori di mana indeks anda.Fail html ada, dan klik dua kali padanya untuk membukanya di penyemak imbas anda. Anda akan melihat mesej berikut muncul di terminal yang menyatakan bahawa pelanggan telah berhubung:
Anda juga dapat memeriksa mesej yang dikirim dari pelayan kepada klien dengan menekan butang klik kanan dan kemudian membuka Periksa tingkap. Di tetingkap ini, klik Konsol bahagian, dan anda akan dapat melihat mesej yang dihantar dari pelayan.
Sebaik sahaja anda mengklik butang, pelayan dan pelanggan akan dapat menghantar dan menerima mesej antara satu sama lain.
Pelayan:
Pelanggan:
Walaupun, sambungan WebSocket anda telah terjalin!
Kesimpulannya
Protokol WebSocket adalah cara terbaik untuk menjalin komunikasi antara pelanggan dan pelayan. Protokol ini digunakan dalam beberapa bidang, termasuk permainan penyemak imbas berbilang pemain, sistem sembang dari pelbagai platform media sosial, dan bahkan proses kolaborasi antara pengekod.
