ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptとWebSocketを使ってリアルタイムのオンライン投資相談を実現する方法

JavaScriptとWebSocketを使ってリアルタイムのオンライン投資相談を実現する方法

王林
王林オリジナル
2023-12-17 20:51:47575ブラウズ

JavaScriptとWebSocketを使ってリアルタイムのオンライン投資相談を実現する方法

JavaScript と WebSocket を使用してリアルタイムのオンライン投資コンサルティングを実現する方法

現代の金融分野では、リアルタイムのオンライン投資コンサルティングは投資家やビジネスにとって非常に重要です。の機関。以前は、投資家がアナリストに相談する必要がある場合、返答を待つために多くの時間を費やすことがよくありました。 JavaScript と WebSocket のリアルタイム機能を組み合わせることで、リアルタイムのオンライン投資相談を実現できるようになり、時間を節約するだけでなく効率も向上します。 JavaScript と WebSocket を使用してこれを実現する方法を次に示します。

ステップ 1: WebSocket 接続を確立する

リアルタイムのオンライン投資コンサルティング情報の交換を実現するには、まず WebSocket 接続を確立する必要があります。 WebSocket は、単一の TCP 接続を介した双方向通信のためのネットワーク プロトコルです。 JavaScript で WebSocket 接続を確立するのは非常に簡単で、次のコード スニペットで実現できます:

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);
};

ここでは、ローカルホスト ポート 8080 で WebSocket サーバーへの接続を確立します。 WebSocket 接続が確立されると、onopen イベントを受信し、onmessage イベント ハンドラーを通じて受信したメッセージを出力します。

ステップ 2: チャット ルームを作成する

実際のアプリケーションでは、投資家とコンサルタントの間の対話型情報を表示する方法が必要です。これはチャット ルームを通じて実現されます。このチャット ルームでは、投資家とコンサルタントがメッセージを送受信できます。チャット ルームを作成するには、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>

HTML ファイルにチャット ウィンドウ マスターを追加しました。これには、投資家が参加できるチャット エリアとフォームが含まれています。とコンサルタントがメッセージを送信します。フォームの送信を完了し、チャット メッセージを処理するには、JavaScript コードでロジックを記述する必要があります。

ステップ 3: メッセージの送受信

WebSocket 接続でのメッセージの送受信は、次のコードを通じて実現できます:

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>';
};

ここでは sendMessage 関数を定義します。この関数は、ユーザーが入力ボックスから入力したメッセージを読み取り、そのメッセージを WebSocket サーバーに送信し、入力ボックスをクリアします。また、ユーザーがフォームにメッセージを送信したときに sendMessage 関数を呼び出すイベント リスナーも追加しました。

WebSocket.onmessage イベント ハンドラーは、受信したイベント (この場合はメッセージ) からデータを取得し、チャット領域に追加します。 innerHTML 属性を使用すると、チャット ウィンドウに新しいメッセージを簡単に添付できます。

サンプル コード

以下は、WebSocket を使用してリアルタイムのオンライン投資コンサルティングを実装する方法を示す完全な JavaScript コードの例です。

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>';
};

このコードをブラウザで開き、WebSocket サーバーをローカル ホストのポート 8080 にデプロイします。チャットウィンドウにメッセージを入力して「送信」ボタンを押すと、メッセージが自動的にチャットエリアに表示されます。

結論

リアルタイムのオンライン投資相談に JavaScript と WebSocket を使用すると、金融分野における投資家と事業機関間のコミュニケーション効率が大幅に向上します。 WebSocket 接続と簡単な JavaScript コードを使用して、リアルタイムのオンライン投資相談を簡単に実装できます。ビジネスを始める場合でも、プロジェクトを微調整する場合でも、上記の方法を適用して生産性を向上できます。

以上がJavaScriptとWebSocketを使ってリアルタイムのオンライン投資相談を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。