如何使用SignalRSelfHost+MVC等多端消息進(jìn)行推送服務(wù)

如何使用SignalRSelfHost+MVC等多端消息進(jìn)行推送服務(wù)，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

一、概述

最近項(xiàng)目確實(shí)太忙，而且身體也有點(diǎn)不舒服，慢性咽炎犯了，昨晚睡覺(jué)時(shí)喘不過(guò)氣來(lái)，一直沒(méi)休息好，也沒(méi)什么時(shí)間寫博客，今天朋友問(wèn)我什么時(shí)候能出web端的消息發(fā)送的文章時(shí)，我還在忙著改項(xiàng)目的事，趁著中午吃飯和午休的時(shí)間，趕緊補(bǔ)上之前欠下的文章。

這章主要是實(shí)現(xiàn)多端消息相互通信的簡(jiǎn)單demo，mvc的web端發(fā)送信息到control端等。

二、創(chuàng)建web客戶端

1、新建一個(gè)WebClient解決方案

2、在WebClient解決方案下新建一個(gè)名為Clinet mvc項(xiàng)目

3、根據(jù)自己實(shí)際情況選擇對(duì)應(yīng)的項(xiàng)目模板，這里為了做演示，選擇Internet應(yīng)用程序

4、在vs中打卡程序包管理器控制臺(tái)，輸入以下代碼

Install-Package Microsoft.AspNet.SignalR.JS

5、修改項(xiàng)目中Views下Homge文件夾中的Index.cshtml文件代碼，如下

@{
  Layout = null;
}

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

<select id="username" >
</select>
<br />
<br />
<input type="text" id="message" />
<input id="send" type="button" value="發(fā)送" />
<div>
  <h2 id="messgaeInfo"></h2>
</div>
<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 = 'http://localhost:10086/signalr';
    var work = $.connection.IMHub;
  
    $('#displayname').val(prompt('請(qǐng)輸入昵稱:', ''));
    $('#thisname').text('當(dāng)前用戶：' + $('#displayname').val());
    var fromUser = $('#displayname').val();

    //對(duì)應(yīng)后端的SendMessage函數(shù)，消息接收函數(shù)
    work.client.receivePrivateMessage = function (user, message) {
      //alert(message);
      $('#messgaeInfo').append(message + '</br>');
    };

    //后端SendLogin調(diào)用后，產(chǎn)生的loginUser回調(diào)
    work.client.onConnected = function (connnectId, userName, OnlineUsers) {
      reloadUser(OnlineUsers);
    };

    //hub連接開(kāi)啟
    $.connection.hub.start().done(function () {
      var username = $('#displayname').val();
      //發(fā)送上線信息
      work.server.register(username);

      //點(diǎn)擊按鈕，發(fā)送消息
      $('#send').click(function () {
        var friend = $('#username').val();
        //調(diào)用后端函數(shù)，發(fā)送指定消息
        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>

6、在運(yùn)行我們的web Client項(xiàng)目前，先運(yùn)行我們前面兩章中的serve控制臺(tái)項(xiàng)目，然后F5運(yùn)行web Client項(xiàng)目，見(jiàn)如下界面，輸入用戶名為a的用戶登錄

7、然后打開(kāi)另一個(gè)瀏覽器，如上步驟，輸入b用戶登錄，a用戶選擇下拉項(xiàng)中的b(下拉選項(xiàng)在有用戶登錄時(shí)會(huì)自動(dòng)添加新用戶進(jìn)去)，b用戶選擇a，相互之間發(fā)送一下信息進(jìn)行測(cè)試，結(jié)果如下

8、如果a、b之間消息傳送沒(méi)問(wèn)題，證明web端消息傳送成功，這個(gè)時(shí)候打開(kāi)我們前一章中的Client控制臺(tái)項(xiàng)目，運(yùn)行該項(xiàng)目下bin中的Clinet.exe，打卡兩個(gè)程序，輸入登錄名為c、b

9、用c用戶給a發(fā)送消息hello a，效果如下

10、用c用戶給b用戶發(fā)送消息hello b！效果如下，證明control端給web端發(fā)送消息成功

11、用用戶d給用戶c發(fā)送消息，如下圖，證明control端消息發(fā)送成功

12、用a給c發(fā)送消息，如下圖所示

13、用b給d發(fā)送消息，如下圖所示，證明web——>control發(fā)送消息成功

由上所示，證明以SignalR做成owin服務(wù)，是可以實(shí)現(xiàn)多端通信的，而且SignalR單獨(dú)做成通信服務(wù)可以與其他項(xiàng)目分離、解耦。

后期有時(shí)間我會(huì)繼續(xù)優(yōu)化，集成RabbitMQ等

看完上述內(nèi)容，你們掌握如何使用SignalRSelfHost+MVC等多端消息進(jìn)行推送服務(wù)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！