JavaScriptとWebSocketを使ってリアルタイムのオンライン投資相談を実現する方法-jsチュートリアル-php.cn

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

王林

リリース： 2023-12-17 20:51:47

オリジナル

652 人が閲覧しました

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 サイトの他の関連記事を参照してください。