WinForm中 Asp.Net Signalr消息推送測試實例

WinForm中 Asp.Net Signalr消息推送測試實例

 

---

 初學Signalr，只瞭解一些皮毛，還需進一步學習。SignalR提供了一個簡單的API，用於建立從服務器端.NET代碼調用客戶端瀏覽器（和其餘客戶端平臺）中的JavaScript函數的服務器到客戶端的遠程過程調用（RPC）。SignalR還包括用於鏈接管理（例如，鏈接和斷開鏈接事件）和分組鏈接的API。 

 

 

 

上面描述都是官方文檔中提出的，個人測試項目的主要需求以下：

一、創建一個SignalR服務，用於實時廣播信息，供客戶端使用。

二、創建一個客戶端，功能是隻給服務端進行推送，但不接收服務端的廣播信息。

三、WinFrom程序或者ASP.NET WBE端客戶端程序，用於接收和展現接收的信息。

基本的流程圖：

 等待

有了明確的需求，打開VS直接開幹。

一、先創建一個SignalR服務端

 建立一個SignalR廣播服務只需三步

第一步：新建項目（WF或者控制檯），NuGet下載SignalR動態庫。

第二步：建立一個HUB類，用於客戶端訪問鏈接

// [HubName("MyHub"), Authorize]
    public class MyHub : Hub
    {
        public List<string> UserIdList1 { get; } = new List<string>();

        /// <summary>
        /// 信息廣播
        /// </summary>
        /// <param name="identify">iot惟一標識</param>
        /// <param name="model">數據模型</param>
        [HubMethodName("Send")]
        public void Send(string identify, IOTModel model)
        {
            Clients.All.addMessage(identify, model);
        }
        /// <summary>
        /// 錯誤日誌廣播
        /// </summary>
        /// <param name="identify">惟一標示</param>
        /// <param name="errMessage">錯誤信息</param>
        [HubMethodName("ErrSend")]
        public void Send(string identify, string errMessage)
        {
            Clients.All.addMessage(identify, errMessage);
        }
        /// <summary>
        /// 向首次鏈接的客戶端返回實時數據，用於展現
        /// </summary>
        /// <param name="identify"></param>
        /// <param name="list"></param>
        [HubMethodName("initSend")]
        public void Send(string identify, List<IOTModel> list)
        {
            Clients.All.initData(identify, list);
        }
        public override Task OnConnected()
        {
            UserIdList1.Add(Context.ConnectionId);
            //首次鏈接須要返回MongoDB中的最後一條記錄供客戶端展現
            Send("IotList", ProdMongoDB.GetLastData());
            return base.OnConnected();
        }
        public override Task OnDisconnected(bool stopCalled)
        {
            UserIdList1.Remove(Context.ConnectionId);
            return base.OnDisconnected(stopCalled);
        }

        public override Task OnReconnected()
        {
            UserIdList1.Add(Context.ConnectionId);
            return base.OnReconnected();
        }
    }

第三步：異步開啓服務Signalr服務

開啓服務以前須要設置服務的IP和端口

 private  IDisposable SignalR { get; set; }
 private  string ServerURI = "http://" + ConfigurationManager.AppSettings["signalrAdress"];

 private async void  RunServer()
 {
    await Task.Run(() => StartServer());
 }
 private  void StartServer()
 {
 try
    {
      SignalR = WebApp.Start(ServerURI);
    }
    catch (TargetInvocationException)
    {
      SignalR.Dispose();
      Console.WriteLine("Server failed to start. A server is already running on " + ServerURI);
      return;
     }
 }

二、創建一個客戶端（WinForm 或者控制檯程序），用於向服務端發送信息。

 此客戶端只負責給服務器發送信息，不接收服務器的廣播信息，建立過程以下：

第一步：新建WF或控制檯程序，添加動態庫

第二步：建立鏈接對象，配置服務地址

        //定義代理,廣播服務鏈接相關
        private static IHubProxy HubProxy { get; set; }
        private static readonly string ServerUrl = ConfigurationManager.AppSettings["signalrServer"];
        //private static string _serverUrl ="";
        //定義一個鏈接對象
        public static HubConnection Connection { get; set; }

