php使用webSocket实现Echarts长连接自动刷新的解决方案(1):前端获取后端JSON数据

简介: php使用webSocket实现Echarts长连接自动刷新的解决方案(1):前端获取后端JSON数据

项目需求

Echarts图表自动获取服务器端推送的数据,实现图表的自动渲染更新;


前端代码

引入JS包

   <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/echarts.min.js"></script>

HTML代码

<div id="main" style="width: 1000px;height: 600px;"></div>


JS代码

webSocket连接函数封装;

//webSocket连接;
    function WebSocketServer() {
        var wsClient = null; //WS客户端对象
        //判断是否支持WebSocket
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        if (window.WebSocket) {
            wsClient = new WebSocket('ws://127.0.0.1:9090');
            wsClient.onmessage = function (e) {
                //console.log(e.data);
                //图表渲染数据格式处理;
                var newData = JSON.parse(e.data);
                var dataName = [], dataList = [];
                for (var i = 0; i < newData.length; i++) {
                    dataName.push(newData[i].vname);
                    dataList.push(newData[i].vdata);
                }
                //console.log(newData[0].vdata);
                //渲染图表;
                getLine(dataName, dataList);
            };
            //连接服务器;
            wsClient.onopen = function () {
                console.log('WS客户端已经成功连接到服务器上');
                wsClient.send('getPeerInfo'); //向WS服务器发送一个消息
            };
            //断开服务器;
            wsClient.onclose = function (e) {
                console.info("WS客户端到服务器的连接已经断开" + JSON.stringify(e));
            };
        } else {
            alert("你的浏览器不支持 WebSocket!");
        }
    }


Echarts图表函数封装

  /*Echarts*/
    function getLine(dataName, dataList) {
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dataName
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataList,
                type: 'line'
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }


Done!

相关文章
|
2月前
|
前端开发 JavaScript Python
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
92 0
|
2月前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
113 7
|
2月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
394 8
|
2月前
|
设计模式 前端开发 JavaScript
前端编程的异步解决方案有哪些?
本文首发于微信公众号“前端徐徐”,介绍了异步编程的背景和几种常见方案,包括回调、事件监听、发布订阅、Promise、Generator、async/await和响应式编程。每种方案都有详细的例子和优缺点分析,帮助开发者根据具体需求选择最合适的异步编程方式。
86 1
|
3月前
|
JSON 数据格式
Blob格式转json格式,拿到后端返回的json数据
文章介绍了如何将后端返回的Blob格式数据转换为JSON格式,并处理文件下载和错误提示。
106 0
Blob格式转json格式,拿到后端返回的json数据
|
7月前
|
缓存 监控 前端开发
前端性能优化以及解决方案
前端性能优化关乎用户体验和网站竞争力,包括减少HTTP请求、使用CDN、压缩资源、延迟加载、利用浏览器缓存等策略。制定优化计划,使用监控工具,遵循最佳实践并持续学习,能提升网站速度和稳定性。
88 0
|
4月前
|
Java PHP
【应用服务 App Service】在Azure App Service中使用WebSocket - PHP的问题 - 如何使用和调用
【应用服务 App Service】在Azure App Service中使用WebSocket - PHP的问题 - 如何使用和调用
|
4月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
38 0
|
4月前
|
前端开发 JavaScript 中间件
【前端状态管理之道】React Context与Redux大对决:从原理到实践全面解析状态管理框架的选择与比较,帮你找到最适合的解决方案!
【8月更文挑战第31天】本文通过电子商务网站的具体案例,详细比较了React Context与Redux两种状态管理方案的优缺点。React Context作为轻量级API,适合小规模应用和少量状态共享,实现简单快捷。Redux则适用于大型复杂应用,具备严格的状态管理规则和丰富的社区支持,但配置较为繁琐。文章提供了两种方案的具体实现代码,并从适用场景、维护成本及社区支持三方面进行对比分析,帮助开发者根据项目需求选择最佳方案。
66 0
|
5月前
|
前端开发 JavaScript UED
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
【7月更文挑战第16天】在前后端分离的Web开发中,WebSocket解决了实时数据交换的问题。使用Python的Flask和Flask-SocketIO库,后端创建WebSocket服务,监听并广播消息。前端HTML通过JavaScript连接到服务器,发送并显示接收到的消息。WebSocket适用于实时通知、在线游戏等场景,提升应用的实时性和用户体验。通过实战案例,展示了如何实现这一功能。
320 2

热门文章

最新文章