Qu'est-ce que WebSocket ? Comment l'utiliser ? Quels sont ses avantages ? Quelles sont les différences avec AJAX et Axios ?
WebSocket est un protocole de communication pris en charge par de nombreux navigateurs web modernes et plates-formes serveur. Ce protocole permet une communication bidirectionnelle entre un navigateur web et un serveur. Alors que le protocole HTTP traditionnel utilise un modèle "requête-réponse" pour les demandes du client vers le serveur, avec WebSocket, le serveur peut également envoyer des données au client. Ceci est essentiel pour prendre en charge les applications en temps réel et les sites web interactifs.
WebSocket fournit une communication bidirectionnelle entre un client et un serveur. Par conséquent, la technologie WebSocket fonctionne entre le client et le serveur. Cependant, un support WebSocket est requis côté serveur. Une fois qu'une connexion est établie entre le client et le serveur, les deux parties peuvent envoyer et recevoir des données. Par conséquent, pour permettre la communication en temps réel via WebSocket, un code d'application approprié doit exister à la fois côté client et côté serveur. Par exemple, un navigateur web peut utiliser WebSocket côté client, tandis qu'un serveur web peut accepter et gérer les connexions WebSocket côté serveur. De cette manière, il facilite la communication en temps réel en utilisant WebSocket.
Les principales caractéristiques de WebSocket sont les suivantes :
Communication Full Duplex : Le client et le serveur peuvent s'envoyer des données mutuellement une fois la connexion établie.
Faible Latence : WebSocket échange des données directement sans en-têtes superflus comme HTTP, ce qui réduit la latence.
Connexion Unique : Une seule connexion peut être utilisée pour de multiples échanges de données, réduisant ainsi les coûts liés à l'établissement de connexions inutiles.
Extensibilité du Protocole : WebSocket peut être personnalisé et étendu grâce à des extensions de protocole.
WebSocket est utilisé dans divers scénarios nécessitant une communication en temps réel dans des applications web. Il est idéal pour les applications de chat en direct, les jeux en ligne, les applications financières et l'analyse en temps réel.
Quelques cas d'utilisation de WebSocket :
-
Applications de Chat en Direct : WebSocket est idéal pour les applications de chat en direct où les utilisateurs peuvent communiquer en temps réel. L'envoi et la réception rapides des messages améliorent l'expérience utilisateur.
-
Jeux en Temps Réel : Les jeux en ligne multijoueurs nécessitent un échange de données rapide et continu entre les joueurs. WebSocket est idéal pour traiter les interactions utilisateur en temps réel dans ces jeux.
-
Applications Financières : Les cours des actions, des cryptomonnaies et d'autres actifs financiers évoluent rapidement. Les applications financières peuvent utiliser WebSocket pour surveiller les données de marché en temps réel et envoyer des notifications instantanées aux utilisateurs.
-
Analyse en Temps Réel : WebSocket peut être utilisé pour le traitement de données massives et l'analyse en temps réel. Par exemple, une application d'analyse de flux de données peut traiter instantanément les données entrantes et afficher les résultats aux utilisateurs.
-
Contrôle et Surveillance à Distance : Dans les applications comme les appareils IoT et les systèmes de contrôle industriel, WebSocket peut être utilisé pour communiquer en continu avec les appareils et surveiller leur état.
-
Téléchargement de Fichiers par Glisser-Déposer : WebSocket peut être utilisé pour surveiller en temps réel le téléchargement de fichiers par glisser-déposer et afficher la progression aux utilisateurs.
Ces scénarios ne sont que quelques exemples d'utilisation de WebSocket. Cette technologie est une solution adaptée à de nombreuses applications nécessitant une communication en temps réel dans divers domaines.
WebSocket vs. AJAX et Axios
WebSocket est un protocole de communication différent des méthodes basées sur HTTP comme AJAX et Axios, et il a des cas d'utilisation spécifiques. Voici une comparaison entre WebSocket, AJAX et Axios :
Proximité et Communication en Temps Réel :
-
WebSocket : Idéal pour la communication en temps réel. Il offre une communication bidirectionnelle et continue entre le serveur et le client. Cela peut être utilisé dans des scénarios comme les applications de chat en direct et les jeux en temps réel.
-
AJAX et Axios : Les technologies basées sur HTTP comme AJAX et Axios offrent une communication unidirectionnelle avec le serveur. Le client envoie une requête au serveur et reçoit une réponse. C'est utile pour échanger des données sans recharger la page, mais moins adapté à la communication en temps réel que WebSocket.
Trafic de Données :
-
WebSocket : Après l'établissement de la connexion, il envoie et reçoit des données sans en-têtes superflus. Cela réduit le trafic de données et la latence.
-
AJAX et Axios : La communication basée sur HTTP ajoute des en-têtes pour chaque requête, ce qui peut augmenter le trafic de données et la latence.
Gestion des Connexions :
-
WebSocket : Offre une communication continue sur une seule connexion. Une fois la connexion établie, il n'est pas nécessaire de se reconnecter pour échanger des données entre client et serveur.
-
AJAX et Axios : Chaque requête nécessite une requête HTTP distincte, rendant la gestion des connexions plus complexe. Cela peut entraîner une surcharge inutile.
Plateformes Prises en Charge :
-
WebSocket : Pris en charge par les navigateurs web modernes et les plateformes serveur. Cependant, certains anciens navigateurs et plateformes ne supportent pas WebSocket.
-
AJAX et Axios : Pris en charge par presque tous les navigateurs web et plateformes serveur, offrant une compatibilité plus large.
En conclusion, WebSocket est idéal pour les applications nécessitant une communication en temps réel, mais son usage est plus spécifique que les technologies basées sur HTTP. Les technologies HTTP comme AJAX et Axios sont plus largement utilisées pour les échanges de données généraux.
Exemple d'Utilisation
Cet exemple montre comment connecter un client JavaScript à un serveur WebSocket et envoyer et recevoir des messages. Dans cet exemple, nous allons créer un serveur WebSocket simple avec Node.js, puis nous connecter à ce serveur en utilisant JavaScript dans un fichier HTML.
Serveur WebSocket (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);
});
});
Client WebSocket (HTML et 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
}
L'exemple ci-dessus crée un serveur WebSocket et s'y connecte en utilisant JavaScript dans un fichier HTML côté client. Lorsque l'utilisateur entre ses messages dans une zone de saisie de texte et clique sur le bouton "Envoyer le message", le client envoie ce message au serveur et affiche la réponse du serveur à l'écran.
Mini Serveur Socket diffusant les données Paribu BTC
"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