首頁 > 文章 > 後端開發 > SignalR Self Host多端訊息推播服務介紹

SignalR Self Host多端訊息推播服務介紹

零下一度原創: 2017-07-02 10:53:591585瀏覽

這篇文章主要為大家詳細介紹了SignalR Self Host+MVC等多端訊息推播服務的第三篇，具有一定的參考價值，有興趣的小夥伴們可以參考一下

一、概述

最近項目確實太忙，而且身體也有點不舒服，慢性咽炎犯了，昨晚睡覺時喘不過氣來，一直沒休息好，也沒什麼時間寫博客，今天朋友問我什麼時候能出web端的消息發送的文章時，我還在忙著改項目的事，趁著中午吃飯和午休的時間，趕緊補上之前欠下的文章。

這章主要是實作多端訊息相互通訊的簡單demo，mvc的web端傳送訊息到control端等。

二、建立web客戶端

1、新建一個WebClient解決方案

2、在WebClient解決方案下新建一個名為Clinet mvc專案

3、根據自己實際情況選擇對應的專案模板，這裡為了做演示，選擇Internet應用程式

4、在vs中打卡程式包管理器控制台，輸入以下程式碼

Install-Package Microsoft.AspNet.SignalR.JS

5、修改專案中Views下Homge資料夾中的Index.cshtml檔案程式碼，如下

@{
  Layout = null;
}

<h1>流程演示</h1>
<input type="hidden" id="displayname" />
<h2 id="thisname"></h2>

<select id="username" style="width: 100px;">
</select>
<br />
<br />
<input type="text" id="message" />
<input id="send" type="button" value="发送" />
<p>
  <h1 id="messgaeInfo"></h1>
</p>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="http://localhost:10086/signalr/hubs"></script>
<script type="text/javascript">
  $(function () {
    $.connection.hub.url = &#39;http://localhost:10086/signalr&#39;;
    var work = $.connection.IMHub;
  
    $(&#39;#displayname&#39;).val(prompt(&#39;请输入昵称:&#39;, &#39;&#39;));
    $(&#39;#thisname&#39;).text(&#39;当前用户：&#39; + $(&#39;#displayname&#39;).val());
    var fromUser = $(&#39;#displayname&#39;).val();

    //对应后端的SendMessage函数，消息接收函数
    work.client.receivePrivateMessage = function (user, message) {
      //alert(message);
      $(&#39;#messgaeInfo&#39;).append(message + &#39;</br>&#39;);
    };

    //后端SendLogin调用后，产生的loginUser回调
    work.client.onConnected = function (connnectId, userName, OnlineUsers) {
      reloadUser(OnlineUsers);
    };

    //hub连接开启
    $.connection.hub.start().done(function () {
      var username = $(&#39;#displayname&#39;).val();
      //发送上线信息
      work.server.register(username);

      //点击按钮，发送消息
      $(&#39;#send&#39;).click(function () {
        var friend = $(&#39;#username&#39;).val();
        //调用后端函数，发送指定消息
        work.server.sendPrivateMessage(friend, $("#message").val());
      });
    });
  });

  //重新加载用户列表
  var reloadUser = function (userlist) {
    $("#username").empty();
    for (i = 0; i < userlist.length; i++) {
      $("#username").append("<option value=" + userlist[i].UserName + ">" + userlist[i].UserName + "</option>");
    }
  }
</script>