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

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

Dec 02, 2023 am 11:49 AM
golangwebsocketデータの視覚化

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

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

  1. 要件を決定する

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

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

  1. 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 ハンドラーを登録し、サーバー ポートを指定します。

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

次に、クライアントとサーバー間の対話を実装する必要があります。ブラウザで 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 関数プロセッサを通じてこれらのメッセージを受信して​​処理できます。

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
GOインターフェイスでアサーションとタイプスイッチを入力しますGOインターフェイスでアサーションとタイプスイッチを入力しますMay 02, 2025 am 12:20 AM

gohandlesinterfacesandtypeassertionseffectivivivivivity、強化された柔軟性と耐毒性を強化します

エラーを使用し、エラーを使用して、goでエラー検査を行いますエラーを使用し、エラーを使用して、goでエラー検査を行いますMay 02, 2025 am 12:11 AM

言語エラー処理は、エラーとエラーを介してより柔軟になり、読みやすくなります。 1.エラーは、エラーが指定されたエラーと同じであり、エラーチェーンの処理に適しているかどうかを確認するために使用されます。 2.エラー。エラータイプを確認するだけでなく、エラーを特定のタイプに変換することもできます。これは、エラー情報を抽出するのに便利です。これらの関数を使用すると、エラー処理ロジックを簡素化できますが、エラーチェーンの正しい配信に注意を払い、コードの複雑さを防ぐために過度の依存性を回避できます。

GOのパフォーマンスチューニング:アプリケーションの最適化GOのパフォーマンスチューニング:アプリケーションの最適化May 02, 2025 am 12:06 AM

tomakegogoapplicationsRunfasterAndMore -efficient、useprofilingtools、leverageconconcurrency、andmanagememoryefcectively.1)useprofforcpuandmemoryprofilingtoidentififybottlenecks.2)

GOの未来:トレンドと開発GOの未来:トレンドと開発May 02, 2025 am 12:01 AM

go'sfutureisbrightwithtrendslikeRikeRovedTooling、generics、cloud-nativeadoption、performulenhancements、andwebassemblyintegration、butchallengesincludemaintainingsimplicitandimplovingeror handling。

Goroutinesの理解:Goの同時性に深く潜りますGoroutinesの理解:Goの同時性に深く潜りますMay 01, 2025 am 12:18 AM

GoroutinesAreSareSareSareSormethodSthaturncurlyntingo、Enableing and LightweightConcurrency.1)theyRuntimeSimeSingMultiplexing、SountyStorunonFeweroSthReads.2)ゴルチンズを失ったことを許可します

go:目的と使用法でのinit機能を理解するgo:目的と使用法でのinit機能を理解するMay 01, 2025 am 12:16 AM

initistoistoInitializevariables、setupconutupurations、orforformndexedarysetupbe foreThemainfunctionexecutes.useinitby:1)inginginyourcodeTorunautorunaintalunain、2)KeepingItshortandpocusedonsimpletasks、3)ConsididiriveSusinginsingingingingingingingingingingingingingingingingingingingingingingsingpltassksを使用すると、

GOインターフェイスの理解:包括的なガイドGOインターフェイスの理解:包括的なガイドMay 01, 2025 am 12:13 AM

go interfacesaremethodsignaturesetsetsattypesmustimplement、unableingpolymorphism withintinheritance forcleaner、modularcode.theyareimplictilistifisisfiestified、houseforfflexibleapisanddeaupling、busrecarefulusoavoidoidoimoidimeerrororsypertety。

GOのパニックからの回復:いつ、どのように使用するか()GOのパニックからの回復:いつ、どのように使用するか()May 01, 2025 am 12:04 AM

Goで回復()関数を使用して、パニックから回復します。特定の方法は次のとおりです。1)回復()を使用して、延期関数でパニックをキャプチャして、プログラムのクラッシュを避けます。 2)デバッグの詳細なエラー情報を記録します。 3)特定の状況に基づいてプログラムの実行を再開するかどうかを決定します。 4)パフォーマンスに影響を及ぼさないように注意して使用します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい