如何从服务器实时获取数据更新Chart.js图表？WebSocket是否适用？

Hey there! Let's break down your problem and find a better solution for real-time chart updates with Chart.js.

Absolutely—your current AJAX polling approach works, but it's far from optimal for real-time data. Here's why:

• Wasted Bandwidth: Every AJAX request sends full HTTP headers, adding unnecessary overhead when polling every second.
• Latency: You only get updates once per second at best, with a delay between when server data changes and when your client asks for it.
• Server Load: Frequent short-lived connections put more strain on your server than a single persistent WebSocket connection.

WebSocket is built exactly for this scenario: it creates a two-way, long-lived connection where the server can push updates instantly whenever new data is available, no client polling required.

Let’s walk through a complete implementation, including a PHP WebSocket server and front-end Chart.js integration.

Step 1: Set Up the PHP WebSocket Server #

We’ll use Ratchet, a popular WebSocket library for PHP (since PHP doesn’t have native WebSocket support).

1. First, install Ratchet via Composer:

   composer require cboden/ratchet
   

2. Create a WebSocket handler file (WebSocketHandler.php) to manage connections and data:

   <?php
   require __DIR__ . '/vendor/autoload.php';
   
   use Ratchet\MessageComponentInterface;
   use Ratchet\ConnectionInterface;
   
   class WebSocketHandler implements MessageComponentInterface {
       protected $clients;
   
       public function __construct() {
           $this->clients = new \SplObjectStorage;
       }
   
       // Run when a client connects
       public function onOpen(ConnectionInterface $conn) {
           $this->clients->attach($conn);
           echo "New connection! ({$conn->resourceId})\n";
           // Send initial data to the new client
           $this->sendLatestData($conn);
       }
   
       // Handle messages from clients (we don't need this for one-way pushes)
       public function onMessage(ConnectionInterface $from, $msg) {}
   
       // Run when a client disconnects
       public function onClose(ConnectionInterface $conn) {
           $this->clients->detach($conn);
           echo "Connection {$conn->resourceId} disconnected\n";
       }
   
       // Handle errors
       public function onError(ConnectionInterface $conn, \Exception $e) {
           echo "Error: {$e->getMessage()}\n";
           $conn->close();
       }
   
       // Send latest data to one or all clients
       public function sendLatestData(ConnectionInterface $conn = null) {
           // Replace this with your actual data-fetching logic (e.g., database query)
           $data = $this->getPlayerScores();
           $jsonData = json_encode($data);
   
           if ($conn) {
               // Send to a single client (new connection)
               $conn->send($jsonData);
           } else {
               // Send to all connected clients
               foreach ($this->clients as $client) {
                   $client->send($jsonData);
               }
           }
       }
   
       // Simulate fetching player scores (replace with your real data source)
       private function getPlayerScores() {
           $scores = [];
           for ($i = 1; $i <= 5; $i++) {
               $scores[] = [$i, rand(10, 100)];
           }
           return $scores;
       }
   }
   

3. Create the server startup script (server.php):

   <?php
   require __DIR__ . '/vendor/autoload.php';
   require __DIR__ . '/WebSocketHandler.php';
   
   use Ratchet\Server\IoServer;
   use Ratchet\Http\HttpServer;
   use Ratchet\WebSocket\WsServer;
   
   $handler = new WebSocketHandler();
   $server = IoServer::factory(
       new HttpServer(
           new WsServer($handler)
       ),
       8080 // Port for WebSocket connections
   );
   
   // Add a timer to push updates every 1 second (match your original polling frequency)
   $loop = $server->loop;
   $loop->addPeriodicTimer(1, function () use ($handler) {
       $handler->sendLatestData();
   });
   
   echo "WebSocket server running on ws://localhost:8080\n";
   $server->run();
   

4. Start the server:

   php server.php
   

Step 2: Front-End Integration with Chart.js #

We’ll fix your original code to use WebSocket instead of polling, and reuse the same Chart instance (creating a new one every second was a big inefficiency!).

<canvas id="mycanvas"></canvas>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let barGraph; // Store the chart instance globally

// Initialize the chart with initial data
function initChart(initialData) {
    const playerLabels = initialData.map(item => `Player ${item[0]}`);
    const scores = initialData.map(item => parseInt(item[1]));

    const chartConfig = {
        labels: playerLabels,
        datasets: [{
            label: 'Player Score',
            backgroundColor: 'rgba(200, 200, 200, 0.75)',
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: scores
        }]
    };

    const ctx = $("#mycanvas");
    barGraph = new Chart(ctx, {
        type: 'line',
        data: chartConfig
    });
}

// Update the existing chart with new data
function updateChart(newData) {
    const playerLabels = newData.map(item => `Player ${item[0]}`);
    const scores = newData.map(item => parseInt(item[1]));

    barGraph.data.labels = playerLabels;
    barGraph.data.datasets[0].data = scores;
    barGraph.update(); // Trigger a smooth refresh
}

$(document).ready(function() {
    // Connect to the WebSocket server
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
        console.log('WebSocket connection established');
    };

    ws.onmessage = function(event) {
        const data = JSON.parse(event.data);
        console.log('Received data:', data);
        
        // Initialize the chart if it doesn't exist, otherwise update it
        if (!barGraph) {
            initChart(data);
        } else {
            updateChart(data);
        }
    };

    ws.onerror = function(error) {
        console.error('WebSocket error:', error);
    };

    ws.onclose = function() {
        console.log('WebSocket connection closed');
        // Optional: Auto-reconnect after 5 seconds
        setTimeout(() => window.location.reload(), 5000);
    };
});
</script>

1. No More Polling: The server pushes updates automatically, eliminating unnecessary HTTP requests.
2. Reusable Chart Instance: We create the chart once and only update its data, which is far more efficient than reinitializing it every second.
3. Lower Overhead: WebSocket uses a single persistent connection, cutting down on server load and bandwidth usage.

内容的提问来源于stack exchange，提问作者Riccardo perreira