asp.net mvc中怎么实现实时消息推送功能

发布时间：2021-07-16 15:23:19 作者：Leah
来源：亿速云阅读：145

asp.net mvc中怎么实现实时消息推送功能，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

一般VS没有自带SignalR类，需要我们在开始任务之前去添加这个功能。选择VS的工具|Nuget包管理器|Nuget包管理器控制台|Install-Package Microsoft.Aspnet.SignalR去安装SignalR。安装完成后，1、我们在改项目中新建一个文件夹为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);
   //用户调用客户端的函数
  }
 }
}

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();
   //服务器的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>
 @* 呈现消息 *@
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="jumbotron">
    <ul id="message_box"></ul>
   </div>
   发送者名称:<input id="text_name" class="form-control" /><br />
   消息内容:
   <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>
 @* 上述引入的两个文件的顺序不以交换，因为下面这个文件依赖于上面那个文件 *@
 <script src="~/signalr/hubs"></script>
 <!-- 本地没有，动态生成 -->
 <script>
  $(function () {
   var $messageBox = $('#message_box');
   var $textMessage = $('#text_message');
   var $textName = $('#text_name');
   //客户端先与服务器连接起来，拿到服务器的代理操作对象
   var hubConnection = $.connection.chatHub;
   //注册客户端函数
    hubConnection.client.receiveMessage = function (name, message) {
    $messageBox.append('<li><b>' + name + '</b> say:' + message + '</li>')
   }

   //启动连接到服务器
   $.connection.hub.start().done(function () {
    $('#btn_send').bind('click', function () {
     //调用服务端的函数
     hubConnection.server.sendMessage($textName.val(), $textMessage.val());
    });
   });
  });
 </script>
</body>
</html>

如果直接复制使用。要注意前台的代码引入的文件的目录及版本。前台代码的命名的首字母最好使用小写，后台代码的首字母最好使用大写。因为js默认使用的是驼峰命名法，C Sharp使用帕斯卡命名方式。如果没有注重这个细节就会很容易出错。因为后台代码在执行的时候会动态的生成一些JS代码,JS代码的默认使用的驼峰命名法。如果你在前台的代码用了帕斯卡命名方式就很容易出错了。并且还不好找。我是有过亲身经历的。

下面我们在本地测试下：分别使用FireFox和Chrome来模拟两个客户端，当然自身的电脑也就服务端。效果图如下：

asp.net mvc中怎么实现实时消息推送功能

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。

asp.net mvc中怎么实现实时消息推送功能

相关阅读