< 返回技术文档列表

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

发布时间:2021-09-01 03:45:23⊙投诉举报

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

1、环境:win 10+VS2015 社区版
我使用asp.net mvc。首先打开VS 2015|文件|新建|项目(SignalRMvc)|asp.net Web应用程序|空模板,MVC,平台大概就是这样了。
现在说下具体需要包含的文件吧。
1)、SignalR集线器类。用于写一个访求调用客户段的函数。
2)、OWIN类。用于注册服务器的函数。
3)、前台的页面(包括前台的消息框的编写,函数的编写)当然前台需要一些文件。 

一般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中怎么实现实时消息推送功能

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


/template/Home/Zkeys/PC/Static