?? 上一篇文章基于jTopo的拓?fù)鋱D設(shè)計(jì)工具庫ujtopo，介紹了拓?fù)湓O(shè)計(jì)工具，這一篇我們使用SignalR2結(jié)合ujtopo實(shí)現(xiàn)拓?fù)鋱D的動(dòng)態(tài)變化。

? ? ? ? 僅僅作為演示，之前的文章SignalR2簡易數(shù)據(jù)看板演示，用一個(gè)小的示例演示了SignalR作為數(shù)據(jù)看板的用法，這次我們將這個(gè)例子稍微改變一下，當(dāng)點(diǎn)擊【數(shù)據(jù)模擬】的時(shí)候，數(shù)據(jù)還是加1，當(dāng)為奇數(shù)時(shí)，改變其中一個(gè)結(jié)點(diǎn)的圖片，當(dāng)為偶數(shù)時(shí)，再把這個(gè)結(jié)點(diǎn)的圖片改變?yōu)榱硪粡垐D片；以此為基礎(chǔ)，可以延伸出很多應(yīng)用。

? ? ? ? 軟件環(huán)境：VS2015

? ? ? ? 使用VS2015創(chuàng)建.net Framework4.5的Web應(yīng)用程序，選擇MVC，身份認(rèn)證選擇不需要身份驗(yàn)證。

? ? ? ? Nuget包，選擇AdminLTE，選擇安裝，版本是最新的2.4.0。

? ? ? ? Nuget包，選擇WebHelpers.Mvc5，選擇安裝，版本是最新的2.1.0。

? ? ? ? SignalR的安裝，請參見之前的博文SignalR 2 入門

? ? ? ? Designer.cshtml頁面跟上篇博文jTopo的拓?fù)鋱D設(shè)計(jì)工具庫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相關(guān)的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的拓?fù)鋱D設(shè)計(jì)工具庫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坐浴椅這個(gè)節(jié)點(diǎn)，因?yàn)槲覀冊谠O(shè)計(jì)的時(shí)候，它的id是10，前面加了前綴j_是因?yàn)槭褂玫氖莡id

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

另外，當(dāng)具有signalr的網(wǎng)站未以根網(wǎng)站運(yùn)行時(shí)，不是使用/signalr，使用../signalr。它適用于任何站點(diǎn)名稱文件夾。沒有硬編碼名稱'

var connection = $.hubConnection('../signalr', {useDefaultPath: false});

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

用designer頁面設(shè)計(jì)了拓?fù)鋱D，在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社區(qū)新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結(jié)

以上是生活随笔為你收集整理的SignalR2结合ujtopo实现拓扑图动态变化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。