JavaScript と WebSocket を使用してリアルタイムの株価を表示する方法

JavaScript と WebSocket を使用してリアルタイム株価表示を実現する方法

概要
リアルタイム株価表示は、多くの企業で遭遇するニーズの 1 つです。金融分野。 Web テクノロジーを使用すると、JavaScript と WebSocket を使用してリアルタイムの株価を表示できます。この記事では、JavaScript と WebSocket の使い方を具体的なコード例を交えて説明します。

WebSocket の概要
WebSocket は、単一の TCP リンクを介した全二重通信のためのプロトコルです。これは、Web アプリケーションとサーバーの間に永続的な接続を確立するための、リアルタイムの低遅延の双方向通信方法を提供します。 WebSocket は HTML5 で新たに導入されたテクノロジであり、最新のブラウザ (Chrome、Firefox、Safari など) はすでに WebSocket をサポートしています。

株価表示要件
リアルタイムの株価を表示するプロセスでは、サーバーからリアルタイムの株価データを取得し、Web ページに表示する必要があります。市場が更新されるたびに、新しい市場データをタイムリーにページに表示する必要があります。

実装手順

1. WebSocket 接続の作成
   まず、JavaScript で WebSocket オブジェクトを作成し、サーバーの WebSocket ポートに接続する必要があります。

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

2. WebSocket イベントのリッスン
   イベント リスナーを追加することで WebSocket のさまざまなイベントをリッスンできるため、新しいメッセージが到着し、接続がオープンまたはクローズされると、対応するイベントが動作します。 。

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

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

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

3. 受信した株価データの処理
   WebSocket がサーバーから送信されたメッセージを受信すると、データを解析して処理する必要があります。

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

4. ページの更新
   受信した株式市場データに基づいて、JavaScript を使用してページ上の対応するコンテンツを動的に更新できます。たとえば、銘柄名、コード、最新価格、その他の情報をページに表示できます。

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. 市場データをリアルタイムで更新
   市場データのリアルタイム性を維持するには、最新の株式市場を取得するリクエストをサーバーに定期的に送信する必要があります。データを取得してページに表示します。

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

このようにして、最新の株式市場データを取得するリクエストが毎秒サーバーに送信されます。

まとめ
JavaScriptとWebSocketを利用することで、リアルタイムの株価表示を簡単に実現できます。 WebSocketの全二重通信機能を利用して、サーバー側の市場データをリアルタイムに受信し、JavaScriptを通じてWebページ上に動的に表示することができます。以上、WebSocketのリアルタイム株価表示の基本的な手順とコード例を示しましたので、リアルタイム株価表示機能を開発する際の参考になれば幸いです。

以上がJavaScript と WebSocket を使用してリアルタイムの株価を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。