Panduan Pembangunan Soket Web golang: Melaksanakan fungsi visualisasi data masa nyata-Golang-php.cn

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

Golang Websocket ialah alat berkuasa yang membolehkan keupayaan visualisasi data masa nyata, membolehkan data dihantar dalam kedua-dua arah antara pelayan dan penyemak imbas, dengan itu memberikan pengguna pengalaman interaktif yang kaya. Dalam artikel ini, kami akan meneroka cara membangunkan keupayaan visualisasi data masa nyata menggunakan Golang Websocket.

Tentukan keperluan

Sebelum kami mula membangunkan fungsi visualisasi data masa nyata menggunakan Golang Websocket, kami perlu menentukan keperluan. Fungsi visualisasi data masa nyata biasa termasuk: carta interaktif, log masa nyata, pemantauan masa nyata, dsb. Dalam artikel ini, kami akan mengambil pemantauan masa nyata sebagai contoh untuk dijelaskan.

Keperluan kami adalah untuk mendapatkan data daripada pelayan dalam masa nyata dan memaparkannya di halaman hadapan. Data pelayan mungkin dalam pelbagai bentuk, contohnya, data masa nyata yang dibaca daripada pangkalan data, atau data yang diperoleh daripada sumber data pihak ketiga yang lain. Untuk borang data yang berbeza ini, kita perlu menggunakan kaedah pemprosesan yang sepadan untuk menukarnya kepada bentuk yang boleh dikendalikan oleh WebSocket.

Buat pelayan Websocket Golang

Pertama, kita perlu mencipta pelayan Websocket Golang dan melaksanakan penghantaran data. Berikut ialah contoh kod pelayan WebSocket mudah:

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)
    }
}

Salin selepas log masuk

Kod ini ialah pelaksanaan pelayan WebSocket yang ringkas. Antaranya, kami menggunakan perpustakaan WebSocket Gorilla sebagai pengendali WebSocket. Melalui perpustakaan ini, kami boleh mewujudkan sambungan WebSocket dengan pantas untuk penghantaran data.

Dalam kod di atas, kami mentakrifkan objek penaik taraf, yang menentukan saiz cache baca dan tulis WebSocket. Kemudian, kami mentakrifkan fungsi wsHandler untuk menerima dan memproses mesej WebSocket. Dalam fungsi utama, kami mendaftarkan pengendali websocket dengan pelayan web dan menentukan port pelayan.

Interaksi antara klien dan pelayan

Seterusnya, kita perlu melaksanakan interaksi antara klien dan pelayan. Kita boleh menggunakan kod JavaScript dalam penyemak imbas untuk menyambung ke pelayan WebSocket. Selepas menyambung ke pelayan, kami boleh menggunakan API WebSocket untuk menghantar dan menerima mesej ke pelayan.

Berikut ialah contoh kod JavaScript mudah untuk menyambung ke pelayan WebSocket untuk menghantar dan menerima data:

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!");

Salin selepas log masuk

Dalam contoh ini, kami mencipta objek WebSocket dan menentukan alamat pelayan WebSocket. Selepas WebSocket dibuka, kita boleh menggunakan pengendali fungsi onopen untuk menghantar mesej kepada pelayan. Apabila pelayan menghantar mesej kepada pelanggan, kami boleh menerima dan memproses mesej ini melalui pemproses fungsi onmessage.

Gunakan Golang Websocket untuk melaksanakan pemantauan masa nyata

Akhir sekali, mari kita lihat cara menggunakan Golang Websocket untuk melaksanakan pemantauan masa nyata. Fungsi pemantauan masa nyata biasanya memerlukan paparan data dalam bentuk carta pada halaman Web. Kami boleh menggunakan perpustakaan JavaScript untuk melukis carta ini, contohnya, Chart.js atau D3.js.

Berikut ialah contoh pemantauan masa nyata yang mudah. Kita boleh menggunakan bahasa go untuk mendapatkan data daripada sumber data tertentu. Setelah kami mempunyai data, kami boleh menstrimnya ke klien WebSocket dalam masa nyata dan menggunakan JavaScript untuk mengemas kini carta dalam masa nyata.

contoh kod 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
    }
}

Salin selepas log masuk

Dalam contoh ini, kami mentakrifkan struktur mesej dan melaksanakan fungsi sendData. Untuk mensimulasikan sumber data, kami menggunakan gelung yang menghantar data secara kitaran. Dalam setiap gelung, kami menjana objek mesej dan menukarnya kepada format JSON. Kemudian, hantar data berformat JSON kepada klien WebSocket.

JavaScript Contoh:

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();
};

Salin selepas log masuk

Dalam contoh ini, kami mula-mula mencipta objek WebSocket dan memulakan borang apabila ia dibuka. Setelah data diterima oleh klien WebSocket, kami menghuraikan data ke dalam format JSON dan menggunakan Chart.js untuk mengemas kini data dalam masa nyata dalam carta.

Ini hanyalah pelaksanaan asas fungsi visualisasi data masa nyata yang dibangunkan oleh Golang Websocket Senario aplikasi sebenar juga akan melibatkan pelbagai aspek seperti penapisan data, pengagregatan dan visualisasi. Tetapi artikel ini menyediakan beberapa templat dan kod asas untuk membantu anda mula melaksanakan ciri ini.

Atas ialah kandungan terperinci Panduan Pembangunan Soket Web golang: Melaksanakan fungsi visualisasi data masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!