Guide de développement de Golang Websocket : implémentation de la fonction de visualisation de données en temps réel

Golang Websocket est un outil puissant qui permet des capacités de visualisation de données en temps réel, permettant aux données d'être transmises dans les deux sens entre le serveur et le navigateur, offrant ainsi aux utilisateurs une expérience interactive riche. Dans cet article, nous explorerons comment développer des capacités de visualisation de données en temps réel à l'aide de Golang Websocket.

1. Déterminer les exigences

Avant de commencer à développer des fonctions de visualisation de données en temps réel à l'aide de Golang Websocket, nous devons déterminer les exigences. Les fonctions courantes de visualisation des données en temps réel incluent : des graphiques interactifs, des journaux en temps réel, une surveillance en temps réel, etc. Dans cet article, nous prendrons la surveillance en temps réel comme exemple pour expliquer.

Notre exigence est d'obtenir les données du serveur en temps réel et de les afficher sur la page front-end. Les données du serveur peuvent se présenter sous diverses formes, par exemple des données en temps réel lues à partir d'une base de données ou des données obtenues à partir d'autres sources de données tierces. Pour ces différents formulaires de données, nous devons adopter les méthodes de traitement correspondantes pour les convertir en un formulaire que WebSocket peut gérer.

2. Créer un serveur Golang Websocket

Tout d'abord, nous devons créer un serveur Golang Websocket et implémenter la transmission de données. Ce qui suit est un exemple de code d'un simple serveur 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)
    }
}

Ce code est une implémentation d'un simple serveur WebSocket. Parmi eux, nous avons utilisé la bibliothèque Gorilla WebSocket comme gestionnaire WebSocket. Grâce à cette bibliothèque, nous pouvons établir rapidement une connexion WebSocket pour la transmission de données.

Dans le code ci-dessus, nous définissons un objet de mise à niveau, qui spécifie la taille du cache de lecture et d'écriture de WebSocket. Ensuite, nous définissons une fonction wsHandler pour recevoir et traiter les messages WebSocket. Dans la fonction principale, nous enregistrons le gestionnaire websocket auprès du serveur Web et spécifions le port du serveur.

3. Interaction entre client et serveur

Ensuite, nous devons implémenter l'interaction entre client et serveur. Nous pouvons utiliser du code JavaScript dans le navigateur pour nous connecter au serveur WebSocket. Après nous être connectés au serveur, nous pouvons utiliser l'API de WebSocket pour envoyer et recevoir des messages au serveur.

Ce qui suit est un exemple de code JavaScript simple pour se connecter à un serveur WebSocket afin d'envoyer et de recevoir des données :

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

Dans cet exemple, nous créons un objet WebSocket et spécifions l'adresse du serveur WebSocket. Une fois le WebSocket ouvert, nous pouvons utiliser le gestionnaire de fonctions onopen pour envoyer un message au serveur. Lorsque le serveur envoie des messages au client, nous pouvons recevoir et traiter ces messages via le processeur de fonction onmessage.

4. Utilisez Golang Websocket pour mettre en œuvre une surveillance en temps réel

Enfin, voyons comment utiliser Golang Websocket pour mettre en œuvre une surveillance en temps réel. La fonction de surveillance en temps réel nécessite généralement l'affichage des données sous forme de graphiques sur une page Web. Nous pouvons utiliser des bibliothèques JavaScript pour dessiner ces graphiques, par exemple Chart.js ou D3.js.

Ce qui suit est un exemple simple de surveillance en temps réel. Nous pouvons utiliser le langage go pour obtenir des données à partir d'une certaine source de données. Une fois que nous avons les données, nous pouvons les diffuser vers un client WebSocket en temps réel et utiliser JavaScript pour mettre à jour le graphique en temps réel.

Exemple de code 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
    }
}

Dans cet exemple, nous définissons une structure de message et implémentons une fonction sendData. Pour simuler la source de données, nous utilisons une boucle qui envoie des données de manière cyclique. Dans chaque boucle, nous générons un objet message et le convertissons au format JSON. Ensuite, envoyez les données au format JSON au client WebSocket.

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

Dans cet exemple, nous créons d'abord un objet WebSocket et initialisons le formulaire lorsqu'il est ouvert. Une fois les données reçues par le client WebSocket, nous analysons les données au format JSON et utilisons Chart.js pour mettre à jour les données en temps réel dans le graphique.

Il ne s'agit que de l'implémentation de base de la fonction de visualisation de données en temps réel développée par Golang Websocket. Les scénarios d'application réels impliqueront également plusieurs aspects tels que le filtrage, l'agrégation et la visualisation des données. Mais cet article fournit quelques modèles et codes de base pour vous aider à commencer à implémenter ces fonctionnalités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!