Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript dan WebSocket: Cipta sistem pengumpulan data masa nyata yang cekap

JavaScript dan WebSocket: Cipta sistem pengumpulan data masa nyata yang cekap

PHPz
PHPzasal
2023-12-18 13:00:51605semak imbas

JavaScript dan WebSocket: Cipta sistem pengumpulan data masa nyata yang cekap

JavaScript dan WebSocket: Cipta sistem pengumpulan data masa nyata yang cekap

Dalam aplikasi web moden, pemprosesan data masa nyata menjadi semakin biasa. Memandangkan penghantaran data masa nyata sewenang-wenangnya memerlukan mengelakkan kelewatan, kita perlu menggunakan kaedah komunikasi yang cekap. Artikel ini akan memperkenalkan cara menggunakan JavaScript dan WebSocket untuk membina sistem pengumpulan data masa nyata yang cekap dan menyediakan contoh kod khusus.

WebSocket ialah protokol dupleks penuh yang membenarkan sambungan jangka panjang antara pelanggan dan pelayan. Apabila jumlah data yang diperlukan adalah besar, WebSocket selalunya mempunyai kelebihan berbanding menggunakan pengangkutan komunikasi HTTP. Di samping itu, protokol WebSocket digunakan serentak dengan protokol HTTP, yang menjadikannya lebih mudah untuk disepadukan ke dalam aplikasi web sedia ada.

Berikut ialah contoh pelaksanaan asas:

  • Mula-mula, buat objek WebSocket:

    var soket = new WebSocket('ws://example.com/socket');

Ini akan mencipta An objek WebSocket dalam talian yang mewujudkan sambungan jangka panjang dengan pelayan. URL 'ws://example.com/socket' menghala ke pelayan WebSocket.

  • Seterusnya, dengar acara WebSocket:

    socket.addEventListener('open', function (event) {

      console.log('WebSocket连接已建立');

    });

    socket.addEventListener('messagereee', function('messagereee') });

    socket.addEventListener('close', function (event) {

      console.log('Received:', event.data);

    });

  • Di sini, fungsi addEventListener() digunakan untuk menambah pengendali acara untuk bertindak balas kepada acara WebSocket. Acara 'terbuka' akan dinyalakan apabila sambungan WebSocket diwujudkan, acara 'mesej' akan dinyalakan apabila data diterima, dan acara 'tutup' akan dinyalakan apabila sambungan WebSocket ditutup.

    Akhirnya, hantar/terima data WebSocket:
  • socket.send('Hello World'); // Hantar data

    var data = JSON.parse(event.data); // Terima data

    Contoh mudah ini menunjukkan cara menggunakan JavaScript dan WebSocket untuk mewujudkan sambungan klien-ke-pelayan masa nyata. Walau bagaimanapun, aplikasi sebenar memerlukan lebih banyak kod untuk mengendalikan lebih banyak situasi dan butiran teknikal.
Berikut ialah contoh aplikasi WebSocket yang lebih lengkap:

Sebelah pelayan

  console.log('WebSocket连接已关闭');

Dalam contoh ini, pelayan akan menerima sambungan klien dan disiarkan kepada semua pelanggan yang disambungkan apabila mesej berlaku. Apabila mesej "tutup" diterima, sambungan pelanggan akan ditutup. Ambil perhatian bahawa untuk melaksanakan penyiaran kita perlu mengulangi semua pelanggan yang disambungkan ke pelayan. Menggunakan WebSocket sebagai teras sistem pengumpulan data masa nyata adalah pilihan yang berkesan kerana ia dapat memastikan penghantaran yang lebih cekap dan stabil berbanding dengan penghantaran HTTP.

  • Pelanggan
  • const WebSocket = require('ws');
    const wss = new WebSocket.Server({
      port: 8080
    });
    console.log("WebSocket server started...");
     
    wss.on('connection', function(ws) {
        console.log("WebSocket client connected...");
     
        ws.on('message', function(message) {
            console.log("Message received:"+message);
            if (message === 'close') {
                ws.close();
            }
            else {
                wss.clients.forEach(function each(client) {
                    if (client.readyState === WebSocket.OPEN) {
                        console.log("Broadcasting:", message);
                        client.send(message);  // 实现广播
                    }
                });
            }
        });
     
        ws.on('close', function() {
            console.log("WebSocket closed...");
        });
    });
    

Kod pelanggan ditunjukkan di atas dan ia akan menyambung ke pelayan WebSocket yang dibuat sebelum ini. Apabila pelanggan menerima mesej, ia memaparkan kandungan mesej. Fungsi "hantar" akan menerima nilai medan teks dan menghantarnya kepada semua pelanggan pada pelayan WebSocket. Fungsi "tutup" akan menutup sambungan WebSocket klien.

  • Artikel ini menyediakan contoh asas JavaScript dan pelaksanaan WebSocket, serta kod contoh pelayan dan pelanggan yang lengkap. Sesiapa sahaja boleh mula menggunakan WebSockets dan mula membina aplikasi pengumpulan data masa nyata mereka sendiri.

Atas ialah kandungan terperinci JavaScript dan WebSocket: Cipta sistem pengumpulan data masa nyata yang cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn