Comment utiliser JavaScript et WebSocket pour afficher les cotations boursières en temps réel

Comment utiliser JavaScript et WebSocket pour mettre en œuvre l'affichage des cotations boursières en temps réel

Présentation
L'affichage des cotations boursières en temps réel est l'un des besoins souvent rencontrés dans le domaine financier. En utilisant la technologie Web, nous pouvons utiliser JavaScript et WebSocket pour afficher les cotations boursières en temps réel. Cet article explique comment utiliser JavaScript et WebSocket avec des exemples de code spécifiques.

Introduction à WebSocket
WebSocket est un protocole de communication full-duplex sur une seule liaison TCP. Il fournit une méthode de communication bidirectionnelle en temps réel, à faible latence et pour établir une connexion persistante entre une application Web et un serveur. WebSocket est une technologie HTML5 récemment lancée et les navigateurs modernes (tels que Chrome, Firefox, Safari, etc.) prennent déjà en charge WebSocket.

Exigences d'affichage des cotations boursières
Dans le processus d'affichage des cotations boursières en temps réel, nous devons obtenir des données boursières en temps réel du serveur et les afficher sur la page Web. Chaque fois que le marché est mis à jour, nous devons afficher les nouvelles données du marché sur la page en temps opportun.

Étapes de mise en œuvre

1. Créer une connexion WebSocket
   Tout d'abord, nous devons créer un objet WebSocket en JavaScript et nous connecter au port WebSocket du serveur.

var socket = new WebSocket("ws://localhost:8080/stock");

2. Écouter les événements WebSocket
   Nous pouvons écouter différents événements de WebSocket en ajoutant des écouteurs d'événements pour effectuer les opérations correspondantes lorsque de nouveaux messages arrivent et que la connexion est ouverte ou fermée.

socket.onopen = function() {
   console.log("WebSocket连接已打开");
}

socket.onmessage = function(event) {
   var data = event.data;
   // 处理消息
}

socket.onclose = function(event) {
   console.log("WebSocket连接已关闭");
}

3. Traitement des données de cotation boursière reçues
   Lorsque WebSocket reçoit le message envoyé par le serveur, nous devons analyser et traiter les données.

socket.onmessage = function(event) {
   var data = JSON.parse(event.data);
   // 处理数据并更新页面
}

4. Page de mise à jour
   Selon les données de cotation boursière reçues, nous pouvons utiliser JavaScript pour mettre à jour dynamiquement le contenu correspondant sur la page. Par exemple, nous pouvons afficher le nom du titre, le code, le dernier prix et d'autres informations sur la page.

var stockName = document.getElementById("stockName");
stockName.innerHTML = data.name;

var stockCode = document.getElementById("stockCode");
stockCode.innerHTML = data.code;

var stockPrice = document.getElementById("stockPrice");
stockPrice.innerHTML = data.price;

5. Actualiser les données du marché en temps réel
   Afin de maintenir la nature en temps réel des données du marché, nous devons envoyer régulièrement des requêtes au serveur pour obtenir les dernières données boursières et les afficher sur la page.

setInterval(function() {
   socket.send("get_stock_data");
}, 1000);

De cette façon, une requête sera envoyée au serveur chaque seconde pour obtenir les dernières données de cotation boursière.

Résumé
En utilisant JavaScript et WebSocket, nous pouvons facilement mettre en œuvre l'affichage des cotations boursières en temps réel. Grâce à la fonctionnalité de communication full-duplex de WebSocket, nous pouvons recevoir des données de marché côté serveur en temps réel et les afficher dynamiquement sur la page Web via JavaScript. Ce qui précède donne les étapes de base et des exemples de code pour l'affichage des cotations boursières en temps réel de WebSocket. J'espère que cela sera utile aux lecteurs lors du développement de la fonction d'affichage des cotations en temps réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!