Golang で WebSocket を使用してリアルタイムのデータ視覚化を行う方法

WebSocket を使用して golang でリアルタイム データ視覚化を実現する方法

はじめに:
現在、リアルタイム データ視覚化は多くの分野で重要な役割を果たしています。 、WebSocket は、Web ブラウザとサーバー間のリアルタイムの双方向通信のためのプロトコルです。この記事では、golang で WebSocket ライブラリを使用してリアルタイムのデータ視覚化を実現する方法を紹介し、具体的なコード例を示します。

1. golang と WebSocket ライブラリをインストールする
まず、golang と対応する WebSocket ライブラリをローカル環境にインストールする必要があります。 golang 公式 Web サイトにアクセスして golang をダウンロードしてインストールし、次のコマンドを使用して go 言語で WebSocket ライブラリをインストールします:
go get github.com/gorilla/websocket

2. WebSocket サーバー
最初に、クライアント接続とメッセージングを処理する単純な WebSocket サーバーを作成します。以下は簡単なサンプル コードです:

package main

import (
    "log"
    "net/http"

    "github.com/gorilla/websocket"
)

var clients = make(map[*websocket.Conn]bool)
var broadcast = make(chan []byte)
var upgrader = websocket.Upgrader{} // 使用默认的Upgrader

func main() {
    fs := http.FileServer(http.Dir("static"))
    http.Handle("/", fs)

    http.HandleFunc("/ws", handleConnections)

    go handleMessages()

    log.Println("Server started on :8000")
    err := http.ListenAndServe(":8000", nil)
    if err != nil {
        log.Fatal("ListenAndServe: ", err)
    }
}

func handleConnections(w http.ResponseWriter, r *http.Request) {
    // 建立WebSocket连接
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Fatal(err)
    }
    // 关闭连接
    defer conn.Close()

    clients[conn] = true

    for {
        // 读取来自客户端的消息
        _, message, err := conn.ReadMessage()
        if err != nil {
            log.Printf("Error: %v", err)
            delete(clients, conn)
            break
        }
        // 将消息放入广播通道中
        broadcast <- message
    }
}

func handleMessages() {
    for {
        // 从广播通道中读取消息
        message := <-broadcast

        // 将消息发送给所有连接的客户端
        for client := range clients {
            err := client.WriteMessage(websocket.TextMessage, message)
            if err != nil {
                log.Printf("Error: %v", err)
                client.Close()
                delete(clients, client)
            }
        }
    }
}

3. WebSocket クライアントの作成
次に、サーバーとの間でメッセージを送受信するための単純な WebSocket クライアントを作成します。簡単なサンプルコードは以下のとおりです:

// 在HTML文件中通过JavaScript创建WebSocket连接
const socket = new WebSocket('ws://localhost:8000/ws');

// 监听连接成功事件
socket.onopen = function (event) {
    console.log('Connected to WebSocket server');
};

// 监听收到消息事件
socket.onmessage = function (event) {
    const message = event.data;
    console.log('Received message:', message);
    // 在此处可进行实时数据可视化的操作
};

// 向服务器发送消息
function sendMessage(message) {
    socket.send(message);
}

4. リアルタイムデータ可視化
WebSocketによるリアルタイムデータ送信を実現し、クライアントがメッセージを受信した後にリアルタイムデータ可視化操作を実行できます。サーバーから。 D3.js ライブラリを通じて受信したデータからリアルタイム折れ線グラフを作成する簡単な例を次に示します。

// 在HTML文件中通过JavaScript使用D3.js库创建折线图
const margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

const svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const x = d3.scaleLinear()
    .range([0, width]);

const y = d3.scaleLinear()
    .range([height, 0]);

const line = d3.line()
    .x(function (d) { return x(d.x); })
    .y(function (d) { return y(d.y); });

// 数据存储数组
let data = [];

socket.onmessage = function (event) {
    const message = JSON.parse(event.data);
    // 在此处进行数据处理
    data.push({ x: message.x, y: message.y });

    // 更新坐标轴范围
    x.domain(d3.extent(data, function (d) { return d.x; }));
    y.domain([0, d3.max(data, function (d) { return d.y; })]);

    // 渲染折线图
    svg.selectAll("*").remove(); // 首先清空原有内容
    svg.append("path")
        .data([data])
        .attr("class", "line")
        .attr("d", line);
}

結論:
上記のコードを通じて、golang で WebSocket を使用して実際のデータを実現できます。 -時間データの視覚化。クライアントは WebSocket 経由でサーバーに接続し、サーバーはクライアントからメッセージを受信し、接続されているすべてのクライアントに送信します。クライアントがサーバーからメッセージを受信した後、リアルタイムのデータ処理と視覚化操作を実行して、リアルタイムのデータ表示と分析を実現できます。

以上がGolang で WebSocket を使用してリアルタイムのデータ視覚化を行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。