asp.net mvc中怎么實(shí)現(xiàn)實(shí)時消息推送功能

發(fā)布時間：2021-07-16 15:23:19 來源：億速云閱讀：132 作者：Leah 欄目：開發(fā)技術(shù)

asp.net mvc中怎么實(shí)現(xiàn)實(shí)時消息推送功能，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

1、環(huán)境：win 10+VS2015 社區(qū)版
我使用asp.net mvc。首先打開VS 2015|文件|新建|項(xiàng)目（SignalRMvc）|asp.net Web應(yīng)用程序|空模板，MVC，平臺大概就是這樣了。
現(xiàn)在說下具體需要包含的文件吧。
1）、SignalR集線器類。用于寫一個訪求調(diào)用客戶段的函數(shù)。
2）、OWIN類。用于注冊服務(wù)器的函數(shù)。
3）、前臺的頁面(包括前臺的消息框的編寫，函數(shù)的編寫)當(dāng)然前臺需要一些文件。

一般VS沒有自帶SignalR類，需要我們在開始任務(wù)之前去添加這個功能。選擇VS的工具|Nuget包管理器|Nuget包管理器控制臺|Install-Package Microsoft.Aspnet.SignalR去安裝SignalR。安裝完成后，1、我們在改項(xiàng)目中新建一個文件夾為ChatHubs|新建一個SignalR集線器類，并寫上如下代碼：

using Microsoft.AspNet.SignalR;

namespace SignalRMvc.ChatHubs
{
 public class ChatHub : Hub
 {
  public void SendMessage(string name,string message)
  {
   // Clients.All.hello();
   Clients.All.receiveMessage(name, message);
   //用戶調(diào)用客戶端的函數(shù)
  }
 }
}

2、在ChatHubs文件夾下新建一個OWIN類。并寫上如下代碼：

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRMvc.ChatHubs.Startup))]

namespace SignalRMvc.ChatHubs
{
 public class Startup
 {
  public void Configuration(IAppBuilder app)
  {
   app.MapSignalR();
   //服務(wù)器的hub注冊
  }
 }
}

3、在Controllers新建一個Home控制器。并寫上如下代碼：

using System.Web.Mvc;

namespace SignalRMvc.Controllers
{
 public class HomeController : Controller
 {
  // GET: Home
  public ActionResult ClientChat()
  {
   return View();
  }
 }
}

4、在控制器的方法上右擊添加視圖(不使用模板，也不使用布局頁)后。并寫上如下代碼:

@{
 Layout = null;
}

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <meta charset="utf-8" />
 <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
 @* BootStarp的引入*@
 <style>
  #message_box {
   height: 400px;
   overflow-y: scroll;
  }
 </style>
 @* 呈現(xiàn)消息 *@
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="jumbotron">
    <ul id="message_box"></ul>
   </div>
   發(fā)送者名稱:<input id="text_name" class="form-control" /><br />
   消息內(nèi)容:
   <textarea id="text_message" class="form-control" rows="3"></textarea>
   <br />
   <button id="btn_send" class="btn btn-block btn-success">Send</button>
  </div>
 </div>

 <script src="~/scripts/jquery-3.1.0.min.js"></script>
 <script src="~/scripts/jquery.signalR-2.2.1.min.js"></script>
 @* 上述引入的兩個文件的順序不以交換，因?yàn)橄旅孢@個文件依賴于上面那個文件 *@
 <script src="~/signalr/hubs"></script>
 <!-- 本地沒有，動態(tài)生成 -->
 <script>
  $(function () {
   var $messageBox = $('#message_box');
   var $textMessage = $('#text_message');
   var $textName = $('#text_name');
   //客戶端先與服務(wù)器連接起來，拿到服務(wù)器的代理操作對象
   var hubConnection = $.connection.chatHub;
   //注冊客戶端函數(shù)
    hubConnection.client.receiveMessage = function (name, message) {
    $messageBox.append('<li><b>' + name + '</b> say:' + message + '</li>')
   }

   //啟動連接到服務(wù)器
   $.connection.hub.start().done(function () {
    $('#btn_send').bind('click', function () {
     //調(diào)用服務(wù)端的函數(shù)
     hubConnection.server.sendMessage($textName.val(), $textMessage.val());
    });
   });
  });
 </script>
</body>
</html>

如果直接復(fù)制使用。要注意前臺的代碼引入的文件的目錄及版本。前臺代碼的命名的首字母最好使用小寫，后臺代碼的首字母最好使用大寫。因?yàn)閖s默認(rèn)使用的是駝峰命名法，C Sharp使用帕斯卡命名方式。如果沒有注重這個細(xì)節(jié)就會很容易出錯。因?yàn)楹笈_代碼在執(zhí)行的時候會動態(tài)的生成一些JS代碼,JS代碼的默認(rèn)使用的駝峰命名法。如果你在前臺的代碼用了帕斯卡命名方式就很容易出錯了。并且還不好找。我是有過親身經(jīng)歷的。

下面我們在本地測試下：分別使用FireFox和Chrome來模擬兩個客戶端，當(dāng)然自身的電腦也就服務(wù)端。效果圖如下：

asp.net mvc中怎么實(shí)現(xiàn)實(shí)時消息推送功能

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

asp.net mvc中怎么實(shí)現(xiàn)實(shí)時消息推送功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