SignalR2结合ujtopo实现拓扑图动态变化

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yanganyang/article/details/85706757

        上一篇文章基于jTopo的拓扑图设计工具库ujtopo,介绍了拓扑设计工具,这一篇我们使用SignalR2结合ujtopo实现拓扑图的动态变化。

        仅仅作为演示,之前的文章SignalR2简易数据看板演示,用一个小的示例演示了SignalR作为数据看板的用法,这次我们将这个例子稍微改变一下,当点击【数据模拟】的时候,数据还是加1,当为奇数时,改变其中一个结点的图片,当为偶数时,再把这个结点的图片改变为另一张图片;以此为基础,可以延伸出很多应用。

        软件环境:VS2015

        使用VS2015创建.net Framework4.5的Web应用程序,选择MVC,身份认证选择不需要身份验证。

        Nuget包,选择AdminLTE,选择安装,版本是最新的2.4.0。

        Nuget包,选择WebHelpers.Mvc5,选择安装,版本是最新的2.1.0。

        SignalR的安装,请参见之前的博文SignalR 2 入门

        Designer.cshtml页面跟上篇博文jTopo的拓扑图设计工具库ujtopo designer.html一样;

        Index.cshtml页面引入SignalR2

@Scripts.Render("~/Bundles/ujtopo")
    <script src="@Url.Content("~/Scripts/jquery.signalR-2.4.0.min.js")"></script>
    <script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
Bundles/ujtopo使用Bundle压缩了ujtopo相关的js
bundles.Add(new ScriptBundle("~/Bundles/ujtopo")
                .Include("~/Content/js/plugins/jTopo/jtopo-0.4.8-min.js")
                .Include("~/Content/js/plugins/jTopo/toolbar.js")
                .Include("~/Content/js/plugins/ujtopo/ujtopo.js"));

其它的代码同上篇博文jTopo的拓扑图设计工具库ujtopo 中的index.html一样;topo初始化之后连接SignalR。

var startConn = function () {
            var connection = $.hubConnection();
            var hub = connection.createHubProxy("ChartHub");
            hub.on("updateChart", function (chart) {
                var tmp = chart % 2;
                if (tmp == 1) {
                    var eNode = jtopo.findNode('j_10');
                    if (eNode != null && eNode != undefined) {
                        eNode.setImage(rootUrl + "Images/ujtopo/net-yuan.png", true);
                    }
                }
                else {
                    var eNode = jtopo.findNode('j_10');
                    if (eNode != null && eNode != undefined) {
                        eNode.setImage(rootUrl + "Images/ujtopo/comb-brush-hair-make.png", true);
                    }
                }
            });

            connection.start();
        }

j_10是指的baby坐浴椅这个节点,因为我们在设计的时候,它的id是10,前面加了前缀j_是因为使用的是uid

dealArgs = function (args) {
        args.uid = "j_" + args.id;
        return args;
    },  

另外,当具有signalr的网站未以根网站运行时,不是使用/signalr,使用../signalr。它适用于任何站点名称文件夹。没有硬编码名称' var connection = $.hubConnection('../signalr', {useDefaultPath: false});

https://www.e-learn.cn/content/wangluowenzhang/723307

用designer页面设计了拓扑图,在index页面展示

点击【数据模拟】之后,变为

再次点击【数据模拟】之后,变为:

GitHub:https://github.com/net-yuan/ujtopo-SignalR

文章同步在http://net-yuan.com/Article/Detail/20b4742a-305f-4534-9298-dad957f8807d

演示地址:http://net-yuan.com/ujtopo/

展开阅读全文

拓扑图

05-29

<p>rn <span style="font-size:14px;"><strong>课程目标</strong></span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;全面理解和掌握 Zabbix 监控系统的架构及运行原理,搭建和管理各种规模的Zabbix监控系统</span> rn</p>rn<p>rn <br />rn</p>rn<p>rn <span style="font-size:14px;"><strong>课程简介</strong></span><span style="font-size:14px;"></span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Zabbix是一个开源的企业级的监控解决方案。通过Zabbix可以监控IT基础设施的方方面面,包括硬件、操作系统、网络、虚拟化层、中间件和各种业务应用系统。用Zabbix几乎可以监控你想监控的任意数据。</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp;&nbsp;</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp; 本课程从Zabbix的介绍、安装开始,一步步带你深入Zabbix,通过学习你会:</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp; 1、掌握Zabbix各个组件的配置和管理。</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp; 2、掌握不同监控项的类型和配置方法,根据监控需求灵活配置监控项。</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp; 3、掌握网络发现、低级发现和主动式agent自动注册,实现自动化监控。</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp; 4、掌握模版、宏变量、触发器和告警通知的配置和高级的应用方法。</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp; 5、掌握图形、屏幕、拓扑图和仪表盘等数据可视化的方法,利用大屏可以实时的展示监控数据。</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp; 6、掌握Zabbix系统自身的维护、备份、升级、排障以及性能优化。</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp; 7、掌握Zabbix内部运行机制和Zabbix使用技巧,让zabbix更好的帮助你实现监控目标。</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp; &nbsp; &nbsp; &nbsp; 本课程中还包含很多操作演示,比如像创建主机,创建监控项、触发器、图形、全局事件关联等,也介绍了微信和钉钉告警的配置方法。当你对Zabbix深入了解之后,面对层出不穷的新业务、新应用,你都能轻松自如的制定和提供相应的监控解决方案。</span> rn</p>rn<p>rn <br />rn</p>rn<p>rn <br />rn</p>rn<p>rn <br />rn</p>rn<p>rn <strong><span style="color:#C00000;font-size:14px;">特别提示:官网的中文文档有些地方翻译的有问题,一定要以英文文档为准。</span></strong> rn</p>rn<span style="font-size:14px;"></span>

没有更多推荐了,返回首页