Comment utiliser WebSocket dans Golang pour la visualisation des données en temps réel

Comment utiliser WebSocket pour réaliser une visualisation de données en temps réel dans Golang

Introduction :
De nos jours, la visualisation de données en temps réel joue un rôle important dans de nombreux domaines, et WebSocket est une méthode utilisée pour communiquer entre les navigateurs Web et les serveurs Protocole pour une communication bidirectionnelle en temps réel. Cet article expliquera comment utiliser la bibliothèque WebSocket dans Golang pour réaliser une visualisation des données en temps réel et fournira des exemples de code spécifiques.

1. Installer les bibliothèques Golang et WebSocket
Tout d'abord, nous devons installer Golang et la bibliothèque WebSocket correspondante dans l'environnement local. Accédez au site officiel de Golang pour télécharger et installer Golang, puis utilisez la commande suivante pour installer la bibliothèque WebSocket dans le langage Go :
allez chercher github.com/gorilla/websocket

Deuxièmement, créez un serveur WebSocket
Nous créons d'abord un simple serveur WebSocket pour traiter les connexions client et la messagerie. Voici un exemple de code simple :

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. Créez un client WebSocket
Ensuite, nous créons un client WebSocket simple pour envoyer et recevoir des messages depuis le serveur. Voici un exemple de code simple :

// 在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. Visualisation des données en temps réel
La transmission des données en temps réel est réalisée via WebSocket. Nous pouvons effectuer des opérations de visualisation des données en temps réel après que le client a reçu le message du serveur. Voici un exemple simple pour créer un graphique linéaire en temps réel à partir des données reçues via la bibliothèque 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);
}

Conclusion :
Avec le code ci-dessus, nous pouvons utiliser WebSocket dans Golang pour obtenir une visualisation des données en temps réel. Le client se connecte au serveur via WebSocket et le serveur reçoit les messages du client et les envoie à tous les clients connectés. Une fois que le client a reçu le message du serveur, nous pouvons effectuer des opérations de traitement et de visualisation des données en temps réel pour obtenir un affichage et une analyse des données en temps réel.

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!