SignalR Self Host+MVC等多端消息推送服務（三）

更新時間：2017年06月27日 17:24:46 作者：landonzeng

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

一、概述

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

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

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

1、新建一個WebClient解決方案

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

3、根據(jù)自己實際情況選擇對應的項目模板，這里為了做演示，選擇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="發(fā)送" />
<div>
  <h1 id="messgaeInfo"></h1>
</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('請輸入昵稱:', ''));
    $('#thisname').text('當前用戶：' + $('#displayname').val());
    var fromUser = $('#displayname').val();

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

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

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

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