實時數據顯示--SignalR實例演示

近段時間，有實現一個看板的功能，就是用戶更新信息時，即是對資料庫的數據進行插入，更新，或是刪除時，在牆上的屏幕的數據不需要人為去刷新，用戶就能看到更新後的數據。

實現此功能，Insus.NET使用SignalR的技術來實現。下麵的實例中，雖然不是實際的數據，但是實現過程是一樣的，現在分享給大家學習學習......


在項目中安裝SignalR：

上圖中，把綠色對鉤的組件均選擇安裝。

安裝完成，你看到一個readme.txt文件：

此你應該知道它在說什麼。看了，在App_Start目錄中，創建一個類，類名為Startup:

接下來，我們需要在Global.asax.cs的Application_Start和Application_End方法中，添加下麵高亮的2行代碼：

當然你的Web.config的配置文件中，還得添加真正的MS SQL Server連接語句。

 TableB model:

現在，在項目錄中，創建一個SignalR目錄，我們就可以在這個目錄中添加Hub類了：

所有客戶端使用的方法名，均使用駝峰寫法，小寫開頭。

現在，我們需要實現去資料庫獲取數據，當資料庫的數據變化時，客戶端也能實時顯示：

上圖中的藍色箭頭的Hub的方法，即是再前一張圖中的Show方法(#17行代碼)。另外有關SqlDependency類，可以查閱MSDN的網站。

 在MVC的項目的控制器中，我們創建2個Action操作：

創建視圖，參考下麵的步驟：



上面#3和#4是一樣。在ASP.NET MVC 4.0之後，可以使用~/signalr/js，不過在新版的.NET是，使用#3的寫法還是行的。

另外引用js的順序有講究。先引用jQuery，再引用SignalR的，再引用#3或#4。

上面標記#6的js代碼，參考下麵：

 上面標記#7的樣式代碼：

 table {
            border-collapse: collapse;
            border: solid #999;
            border-width: 1px 0 0 1px;
        }

            table caption {
                font-size: 14px;
                font-weight: bolder;
            }

            table th, table td {
                border: solid #999;
                border-width: 0 1px 1px 0;
                padding: 2px;
            }

        tfoot td {
            text-align: center;
        }

下麵是實時演示，Insus.NET有使用幾個瀏覽器Edge,IE,Firefox,Chrome，併在資料庫進行添加記錄，修改數據和刪除數據，所有客戶端均能實時顯示：