ホームページ > 記事 > バックエンド開発 > golang Websocket 開発ガイド: リアルタイムデータ可視化機能の実装

golang Websocket 開発ガイド: リアルタイムデータ可視化機能の実装

PHPzオリジナル: 2023-12-02 11:49:32609ブラウズ

golang Websocket开发指南：实现实时数据可视化功能

Golang Websocket は、リアルタイムのデータ視覚化機能を可能にする強力なツールで、サーバーとブラウザーの間で双方向にデータを送信できるため、ユーザーに豊かなインタラクティブなエクスペリエンスを提供できます。。この記事では、Golang Websocket を使用してリアルタイムデータ視覚化機能を開発する方法を検討します。

要件を決定する

Golang Websocket を使用してリアルタイムデータ視覚化機能を開発する前に、要件を決定する必要があります。一般的なリアルタイムデータ視覚化機能には、インタラクティブチャート、リアルタイムログ、リアルタイムモニタリングなどが含まれます。この記事では、リアルタイム監視を例に挙げて説明します。

私たちの要件は、サーバーからリアルタイムでデータを取得し、それをフロントエンドページに表示することです。サーバーデータは、データベースから読み取られたリアルタイムデータや他のサードパーティデータソースから取得したデータなど、さまざまな形式である場合があります。これらのさまざまなデータ形式に対して、対応する処理メソッドを採用して、WebSocket が処理できる形式に変換する必要があります。

Golang Websocket サーバーの作成

まず、Golang Websocket サーバーを作成し、データ送信を実装する必要があります。以下は、単純な WebSocket サーバーのコード例です。

package main

import (
    "fmt"
    "log"
    "net/http"

    "github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
    ReadBufferSize: 1024,
    WriteBufferSize: 1024,
}

func wsHandler(w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return
    }
    defer conn.Close()

    for {
        // 接收消息
        messageType, p, err := conn.ReadMessage()
        if err != nil {
            log.Println(err)
            return
        }
        // 处理消息
        err = conn.WriteMessage(messageType, p)
        if err != nil {
            log.Println(err)
            return
        }
    }
}

func main() {
    http.HandleFunc("/ws", wsHandler)
    if err := http.ListenAndServe(":8080", nil); err != nil {
        log.Fatal("ListenAndServe: ", err)
    }
}

このコードは、単純な WebSocket サーバーの実装です。その中で、WebSocket ハンドラーとして Gorilla WebSocket ライブラリを使用しました。このライブラリを通じて、データ送信のための WebSocket 接続を迅速に確立できます。

上記のコードでは、WebSocket の読み取りおよび書き込みキャッシュサイズを指定するアップグレードオブジェクトを定義します。次に、WebSocket メッセージを受信して処理するための wsHandler 関数を定義します。 main 関数では、Web サーバーに WebSocket ハンドラーを登録し、サーバーポートを指定します。

クライアントとサーバー間の対話

次に、クライアントとサーバー間の対話を実装する必要があります。ブラウザで JavaScript コードを使用して、WebSocket サーバーに接続できます。サーバーに接続したら、WebSocket の API を使用してサーバーとメッセージを送受信できます。

以下は、WebSocket サーバーに接続してデータを送受信するための簡単な JavaScript コードの例です:

var ws = new WebSocket("ws://localhost:8080/ws");
ws.onopen = function(event) {
    console.log("WebSocket opened");
};
ws.onmessage = function(event) {
    console.log("WebSocket message received", event.data);
};
ws.onclose = function(event) {
    console.log("WebSocket closed");
};

// 发送消息到服务器
ws.send("Hello, WebSocket!");

この例では、WebSocket オブジェクトを作成し、WebSocket サーバーのアドレスを指定します。。 WebSocket が開いたら、onopen 関数ハンドラーを使用してサーバーにメッセージを送信できます。サーバーがクライアントにメッセージを送信すると、onmessage 関数プロセッサを通じてこれらのメッセージを受信して処理できます。

Golang Websocket を使用してリアルタイムモニタリングを実装する

