Was ist WebSocket? Wie wird es verwendet? Was sind seine Vorteile? Was sind die Unterschiede zu AJAX und Axios?
WebSocket ist ein Kommunikationsprotokoll, das von vielen modernen Webbrowsern und Serverplattformen unterstützt wird. Dieses Protokoll ermöglicht bidirektionale Kommunikation zwischen einem Webbrowser und einem Server. Während das traditionelle HTTP-Protokoll ein "Anfrage-Antwort"-Modell für Client-zu-Server-Anfragen verwendet, kann der Server mit WebSocket auch Daten an den Client senden. Dies ist entscheidend für die Unterstützung von Echtzeitanwendungen und interaktiven Websites.
WebSocket bietet bidirektionale Kommunikation zwischen einem Client und einem Server. Daher arbeitet die WebSocket-Technologie zwischen Client und Server. Allerdings ist WebSocket-Unterstützung auf der Serverseite erforderlich. Sobald eine Verbindung zwischen Client und Server hergestellt ist, können beide Seiten Daten senden und empfangen. Folglich müssen sowohl auf der Client- als auch auf der Serverseite geeignete Anwendungscodes vorhanden sein, um Echtzeitkommunikation mit WebSocket zu ermöglichen. Ein Webbrowser kann beispielsweise WebSocket auf der Client-Seite verwenden, während ein Webserver WebSocket-Verbindungen auf der Server-Seite akzeptieren und verarbeiten kann. Auf diese Weise ermöglicht es Echtzeitkommunikation mit WebSocket.
Die Hauptmerkmale von WebSocket sind:
Vollduplex-Kommunikation: Sowohl Client als auch Server können nach Herstellung der Verbindung Daten miteinander austauschen.
Geringe Latenz: WebSocket tauscht Daten direkt ohne unnötige zusätzliche Header-Daten wie HTTP aus, was zu geringerer Latenz führt.
Einzelverbindung: Eine einzelne Verbindung kann für mehrere Datenaustauschvorgänge verwendet werden, wodurch der Overhead durch unnötige Verbindungsaufbauten reduziert wird.
Protokollerweiterbarkeit: WebSocket kann durch Protokollerweiterungen angepasst und erweitert werden.
WebSocket wird in einer Vielzahl von Szenarien eingesetzt, die Echtzeitkommunikation in webbasierten Anwendungen erfordern. Es ist ideal für Anwendungen wie Live-Chat, Online-Spiele, Finanzanwendungen und Echtzeitanalysen.
Einige Anwendungsfälle für WebSocket:
-
Live-Chat-Anwendungen: WebSocket ist ideal für Live-Chat-Anwendungen, bei denen Benutzer in Echtzeit kommunizieren können. Schnelles Senden und Empfangen von Nachrichten verbessert die Benutzererfahrung.
-
Echtzeit-Spiele: Mehrspieler-Online-Spiele erfordern einen schnellen und kontinuierlichen Datenaustausch zwischen Spielern. WebSocket ist ideal, um Benutzerinteraktionen in solchen Spielen in Echtzeit zu verarbeiten.
-
Finanzanwendungen: Aktien-, Kryptowährungs- und andere Finanzkurse ändern sich schnell. Finanzanwendungen können WebSocket nutzen, um Marktdaten in Echtzeit zu überwachen und Benutzern sofortige Benachrichtigungen zu senden.
-
Echtzeitanalysen: WebSocket kann für Big-Data-Verarbeitung und Echtzeitanalysen verwendet werden. Beispielsweise kann eine Streaming-Datenanalyseanwendung eingehende Daten sofort verarbeiten und die Ergebnisse den Benutzern anzeigen.
-
Fernsteuerung und -überwachung: In Anwendungen wie IoT-Geräten und industriellen Steuerungssystemen kann WebSocket für die kontinuierliche Kommunikation mit Geräten und die Statusüberwachung verwendet werden.
-
Drag-and-Drop-Datei-Upload: WebSocket kann verwendet werden, um Drag-and-Drop-Datei-Uploads in Echtzeit zu überwachen und den Fortschritt den Benutzern anzuzeigen.
Diese Szenarien sind nur einige Beispiele für WebSocket. Diese Technologie ist eine geeignete Lösung für viele Anwendungen, die in verschiedenen Bereichen Echtzeitkommunikation erfordern.
WebSocket vs. AJAX und Axios
WebSocket ist ein anderes Kommunikationsprotokoll im Vergleich zu anderen HTTP-basierten Methoden wie AJAX und Axios und hat andere Anwendungsfälle. Hier ist ein Vergleich von WebSocket mit AJAX und Axios:
Nähe und Echtzeitkommunikation:
-
WebSocket: Ideal für Echtzeitkommunikation. Es ermöglicht kontinuierliche, bidirektionale Kommunikation zwischen Server und Client. Dies kann in Szenarien wie Live-Chat-Anwendungen und Echtzeit-Spielen verwendet werden.
-
AJAX und Axios: HTTP-basierte Technologien wie AJAX und Axios bieten unidirektionale Kommunikation mit dem Server. Der Client sendet eine Anfrage an den Server und erhält eine Antwort. Dies ist nützlich für den Datenaustausch ohne Seitenneuladung, aber weniger geeignet für Echtzeitkommunikation als WebSocket.
Datenverkehr:
-
WebSocket: Nach dem Verbindungsaufbau sendet und empfängt es Daten ohne unnötige Header-Daten. Dies führt zu geringerem Datenverkehr und geringerer Latenz.
-
AJAX und Axios: HTTP-basierte Kommunikation fügt für jede Anfrage Header-Daten hinzu, was zu erhöhtem Datenverkehr und höherer Latenz führen kann.
Verbindungsmanagement:
-
WebSocket: Bietet kontinuierliche Kommunikation über eine einzelne Verbindung. Einmal hergestellt, muss die Verbindung für den Datenaustausch zwischen Client und Server nicht erneuert werden.
-
AJAX und Axios: Jede Anfrage erfordert eine separate HTTP-Anfrage, was das Verbindungsmanagement komplexer macht. Dies kann zu unnötigem Verbindungs-Overhead führen.
Unterstützte Plattformen:
-
WebSocket: Wird von modernen Webbrowsern und Serverplattformen unterstützt. Einige ältere Browser und Plattformen unterstützen WebSocket jedoch nicht.
-
AJAX und Axios: Werden von fast allen Webbrowsern und Serverplattformen unterstützt, was eine breitere Kompatibilität bietet.
Zusammenfassend ist WebSocket ideal für Anwendungen, die Echtzeitkommunikation erfordern, hat aber im Vergleich zu HTTP-basierten Technologien einen spezifischeren Anwendungsbereich. HTTP-basierte Technologien wie AJAX und Axios werden häufiger für allgemeine Datenaustauschzwecke verwendet.
Beispielhafte Verwendung
Dieses Beispiel zeigt, wie man von einem JavaScript-Client aus eine Verbindung zu einem WebSocket-Server herstellt und Nachrichten sendet und empfängt. In diesem Beispiel erstellen wir einen einfachen WebSocket-Server mit Node.js und verbinden uns dann über JavaScript in einer HTML-Datei mit diesem Server.
WebSocket-Server (Node.js):
const WebSocket = require('ws');
// WebSocket sunucusunu oluştur
const wss = new WebSocket.Server({ port: 8080 });
// Yeni bir bağlantı geldiğinde
wss.on('connection', function connection(ws) {
console.log('Yeni bir bağlantı oluşturuldu.');
// İstemciden gelen mesajları dinle
ws.on('message', function incoming(message) {
console.log('İstemciden mesaj alındı:', message);
// Gelen mesajı geri gönder
ws.send('Sunucudan alındı: ' + message);
});
});
WebSocket-Client (HTML und JavaScript):
const socket = new WebSocket('ws://localhost:8080');
// Sunucudan gelen mesajları dinle
socket.onmessage = function(event) {
const outputDiv = document.getElementById('output');
outputDiv.innerHTML += ' ' + event.data + ' ';
};
// Mesaj gönderme işlevi
function sendMessage() {
const inputField = document.getElementById('messageInput');
const message = inputField.value;
socket.send(message);
inputField.value = ''; // input alanını temizle
}
Das obige Beispiel erstellt einen WebSocket-Server und verbindet sich mit ihm über JavaScript in einer HTML-Datei auf der Client-Seite. Wenn der Benutzer seine Nachrichten in ein Texteingabefeld eingibt und auf die Schaltfläche "Nachricht senden" klickt, sendet der Client diese Nachricht an den Server und zeigt die Antwort des Servers auf dem Bildschirm an.
Mini-Socket-Server, der Paribu BTC-Daten sendet
"use strict";
process.title = 'btc paribu';
var webSocketsServerPort = 1337;
var webSocketServer = require('websocket').server;
var http = require('http');
var axios = require('axios');
var uuid = require('uuid');
axios.defaults.timeout = 180000;
var clients = [];
/**
* HTTP server
*/
var server = null;
function createServer() {
server = http.createServer(function (request, response) { });
server.listen(webSocketsServerPort, function () {
console.log((new Date()) + " Server is listening on port " + webSocketsServerPort);
});
var wsServer;
wsServer = new webSocketServer({
httpServer: server
});
wsServer.on('request', function (request) {
var connection = request.accept(null, request.origin);
var _cnnuuid = add_connection(connection);
connection.on('message', function (message) {
if (message.type === 'utf8') { // accept only text
}
});
connection.on('close', function (connection) {
clean_disconnect_cnn();
});
});
} // createserver
function add_connection(_cnn) {
let _cnnuuid = null;
try {
_cnnuuid = uuid.v4();
clients.push({ uuid: _cnnuuid, cnn: _cnn });
if (clients.length > 60){
serverreset();
}
} catch (error) {
console.error(error);
}
return _cnnuuid;
}
function getData() {
if (clients.length > 0 || clients.length == 0) {
axios.get('https://paribu.com/ticker')
.then(function (response) {
console.log((new Date()) + " Sended Data (Client : " + clients.length + ")");
sendData(response);
})
.catch(function (error) {
console.log("error https://paribu.com/ticker ");
setTimeout(() => {
getData();
}, 3000);
const fs = require('fs');
let tar = new Date().toISOString();
fs.appendFile("log/log.txt", tar + "\n\r" + JSON.stringify(error) + "\n\r\n\r", function(err) {
if(err) {
return console.log(err);
}
});
});
} else {
setTimeout(() => { getData(); }, 2000);
}
}
function clean_disconnect_cnn() {
if (clients.length == 0) return;
let disconnected = clients.filter(function (e) {
return !e.cnn.connected;
});
if (disconnected.length > 0) {
clients = clients.filter(function (e) { return e.cnn.connected; });
}
}
function sendData(_senddata) {
try {
if (_senddata != null && _senddata.data != undefined && _senddata.data != null) {
let jsondata = JSON.stringify(_senddata.data);
if (clients.length > 0) {
for (let i = 0; i < clients.length; i++) {
try {
if (clients[i].cnn.connected) {
clients[i].cnn.send(jsondata);
}
} catch (error) {
console.error(error);
}
}
}
} else {
console.log("not data received");
}
} catch (error) {
console.log(error);
}
setTimeout(() => { getData(); }, 5000);
}
createServer();
getData();
setInterval(() => {
serverreset();
}, 1000 * 60 * 2); // 2dk da bir restart
function serverreset(){
try {
clients.forEach(element => {
element.cnn.close();
});
} catch (error) {}
server.close();
clients = [];
console.log("server closed");
server = null;
createServer();
}
- Web Yazılım
- Yazılım
Tepkini Göster
- 5
- 2
- 0
- 0
- 0
- 0
- 0
- 1
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
Yorumlar
Sende Yorumunu Ekle