实时通信 | pusher 案例:实时图表(七)
2022/1/29 6:06:22
本文主要是介绍实时通信 | pusher 案例:实时图表(七),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
创建您的网页
<html> <body> <div id="chart_div" style="width: 100%; height: 500px;"></div> <script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://js.pusher.com/7.0.3/pusher.min.js"></script> <script> google.charts.load("current", { packages: ["corechart"] }); google.charts.setOnLoadCallback(() => { // Instead of hard-coding the initial table data, // you could fetch it from your server. const dataTable = google.visualization.arrayToDataTable([ ["Year", "Price"], [2013, 400], [2014, 460], ]); const chart = new google.visualization.AreaChart( document.getElementById("chart_div") ); const options = { title: "1 BTC in USD", hAxis: { title: "Year 2022 (Tinywan)", titleTextStyle: { color: "#333" } }, vAxis: { minValue: 0 }, animation: { duration: 100, easing: "out" }, }; chart.draw(dataTable, options); let year = 2015; Pusher.logToConsole = true; const pusher = new Pusher( "108365f54d1d934e7678", // Replace with 'key' from dashboard { cluster: "ap3", // Replace with 'cluster' from dashboard forceTLS: true, } ); const channel = pusher.subscribe("price-btcusd"); channel.bind("new-price", (data) => { const row = [year++, data.value]; dataTable.addRow(row); chart.draw(dataTable, options); }); }); </script> </body> </html>
服务端事件
<?php /** * @desc pusher server * @author Tinywan(ShaoBo Wan) * @date 2022/01/29 23:02 */ require_once '../../vendor/autoload.php'; $options = array( 'cluster' => 'ap3', 'useTLS' => true ); $pusher = new Pusher\Pusher( '108365f54d1d934e7678', '9cfbfd3b06290c427de6', '1339434', $options ); // Trigger a new random event every second. In your application, // you should trigger the event based on real-world changes! while (true) { $pusher->trigger('price-btcusd', 'new-price', array( 'value' => rand(0, 5000) )); sleep(1); }
效果图
这篇关于实时通信 | pusher 案例:实时图表(七)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?