Cara melaksanakan carta statistik masa nyata dengan kemas kini masa nyata dalam PHP dan Vue.js-tutorial php-php.cn

Cara melaksanakan carta statistik masa nyata dengan kemas kini masa nyata dalam PHP dan Vue.js

王林

Lepaskan： 2023-08-17 09:32:01

asal

982 orang telah melayarinya

Cara melaksanakan carta statistik masa nyata dengan kemas kini masa nyata dalam PHP dan Vue.js

Cara untuk melaksanakan carta statistik masa nyata dengan kemas kini masa nyata dalam PHP dan Vue.js

Ikhtisar
Dengan pembangunan berterusan Internet, permintaan untuk data masa nyata juga semakin meningkat. Carta statistik masa nyata membolehkan kami memantau perubahan data dalam masa nyata dan memberikan sokongan padu untuk membuat keputusan. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue.js untuk melaksanakan carta statistik masa nyata yang dikemas kini dalam masa nyata.

Timbunan teknologi
Apabila melaksanakan carta statistik dikemas kini masa nyata, PHP bertanggungjawab untuk pemprosesan dan penghantaran data latar belakang, manakala Vue.js, sebagai rangka kerja bahagian hadapan, bertanggungjawab untuk pemaparan masa nyata dan pengemaskinian carta.

Langkah

Pasang dan konfigurasikan perkhidmatan WebSocket
Kunci untuk mencapai kemas kini masa nyata ialah menggunakan teknologi WebSocket. Kita boleh menggunakan Ratchet untuk melaksanakan pelayan WebSocket yang mudah. Jalankan arahan berikut dalam projek PHP untuk memasang:

$ composer require cboden/ratchet

Salin selepas log masuk

Selepas pemasangan selesai, kita boleh mencipta kelas pelayan WebSocket, mewarisi WebSocketServerInterface Ratchet dan melaksanakan kaedah seperti onMessage, onOpen dan onClose. Untuk pelaksanaan khusus, sila rujuk dokumentasi rasmi Ratchet.

Mulakan dan jalankan perkhidmatan WebSocket
Anda boleh memulakan perkhidmatan WebSocket dalam fail kemasukan projek PHP. Apabila terdapat mesej baharu, mesej ditolak ke hujung hadapan melalui WebSocket.

// 入口文件 index.php

use RatchetServerIoServer;
use MyWebSocketServer;

require dirname(__FILE__) . '/vendor/autoload.php';

$server = IoServer::factory(
    new MyWebSocketServer(),
    8080
);
$server->run();

Salin selepas log masuk

Reka bentuk halaman hadapan
Untuk menggunakan Vue.js untuk membina halaman hadapan, anda perlu memperkenalkan perpustakaan Vue.js dan Chart.js (perpustakaan carta yang sangat baik). Kemudian, tentukan beberapa data carta awal dalam sifat data tika Vue.

<!DOCTYPE html>
<html>
<head>
    <title>实时统计图表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div id="app">
        <canvas id="chart"></canvas>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                chartData: {
                    labels: [],
                    datasets: []
                }
            },
            mounted() {
                this.initChart();
                this.listenWebSocket();
            },
            methods: {
                initChart() {
                    // 使用Chart.js初始化图表
                    // 可以根据需要自定义图表的样式和数据
                    // 请参考Chart.js的官方文档
                },
                listenWebSocket() {
                    let socket = new WebSocket("ws://localhost:8080");
                    socket.onmessage = (event) => {
                        // 当有新的数据推送时，更新chartData
                        this.chartData.labels.push(event.data.label);
                        this.chartData.datasets.push({
                            label: event.data.label,
                            data: event.data.value
                        });

                        // 更新图表
                        this.updateChart();
                    };
                },
                updateChart() {
                    // 使用Chart.js更新图表
                    // 可以根据需要自定义图表的样式和数据
                    // 请参考Chart.js的官方文档
                }
            }
        });
    </script>
</body>
</html>

Salin selepas log masuk

Backend pemprosesan dan tolak data
Selepas pelayan WebSocket menerima data, kita perlu memproses data, dan kemudian menolak data ke bahagian hadapan melalui WebSocket.

// MyWebSocketServer.php

use RatchetConnectionInterface;
use RatchetMessageComponentInterface;

class MyWebSocketServer implements MessageComponentInterface
{
    protected $clients;

    public function __construct()
    {
        $this->clients = new SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn)
    {
        $this->clients->attach($conn);
    }

    public function onMessage(ConnectionInterface $from, $msg)
    {
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                $client->send(json_encode([
                    'label' => $msg['label'],
                    'value' => $msg['value']
                ]));
            }
        }
    }

    public function onClose(ConnectionInterface $conn)
    {
        $this->clients->detach($conn);
    }

    public function onError(ConnectionInterface $conn, Exception $e)
    {
        $conn->close();
    }
}

Salin selepas log masuk

Kesimpulan
Melalui langkah di atas, kami berjaya melaksanakan carta statistik masa nyata yang dikemas kini dalam masa nyata. PHP bertanggungjawab untuk memproses data dan menolak, manakala Vue.js bertanggungjawab untuk memaparkan dan mengemas kini carta dalam masa nyata. Kaedah paparan data masa nyata ini boleh digunakan secara meluas dalam pemantauan masa nyata, analisis data dan bidang lain untuk menyediakan sokongan data yang tepat pada masanya dan tepat untuk membuat keputusan.

Atas ialah kandungan terperinci Cara melaksanakan carta statistik masa nyata dengan kemas kini masa nyata dalam PHP dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!