Maison > Article > interface Web > Comment utiliser JavaScript et WebSocket pour obtenir une consultation d'investissement en ligne en temps réel
Comment utiliser JavaScript et WebSocket pour obtenir une consultation en investissement en ligne en temps réel
Dans le domaine financier moderne, la consultation en investissement en ligne en temps réel est cruciale pour les investisseurs et les institutions commerciales. Dans le passé, lorsque les investisseurs avaient besoin de consulter un analyste, ils passaient souvent beaucoup de temps à attendre une réponse. Désormais, en combinant les capacités en temps réel de JavaScript et de WebSocket, nous pouvons réaliser des consultations d'investissement en ligne en temps réel, ce qui non seulement fait gagner du temps, mais améliore également l'efficacité. Voici comment y parvenir en utilisant JavaScript et WebSockets.
Première étape : établir une connexion WebSocket
Pour réaliser l'échange d'informations de conseil en investissement en ligne en temps réel, nous devons d'abord établir une connexion WebSocket. WebSocket est un protocole réseau pour la communication bidirectionnelle sur une seule connexion TCP. L'établissement d'une connexion WebSocket en JavaScript est très simple et peut être réalisé avec l'extrait de code suivant :
var webSocket = new WebSocket('ws://localhost:8080'); webSocket.onerror = function(event) { console.error('WebSocket error:' + JSON.stringify(event)); }; webSocket.onopen = function(event) { console.log('WebSocket connected.'); }; webSocket.onmessage = function(event) { console.log('WebSocket message received:' + event.data); };
Ici, nous avons établi une connexion à un serveur WebSocket sur le port localhost 8080. Lorsque la connexion WebSocket est établie, nous recevrons un événement onopen et imprimerons tous les messages que nous recevons via le gestionnaire d'événements onmessage.
Étape 2 : Créer un salon de discussion
Dans les applications pratiques, nous avons besoin d'un moyen d'afficher des informations interactives entre investisseurs et consultants, ce qui est réalisé via des salons de discussion. Dans ce salon de discussion, les investisseurs et les consultants peuvent envoyer et recevoir des messages. Afin de créer une salle de discussion, nous devons ajouter le code suivant au fichier HTML :
<div class="chat-window"> <div class="chat-area"></div> <form id="chat-form"> <input type="text" id="message-input" placeholder="Type message here..."> <button type="submit" class="send-button">Send</button> </form> </div>
Nous avons ajouté un maître de fenêtre de discussion au fichier HTML, qui comprend une zone de discussion et un formulaire pour permettre aux investisseurs et aux consultants d'envoyer messages. Nous devons écrire une logique dans du code JavaScript pour terminer la soumission du formulaire et traiter les messages de discussion.
Étape 3 : Envoyer et recevoir des messages
L'envoi et la réception de messages dans notre connexion WebSocket peuvent être réalisés par le code suivant :
function sendMessage() { var messageInput = document.getElementById('message-input'); var message = messageInput.value; webSocket.send(message); messageInput.value = ''; } document.getElementById('chat-form').addEventListener('submit', function(event) { event.preventDefault(); sendMessage(); }); webSocket.onmessage = function(event) { var message = event.data; var chatArea = document.querySelector('.chat-area'); chatArea.innerHTML += '<div class="message">' + message + '</div>'; };
Ici, nous définissons une fonction sendMessage, qui lit les entrées de l'utilisateur dans la zone de saisie Message, envoie le message au serveur WebSocket et décochez la zone de saisie. Nous avons également ajouté un écouteur d'événements pour appeler la fonction sendMessage lorsque l'utilisateur soumet un message dans le formulaire.
Le gestionnaire d'événements WebSocket.onmessage récupère les données de l'événement reçu (dans ce cas, le message) et les ajoute à la zone de discussion. En utilisant l'attribut innerHTML, nous pouvons facilement joindre de nouveaux messages à la fenêtre de discussion.
Exemple de code
Ce qui suit est un exemple de code JavaScript complet qui montre comment utiliser WebSocket pour mettre en œuvre une consultation d'investissement en ligne en temps réel.
var webSocket = new WebSocket('ws://localhost:8080'); webSocket.onerror = function(event) { console.error('WebSocket error:' + JSON.stringify(event)); }; webSocket.onopen = function(event) { console.log('WebSocket connected.'); }; function sendMessage() { var messageInput = document.getElementById('message-input'); var message = messageInput.value; webSocket.send(message); messageInput.value = ''; } document.getElementById('chat-form').addEventListener('submit', function(event) { event.preventDefault(); sendMessage(); }); webSocket.onmessage = function(event) { var message = event.data; var chatArea = document.querySelector('.chat-area'); chatArea.innerHTML += '<div class="message">' + message + '</div>'; };
Ouvrez ce code dans votre navigateur pour déployer le serveur WebSocket sur le port 8080 de votre hébergeur local. Entrez votre message dans la fenêtre de discussion et appuyez sur le bouton "Envoyer", votre message apparaîtra automatiquement dans la zone de discussion.
Conclusion
L'utilisation de JavaScript et de WebSocket pour la consultation en ligne en temps réel sur les investissements améliorera considérablement l'efficacité de la communication entre les investisseurs et les institutions commerciales dans le domaine financier. À l'aide d'une connexion WebSocket et d'un simple code JavaScript, nous pouvons facilement mettre en œuvre une consultation d'investissement en ligne en temps réel. Que vous souhaitiez démarrer une entreprise ou peaufiner un projet, les méthodes ci-dessus peuvent être appliquées pour vous aider à atteindre une plus grande productivité.
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!