第三步：異步鏈接服務端

       //異步鏈接服務器
        private async void ConnectAsync()
        {
            Connection = new HubConnection(ServerURI);
            Connection.Closed += Connection_Closed; ;
            HubProxy = Connection.CreateHubProxy("MyHub");
            try
            {
                await Connection.Start();
            }
            catch (HttpRequestException)
            {
                _logger.Error("Unable to connect to server: Start server before connecting clients.");
                return;
            }
        }

 第四部：給服務端發送實時信息

HubProxy.Invoke("Send", "aaa", message);

發送信息中調用的Send是服務端HUB類中定義的發送方法，根據實際需求定義和使用方法。

三、創建一個WinForm客戶端程序，用於接收服務端的廣播信息

winform 客戶端中定義鏈接服務端和上面2中的相同，不一樣之處是這個客戶端只接收信息不發送信息。

跳過鏈接服務的部分

實時監聽服務端的信息

            Connection = new HubConnection(_serverUrl);
            Connection.Closed += Connection_Closed;
            HubProxy = Connection.CreateHubProxy("MyHub");
            HubProxy.On<string, IOTModel>("AddMessage", RecvMsg);//接收實時信息
            HubProxy.On<string, string>("addMessage", RecvMsg);//接收錯誤日誌
            HubProxy.On<string, List<IOTModel>>("initData", RecvMsg);//初始化監測數據

建立RecvMsg方法用於解析處理顯示數據

 private static void RecvMsg(string identifiy, string errMessage)
        {
            if (identifiy != "ErrorInfo") return;
            ErrorList.Add("錯誤信息："+ errMessage + "，接收時間：" + DateTime.Now);
            //實時添加到richBox中
            if (ErrorBox.InvokeRequired)
            {
                ErrorBox.Invoke((Action)(() => ErrorBox.AppendText("錯誤信息：" + errMessage + "，接收時間：" + DateTime.Now + "\r\n")));
                return;
            }
            ErrorBox.AppendText("錯誤信息：" + errMessage + "，接收時間：" + DateTime.Now + "\r\n");
        }

四、創建一個aps.net Web端客戶端，和WinForm同樣接收服務器廣播信息。

創建web端客戶端也比較簡單，具體以下：

第一步：新建asp.net web應用程序，獲取動態程序包

所需的js文件如上。

第二步：新建html 頁面，編寫腳本代碼接收廣播信息。

    <script src="Scripts/jquery-3.0.0.js"></script>
    <script src="Scripts/jquery.signalR-2.2.2.js"></script>
    <script src="http://172.30.16.165:805/signalr/hubs"></script>

 $(function() {
            //配置hub服務器的地址
            $.connection.hub.url = "http://localhost:888/signalr";

            //聲明一個hub的代理,此處的MyHub爲服務器端配置的Hub名稱
            var proxy = $.connection.myHub;

            //定義函數，接收服務廣播,addMessage爲服務端定義的客戶端接收的方法
            proxy.client.addMessage = function(name, message) {
                //對接收到的數據進行解析
                if (name === "FYIot") {
                    var html = "<tr><td>" + message.ConfigCode + "</td>";
                    html += "<td>" + message.ConfigValue + "</td>";
                    html += "<td>" + moment(message.SaveDate).format("YYYY-MM-DD HH:mm:ss") + "</td></tr>";
                    $("#sigBody").append(html);
                }
            }
            //鏈接服務
            $.connection.hub.start().done();

            $("#tableDiv").slimScroll({
                height: 500
            });
        });

<div style="text-align: center">
    <h3>實時數據</h3>
</div>
<div style="width: 100%; padding: 20px;" id="tableDiv">
    <table  class="table table-bordered table-hover">
        <thead>
        <tr>
            <th width="50%">監測項編號</th>
            <th width="20%">監測值</th>
            <th width="30%">監測時間</th>
        </tr>
        </thead>
        <tbody id="sigBody">
        <tr>
        </tr>
        </tbody>
    </table>
</div>

總結：經過以上步驟能夠簡單的搭建一個基於Signalr的客戶端和服務端的通訊實例，關於強大的signalr還須要不斷的學習和探索。不足之處還望指點扔磚。