Configurer une connexion WebSocket
Si vous n'êtes pas familier avec les WebSockets, veuillez consulter notre documentation.
Configurer une connexion WebSocket
Ensuite, nous allons créer une connexion WebSocket au serveur WebSocket de Deriv comme indiqué ci-dessous :
const app_id = 1089; // Remplacez par votre app_id ou laissez 1089 pour les tests.
const websocket = new WebSocket(`wss://ws.derivws.com/websockets/v3?app_id=${app_id}`);
app_id = 1089 est juste à des fins de test. Veuillez mettre cela à jour avec votre propre app_id lorsque vous publiez votre application dans un environnement de production. Veuillez consulter ce guide pour créer une nouvelle application pour vous-même.
À ce stade, nous sommes connectés au WebSocket server. Mais nous ne recevons aucune donnée. Pour envoyer ou recevoir des données, nous devons nous abonner aux websocket events.
En général, nous avons 4 événements sur les WebSocket connections :
- close : Déclenché lorsqu'une connexion avec une WebSocket est fermée. Également disponible au moyen de la propriété onclose.
- open : Déclenché lorsqu'une connexion avec une WebSocket est ouverte. Également disponible au moyen de la propriété onopen.
- message : Déclenché lorsque des données sont reçues par l'intermédiaire d'une WebSocket. Également disponible au moyen de la propriété onmessage.
- error : Déclenché lorsqu'une connexion avec une WebSocket a été fermée en raison d'une erreur, par exemple lorsque des données n'ont pas pu être envoyées. Également disponible au moyen de la propriété onerror.
Ajoutons un écouteur d'événements pour ces événements sur notre connexion WebSocket.
// s'abonner à l'événement `open`
websocket.addEventListener('open', (event) => {
console.log('connexion websocket établie: ', event);
});
// s'abonner à l'événement `message`
websocket.addEventListener('message', (event) => {
console.log('nouveau message reçu du serveur: ', event);
});
// s'abonner à l'événement `close`
websocket.addEventListener('close', (event) => {
console.log('connexion websocket fermée: ', event);
});
// s'abonner à l'événement `error`
websocket.addEventListener('error', (event) => {
console.log('une erreur est survenue dans notre connexion websocket', event);
});
Maintenant, ouvrez le fichier index.html dans notre navigateur et vérifiez votre console de développement. Vous ne devriez voir que le journal pour connexion websocket établie.
Envoyer et recevoir des données
Notre serveur WebSocket offre la fonctionnalité ping/pong. Utilisons cela dans notre projet démo pour envoyer et recevoir des données. Utilisons cela dans notre projet démo pour envoyer et recevoir des données. Modifiez les récepteurs d'événements pour open et message comme suit :
La fonction send de la connexion WebSocket ne reçoit que des string, ArrayBuffer, Blob, TypedArray et DataView. Pour en savoir plus, consultez le site MDN. Cela signifie que si nous voulons envoyer un objet, nous devons d'abord le filtrer avec JSON.stringify.
// s'abonner à l'événement `open`
websocket.addEventListener('open', (event) => {
console.log('connexion websocket établie: ', event);
const sendMessage = JSON.stringify({ ping: 1 });
websocket.send(sendMessage);
});
// s'abonner à l'événement `message`
websocket.addEventListener('message', (event) => {
const receivedMessage = JSON.parse(event.data);
console.log('nouveau message reçu du serveur: ', receivedMessage);
});
Le receivedMessage serait un objet comme celui-ci :
{
echo_req: {
ping: 1
},
msg_type: "ping",
ping: "pong"
}
Félicitations 🎉
Vous avez créé votre premier projet démo avec WebSockets.
La requête ping est principalement utilisée pour tester la connexion ou pour la maintenir en vie.
Garder la connexion WebSocket active
Par défaut, les connexions WebSocket seront fermées si aucun trafic n'est envoyé entre elles pendant environ 180 secondes. Une façon de maintenir la connexion en vie est d'envoyer des requêtes ping à des intervalles de 120 secondes. Cela permettra de garder la connexion active.
Voici un exemple de configuration simple :
const ping_interval = 12000; // c'est en millisecondes, ce qui équivaut à 120 secondes
let interval;
websocket.addEventListener('open', (event) => {
console.log('connexion websocket établie: ', event);
const sendMessage = JSON.stringify({ ping: 1 });
websocket.send(sendMessage);
// pour garder la connexion active
interval = setInterval(() => {
const sendMessage = JSON.stringify({ ping: 1 });
websocket.send(sendMessage);
}, ping_interval);
});
// subscribe to `close` event
websocket.addEventListener('close', (event) => {
console.log('connexion websocket fermée: ', event);
clearInterval(interval);
});
Maintenant, quand la connexion est établie, nous commençons à envoyer des requêtes ping avec des intervalles de 12000ms.
Votre code final devrait ressembler à ceci :
const app_id = 1089; // Remplacez par votre app_id ou laissez 1089 pour les tests.
const websocket = new WebSocket(`wss://ws.derivws.com/websockets/v3?app_id=${app_id}`);
const ping_interval = 12000; // c'est en millisecondes, ce qui équivaut à 120 secondes
let interval;
// s'abonner à l'événement `open`
websocket.addEventListener('open', (event) => {
console.log('connexion websocket établie: ', event);
const sendMessage = JSON.stringify({ ping: 1 });
websocket.send(sendMessage);
// pour garder la connexion active
interval = setInterval(() => {
const sendMessage = JSON.stringify({ ping: 1 });
websocket.send(sendMessage);
}, ping_interval);
});
// s'abonner à l'événement `message`
websocket.addEventListener('message', (event) => {
const receivedMessage = JSON.parse(event.data);
console.log('nouveau message reçu du serveur: ', receivedMessage);
});
// s'abonner à l'événement `close`
websocket.addEventListener('close', (event) => {
console.log('connexion websocket fermée: ', event);
clearInterval(interval);
});
// s'abonner à l'événement `error`
websocket.addEventListener('error', (event) => {
console.log('une erreur est survenue dans notre connexion websocket', event);
});