在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
之前的文章介绍过Asp.net SignalR, ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信. 今天我们来实现服务端消息推送到Web端, 首先回顾一下它抽象层次图是这样的:
上面的javascript代码与服务端有通信, 具体看如下图: 在Index.cshtml, 我们需要引用SignalR客户端JS, 放置hubs, 这里我们使用了jsrender, easyui.js 来呈现推送的消息. @model dynamic @section Scripts { <link href="/Content/themes/default/window.css" rel="stylesheet" /> <link href="~/Content/themes/default/progressbar.css" rel="stylesheet" /> <link href="~/Content/themes/default/linkbutton.css" rel="stylesheet" /> <script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script> <!--Reference the autogenerated SignalR hub script. --> <script src="~/signalr/hubs"></script>
<script src="~/Scripts/jsrender.js"></script>
<script src="~/Scripts/jquery.easyui.min-1.4.1.js"></script>
@Scripts.Render("~/Scripts/project.js")
<script type="text/javascript">
$(document).ready(function () {
var app = new App(); }); </script> } <div class="row-fluid"> <div class="span8"> <div class="widget"> <div class="widget-header"> <h2>Feed</h2> </div> <div class="widget-content"> <ul class="span12 feed-list"></ul> </div> </div> </div> </div> <script class="chat-template" type="text/x-jquery-tmpl"> <li> <p>{{>Message}}</p> </li> </script> <script class="feed-template" type="text/x-jquery-tmpl"> <li data-id="{{>Id}}">
<div class="row-fluid"> <div class="span8"> <h3>{{>MSG_CONTENT}}</h3> </div> </div> </li> </script> 上代码服务端引用js的Script.Render, 需要在BundleConfig.cs中加入以下代码: bundles.Add(new ScriptBundle("~/Scripts/project.js") .IncludeDirectory("~/Scripts/Project", "*.js", false)); 同时我们构建一个WebAPI来发送需要推送的消息, 片断代码: /// <summary>
/// SendMessage
/// </summary>
/// <param name="messagemodel">The messagemodel.</param>
/// <returns></returns>
[HttpPost] public IHttpActionResult SendMessage(PushMessageModel messagemodel)
{ return SendToServer(messagemodel);
} /// <summary>
/// Sends to server.
/// </summary>
/// <param name="messagemodel">The messagemodel.</param>
/// <returns></returns>
private IHttpActionResult SendToServer(PushMessageModel messagemodel)
{ if (ModelState.IsValid)
{ if (messageRepository.SendMessage(messagemodel))
{ log.Debug("发送成功!");
return Ok();
} else
{ log.ErrorFormat("发送失败!{0}", messagemodel);
return Content(HttpStatusCode.ExpectationFailed, new Exception("send message error")); } } else
{ log.ErrorFormat("参数验证失败!{0}", messagemodel);
return Content(HttpStatusCode.BadRequest, ModelState);
} } 发送消息到ActiveMQ的关键代码: public class MessageRepository:IMessageRepository { private static ILogger log = new Logger("MessageRepository"); /// <summary>
/// 发送消息
/// </summary>
/// <param name="messagemodel"></param>
/// <returns></returns>
public bool SendMessage(PushMessageModel messagemodel) { var activemq = new ActiveMQAdapter<PushMessageModel>(MQConfig.MQIpAddress, MQConfig.QueueDestination);
return activemq.SendMessage<PushMessageModel>(messagemodel)>0;
} }
如果您需要运行DEMO程序,需要构建基于ActiveMQ的消息队列, 运行效果是这样的, 我们在一个静态html中, 发送一个ajax到webapi服务端, 发送后 另一个website网站收到后, 列表更新, 并在右下角弹出框 IE的控制台输出: HTML1300: Navigation occurred.
上面粗体是 最后我们发的第5条信息控制台的输出.
好了,到这儿, 由于篇幅有限, 示例代码没有全部展示, 可以在这儿下载, 需要安装ActiveMQ
希望对您开发实时Web App有帮助. 你可能感兴趣的文章: 如有想了解更多软件,系统 IT,企业信息化 资讯,请关注我的微信订阅号:
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论