JavaScript und WebSocket: Erstellen Sie ein effizientes Echtzeit-Datenerfassungssystem

JavaScript und WebSocket: Erstellen Sie ein effizientes Echtzeit-Datenerfassungssystem

In modernen Webanwendungen wird die Verarbeitung von Echtzeitdaten immer häufiger eingesetzt. Da bei der Übertragung beliebiger Echtzeitdaten Verzögerungen vermieden werden müssen, müssen wir eine effiziente Kommunikationsmethode verwenden. In diesem Artikel wird die Verwendung von JavaScript und WebSocket zum Aufbau eines effizienten Echtzeit-Datenerfassungssystems vorgestellt und spezifische Codebeispiele bereitgestellt.

WebSocket ist ein Vollduplex-Protokoll, das langfristige Verbindungen zwischen Clients und Servern ermöglicht. Wenn die erforderliche Datenmenge groß ist, bietet WebSocket häufig Vorteile gegenüber der Verwendung des HTTP-Kommunikationstransports. Darüber hinaus wird das WebSocket-Protokoll gleichzeitig mit dem HTTP-Protokoll verwendet, was die Integration in bestehende Webanwendungen erleichtert.

Hier ist ein einfaches Implementierungsbeispiel:

• Erstellen Sie zunächst ein WebSocket-Objekt:

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

Dadurch wird ein An erstellt Online-WebSocket-Objekt, das eine langfristige Verbindung mit dem Server herstellt. Die URL „ws://example.com/socket“ verweist auf den WebSocket-Server.

• Als nächstes hören Sie sich WebSocket-Ereignisse an:

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

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

  Nach dem Login kopieren

  });

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

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

  Nach dem Login kopieren

  });

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

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

  Nach dem Login kopieren

  });

Hier wird die Funktion addEventListener() verwendet, um einen Ereignishandler hinzuzufügen, der auf WebSocket-Ereignisse reagiert. Das Ereignis „open“ wird ausgelöst, wenn die WebSocket-Verbindung hergestellt wird, das Ereignis „message“ wird ausgelöst, wenn Daten empfangen werden, und das Ereignis „close“ wird ausgelöst, wenn die WebSocket-Verbindung geschlossen wird.

• Zum Schluss WebSocket-Daten senden/empfangen:

  socket.send('Hello World'); // Daten senden

  var data = JSON.parse(event.data); // Daten empfangen

Dieses einfache Beispiel zeigt, wie Sie mithilfe von JavaScript und WebSocket eine Client-zu-Server-Verbindung in Echtzeit herstellen. Echte Anwendungen erfordern jedoch mehr Code, um mehr Situationen und technische Details zu bewältigen.

Hier ist ein vollständigeres WebSocket-Anwendungsbeispiel:

Serverseitig

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...");
    });
});

• In diesem Beispiel akzeptiert der Server Clientverbindungen und sendet sie an alle verbundenen Clients, wenn eine Nachricht auftritt. Wenn eine „Schließen“-Nachricht empfangen wird, wird die Verbindung des Clients geschlossen. Beachten Sie, dass wir zum Implementieren von Broadcast alle mit dem Server verbundenen Clients durchlaufen müssen. Die Verwendung von WebSocket als Kern des Echtzeit-Datenerfassungssystems ist eine effektive Wahl, da es im Vergleich zur HTTP-Übertragung eine effizientere und stabilere Übertragung gewährleisten kann.

Client

var ws = new WebSocket('ws://localhost:8080');
console.log("WebSocket client started...");
 
ws.onmessage = function(msg) {
    console.log("Received: " + msg.data);
};
 
ws.onclose = function() {
    console.log("WebSocket closed...");
};
 
function send() {
    var val = document.getElementById('input').value;
    console.log("Sending: " + val);
    ws.send(val);
}
 
function close() {
    console.log("Closing WebSocket...");
    ws.send('close');
    ws.close();
}

• Der Client-Code wird oben angezeigt und stellt eine Verbindung zum zuvor erstellten Server-WebSocket her. Wenn der Client eine Nachricht empfängt, zeigt er den Inhalt der Nachricht an. Die Funktion „Senden“ empfängt den Textfeldwert und sendet ihn an alle Clients auf dem WebSocket-Server. Die Funktion „Schließen“ schließt die WebSocket-Verbindung des Clients.

Dieser Artikel enthält grundlegende JavaScript- und WebSocket-Implementierungsbeispiele sowie vollständigen Server- und Client-Beispielcode. Jeder kann mit der Nutzung von WebSockets beginnen und mit der Entwicklung eigener Echtzeit-Datenerfassungsanwendungen beginnen.

Das obige ist der detaillierte Inhalt vonJavaScript und WebSocket: Erstellen Sie ein effizientes Echtzeit-Datenerfassungssystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!