Artikel ini menumpukan pada memahami konsep WebSockets dalam Node.js untuk mewujudkan gerbang untuk komunikasi dua hala masa nyata.
WebSockets
Soket web ialah sejenis saluran komunikasi yang mencipta saluran dua hala untuk maklumat melalui komunikasi tunggal dan tahan lama. Ia tidak seperti komunikasi dua hala biasa di internet, ia membolehkan kedua-dua pengguna dan pelayan menghantar mesej pada bila-bila masa mereka mahu. Teknik yang digunakan ialah jabat tangan WebSocket, satu proses yang mewujudkan sambungan yang lancar antara pelayan dan pengguna, yang membolehkan mereka berkongsi maklumat berulang-alik tanpa sebarang masalah.
Mari kita lihat beberapa kelebihan WebSockets sebelum kita menyelami mewujudkan salah satu daripada kita sendiri.
Kelebihan WebSockets
WebSockets menawarkan pelbagai kelebihan berbanding HTTP tradisional:
Kelajuan Lebih Cepat
Apabila pengguna telah menyediakan WebSocket sambungan kekal terbuka sepanjang masa dan tidak ada keperluan untuk memulakan atau menghentikan sambungan, yang menjadikan perkara lebih pantas tanpa sebarang kelewatan.
Penggunaan Sumber yang Cekap
WebSockets menggunakan sumber komputer dengan cekap. Memandangkan tiada masa yang terbuang untuk memulakan atau menghentikan sambungan untuk setiap permintaan, komputer berfungsi dengan lebih optimum.
Kemas Kini Segera
Jika pengguna membuat aplikasi yang perlu segera memindahkan maklumat dalam masa nyata seperti berbual, skor sukan, dsb. WebSockets memastikan maklumat itu bergerak pantas.
Sekarang setelah kita mempunyai pemahaman yang lebih baik tentang perkara yang kita cuba wujudkan, marilah kita membina WebSocket kita sendiri dalam Node.js.
Bagaimana untuk Menubuhkan dan Menggunakan WebSocket dalam Node.js?
Ikuti langkah di bawah untuk berjaya menyediakan WebSocket pada peranti anda:
Langkah 1: Sediakan Persekitaran Pembangunan
Sebelum menubuhkan WebSocket terdapat beberapa pakej dan modul prasyarat yang akan dipasang.
Pasang pakej di bawah pada peranti anda:
npm init -ynpm pasang ws
Fungsi baris arahan ini adalah seperti berikut:
- “ npm init -y ” memulakan projek Node.js baharu. ' -dan Perintah ” bermaksud ya yang boleh ditentukan sebagai benar dalam bahasa komputer. Ia juga memastikan bahawa ia akan menggunakan semua pakej dan modul dalam json fail. The package.json fail mengandungi semua maklumat tentang projek Node.js seperti kebergantungan, modul dan tetapan lain.
- Selepas projek telah dimulakan, pengguna boleh menjalankan arahan kedua untuk memasang ' ws ” pakej. Ia menyediakan API asas yang mencipta Websocket untuk pelayan dan pelanggan.
Kedua-dua arahan ini menyediakan persekitaran pembangunan untuk mewujudkan WebSocket dan menyampaikan maklumat dalam masa nyata.
fail package.json dalam Node.js
Fail pakackge.json mempunyai semua fungsi sokongan untuk projek Node.js.
Kandungan fail package.json akan menjadi seperti ini:
Kotak warna merah dalam gambar di atas menunjukkan versi pustaka ws(WebSocket) anda yang dipasang.
Selepas menyediakan persekitaran pembangunan, teruskan membuat WebSocket.
Langkah 2: Mencipta Pelayan WebSocket
Untuk mencipta pelayan WebSocket buat fail dalam editor kod anda dengan sambungan .js dan sebarang nama yang diingini.
Di bawah ialah kod untuk fail pelayan:
const WebSocket = memerlukan ( 'ws' ) ;const http = memerlukan ( 'http' ) ;
const pelayan = http. createServer ( ) ;
const wss = baru WebSocket. pelayan ( { pelayan } ) ;
wss. pada ( 'sambungan' , ( ws ) => {
konsol. log ( 'Pelanggan disambungkan' ) ;
ws. pada ( 'mesej' , ( mesej ) => {
konsol. log ( `Diterima : $ { mesej } ` ) ;
wss. pelanggan . untuk setiap ( ( pelanggan ) => {
jika ( pelanggan !== ws && pelanggan. readyState === WebSocket. BUKA ) {
pelanggan. hantar ( mesej ) ;
}
} ) ;
} ) ;
ws. pada ( 'tutup' , ( ) => {
konsol. log ( 'Pelanggan terputus sambungan' ) ;
} ) ;
} ) ;
pelayan. dengar ( 3000 , ( ) => {
konsol. log ( 'Pelayan mendengar pada http://localhost:3000' ) ;
} ) ;
Fungsi yang dilakukan oleh kod di atas ialah:
- “ const WebSocket = memerlukan('ws') ” dan “ const http = memerlukan('http') ” mengimport modul terbina dalam yang diperlukan untuk mengendalikan permintaan HTTP.
- “const server = http.createServer()” mencipta pelayan asas dalam Node.js.
- “ const wss = WebSocket.Server baharu({ pelayan }) ” mencipta WebSocket pada pelayan HTTP yang dibuat. Untuk mendengar mesej masuk WebSocket, ia menyediakan pelayan soket web.
- “ on(‘sambungan’, (ws) => { … }) ” dilaksanakan apabila pelanggan mewujudkan sambungan WebSocket. Satu contoh ' ws ” dicipta yang mewakili sambungan.
- “ on(‘message’, (message) => { … }) ” Kod ini dilaksanakan apabila mesej (daripada klien yang disambungkan) diterima ke pelayan. Ia log mesej yang diterima dan kemudian menyiarkannya kepada semua pelanggan yang disambungkan.
- “ clients.forEach((client) => { … }) ” menggelung ke atas semua klien yang disambungkan dan menghantar mesej kepada setiap klien jika sambungan WebSocket dibuka.
- ' pada ('tutup', () => { … }) kod ” dilaksanakan apabila klien telah memutuskan sambungan daripada sambungan WebSocket dan menghantar mesej kepada pelayan yang menunjukkan bahawa klien telah memutuskan sambungan.
- “ dengar(3000, () => { … }) ” memulakan pelayan HTTP untuk mendengar pada port 3000. Setelah pelayan berjalan, ia menunjukkan mesej bahawa pelayan kini mendengar pada “http://localhost:3000/”. Users can have some other port that is listening to the connections.
Sekarang bahawa WebSocket kami telah dibuat, mari kita uji dari hujung pelanggan.
Langkah 3: Buat Klien untuk menguji Created WebSocket
Sekarang buat fail HTML asas yang berjalan pada halaman web untuk menguji WebSocket. Buat satu index.html fail dan gunakan kod di bawah:
< html cuma = 'dalam' >
< kepala >
< meta charset = 'UTF-8' >
< meta nama = 'port view' kandungan = 'lebar=lebar peranti, skala awal=1.0' >
< tajuk > Sembang WebSocket < / tajuk >
< / kepala >
< badan >
< input taip = 'teks' ID = 'messageInput' pemegang tempat = 'Taip mesej...' >
< butang onclick = 'menghantar mesej()' > Hantar < / butang >
< ul ID = 'mesej sembang' >< / ul >
< skrip >
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', (event) => {
console.log('Disambungkan ke pelayan');
});
ws.addEventListener('message', (event) => {
const chatMessages = document.getElementById('chatMessages');
const messageItem = document.createElement('li');
messageItem.textContent = peristiwa.data;
chatMessages.appendChild(messageItem);
});
fungsi sendMessage() {
const messageInput = document.getElementById('messageInput');
mesej const = messageInput.value;
jika (mesej) {
ws.send(message);
messageInput.value = '';
}
}
< / skrip >
< / badan >
< / html >
Fungsi kod di atas adalah seperti berikut:
- Format kod asas untuk HTML ditulis.
- “ ” mencipta kotak input pada halaman web HTML dengan pemegang tempat menunjukkan mesej untuk pengguna menaip mesej.
- “ ” menghantar mesej yang ditaip daripada pengguna ke pelayan.
- “
- “