上一篇文章基于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/

原文地址：https://www.cnblogs.com/net-yuan/p/SignalR-ujtopo.html

.NET社区新闻，深度好文，欢迎访问公众号文章汇总 http://www.csharpkit.com

SignalR2结合ujtopo实现拓扑图动态变化相关推荐

视频+课件| 室内动态变化场景中的相机重定位（CVPR2021）
写在前面感谢「3D视觉从入门到精通」知识星球嘉宾山东大学董思言博士为我们带来的主题为<室内动态变化场景中的相机重定位>视频讲解,星球成员可免费观看学习.备注:董思言,山东大学四年级博士生 ...
重磅直播 | 室内动态变化场景中的相机重定位（CVPR2021）
大家好,本公众号现已开启线上视频公开课,主讲人通过B站直播间,对3D视觉领域相关知识点进行讲解,并在微信群内完成答疑. 本期由山东大学董思言博士分享,分享的主题为<室内动态变化场景中的相机重定位 ...
微生物组数据揭示中国稻谷产毒真菌分布及仓储动态变化
中国水稻主产区产毒真菌的分布 Distribution of mycotoxin-producing fungi across major rice production areas of China ...
SBIO | 西农韦革宏组-大豆土壤细菌门间负向互作影响群落的动态变化和功能
点击蓝字|关注我们导读土壤微生物在养分循环中起着不可或缺的作用,是农业可持续发展的重要生物资源.农业管理和植物选择交互地影响着土壤中的微生物群落和氮循环.人们普遍认为微生物间的相互作用也对微生物的 ...
Nature子刊 | 翟冰等造血干细胞移植中的肠道真菌菌群动态变化与临床结果分析(招聘博后、助研)...
近日,中国科学院先进技术研究院合成生物学研究所.深圳合成生物学创新研究院翟冰研究员在Nature Microbiology 杂志发表了题为"肠道真菌动态变化和近平滑念珠菌定植与造血干细胞移植 ...
综述 | 森林微生物组：多样性，复杂性和动态变化(IF:11.3)
本文由殷继忠编译,董小橙.江舜尧编辑,转载自"微生太". 导读在全球范围内,森林一直代表着高生产力的生态系统.在各种森林栖息地中,每种微生物都有自己的特定功能,然而大多数生态系统 ...
MIT提出Liquid机器学习系统，可像液体一样适应动态变化
在自动驾驶等许多重要应用中,数据都是实时动态的,并且时不时还会出现一些意外情况.为了高效地应对这一问题,MIT 的研究者受生物神经元启发而设计了一种新型神经网络,并且他们还通过理论证明和实验验证体现了 ...
景观格局动态变化分析方法（基于ArcGIS、Fragstats、ENVI、ERDAS、Patch Analysis for ArcGIS） (2011-03-15 08:07:03)...
转载 http://blog.sina.com.cn/s/blog_54388b830100rfod.html 分类: GIS基础与应用, 景观格局虽然以前对该类分析已经进行过研究,并已完成过相关项 ...
问题小结（2）-dialog内容动态变化（调用系统方法时）
在android里,我们调用系统的方法创建和显示dialog,同时dialog的内容是动态变化的(同一个id的dialog每一次调用showDialog时),发现内容总是显示第一次的东西,怎么实现di ...

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

原文地址：https://www.cnblogs.com/net-yuan/p/SignalR-ujtopo.html

SignalR2结合ujtopo实现拓扑图动态变化相关推荐

最新文章

热门文章