最後に、Golang Websocket を使用してリアルタイムモニタリングを実装する方法を見てみましょう。リアルタイム監視機能では、通常、Web ページ上にデータをグラフ形式で表示する必要があります。 Chart.js や D3.js などの JavaScript ライブラリを使用して、これらのグラフを描画できます。

次に、簡単なリアルタイム監視の例を示します。 Go 言語を使用して、特定のデータソースからデータを取得できます。データを取得したら、それを WebSocket クライアントにリアルタイムでストリーミングし、JavaScript を使用してチャートをリアルタイムで更新できます。

golang コード例:

package main

import (
    "encoding/json"
    "log"
    "time"

    "github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
    ReadBufferSize: 1024,
    WriteBufferSize: 1024,
}

type message struct {
    Time   time.Time `json:"time"`
    Data   float64   `json:"data"`
}

func main() {
    http.HandleFunc("/ws", wsHandler)
    if err := http.ListenAndServe(":8080", nil); err != nil {
        log.Fatal("ListenAndServe: ", err)
    }
}

func wsHandler(w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return
    }
    defer conn.Close()

    for {
        // 接收消息
        messageType, p, err := conn.ReadMessage()
        if err != nil {
            log.Println(err)
            return
        }
        // 处理消息
        err = conn.WriteMessage(messageType, p)
        if err != nil {
            log.Println(err)
            return
        }
    }
}

func sendData() {
    //模拟数据源
    var data float64 = 0

    //循环发送数据
    for {
        value := message{
            Time:   time.Now(),
            Data:   data,
        }

        //将数据转换为json
        valueEncoded, err := json.Marshal(value)
        if err != nil {
            log.Println(err)
            continue
        }

        //将数据发送给WebSocket客户端
        for _, conn := range conns {
            err := conn.WriteMessage(websocket.TextMessage, valueEncoded)
            if err != nil {
                log.Println(err)
                continue
            }
        }

        //等待1秒钟，模拟数据源实时推送
        time.Sleep(1 * time.Second)

        //模拟数据源增加
        data += 0.1
    }
}

この例では、メッセージ構造を定義し、sendData 関数を実装します。データソースをシミュレートするには、データを周期的に送信するループを使用します。各ループでメッセージオブジェクトを生成し、それを JSON 形式に変換します。次に、JSON 形式のデータを WebSocket クライアントに送信します。

JavaScript の例:

var ws = new WebSocket("ws://localhost:8080/ws");
ws.onopen = function(event) {
    console.log("WebSocket opened");
};
ws.onmessage = function(event) {
    var message = JSON.parse(event.data);
    console.log("WebSocket message received", message);
};
ws.onclose = function(event) {
    console.log("WebSocket closed");
};

//使用Chart.js绘制图表
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: "My Dataset",
            data: [],
            fill: false,
            borderColor: "#ff0000",
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'second'
                }
            }]
        }
    }
});

//接收WebSocket数据，并在图表中实时更新
ws.onmessage = function(event) {
    var message = JSON.parse(event.data);
    chart.data.labels.push(message.time);
    chart.data.datasets[0].data.push(message.data);
    chart.update();
};

この例では、最初に WebSocket オブジェクトを作成し、フォームが開かれたときにフォームを初期化します。 WebSocket クライアントがデータを受信すると、データを JSON 形式に解析し、Chart.js を使用してチャート内のデータをリアルタイムで更新します。

これは、Golang Websocket によって開発されたリアルタイムデータ視覚化機能の基本的な実装にすぎません。実際のアプリケーションシナリオには、データのフィルタリング、集計、視覚化などの複数の側面も含まれます。ただし、この記事では、これらの機能の実装を開始するのに役立ついくつかの基本的なテンプレートとコードを提供します。

以上がgolang Websocket 開発ガイド: リアルタイムデータ可視化機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript golang json 结构体循环 Go语言 JS 对象数据库 websocket

声明：

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

前の記事：golang Websocket チュートリアル: オンライン質疑応答機能の開発方法次の記事：golang Websocket チュートリアル: オンライン質疑応答機能の開発方法

続きを見る