WebAPI+SignalR实现实时日志监测
2017-05-17 00:56
671 查看
在最近的一篇博文中描述了使用NLog记录WebAPI的调用日志,但是也发现在实际使用中由诸多不便。日志只有在生成后才能查看,能否在接口调用的同时就看到呢?结合使用SignalR可以实现这种可能。
本文会在之前的两篇文章基础上进行讲解:
WebAPI+NLog实现日志输出
WebAPI集成SignalR
添加我们的日志广播通道LogTracer.cs,并继承于PersistentConnection:
这个类不需要添加任何代码,要做的仅仅是在Startup类中对它进行配置。
这样一条专为日志广播的通道就建好了。
在AppLog中引入上一步创建的持久连接:
在日志内容被写入文件之前,将其通过持久连接广播出去(添加在函数Log中):
在项目中添加一个MVC控制器LogController,同时在Views目录下会创建Log目录以及Index.cshtml。
为Index.cshtml添加js引用:
定义持久连接代理以及连接、断开的方法:
页面全部代码如下:
另外又增加了一个历史日志的查询界面(日志文件保存在指定目录下,读取文件内容展示在界面上即可),效果如下:
通过这次思考及实现,发现将不同的技术点融合后会有许多不错的结果,期待后面能发现更多有趣的事情。
本文会在之前的两篇文章基础上进行讲解:
WebAPI+NLog实现日志输出
WebAPI集成SignalR
思路
第三方程序调用API接口时会触发日志跟踪,如果在此时将日志内容通过SignalR广播出去,并由一个Web页面接收显示,那么就能实现接口调用的实时监听。实现
改造SignalR
首先我们希望能够为日志监听单独开辟一条“通道”,以便不受到其他通道的影响。同时考虑到日志消息的发送是“广播”,与Client无关,所以采用持久连接PersistentConnection来做这件事情。添加我们的日志广播通道LogTracer.cs,并继承于PersistentConnection:
public class LogTracer : PersistentConnection { //protected override Task OnConnected(IRequest request, string connectionId) //{ // return Connection.Send(connectionId, "Welcome!"); //} //protected override Task OnReceived(IRequest request, string connectionId, string data) //{ // return Connection.Broadcast(data); //} }
这个类不需要添加任何代码,要做的仅仅是在Startup类中对它进行配置。
这样一条专为日志广播的通道就建好了。
改造NLog日志类
在之前的文章WebAPI+NLog实现接口日志输出中,日志的写入是在AppLog类中完成的,我们只需要在日志写入前或写入后将日志内容广播出去就行了。在AppLog中引入上一步创建的持久连接:
//持久连接--日志监听 private static IPersistentConnectionContext connectContext = GlobalHost.ConnectionManager.GetConnectionContext<Hubs.LogTracer>();
在日志内容被写入文件之前,将其通过持久连接广播出去(添加在函数Log中):
页面展示
显示实时日志的页面实质上就是SignalR的Web客户端。在项目中添加一个MVC控制器LogController,同时在Views目录下会创建Log目录以及Index.cshtml。
为Index.cshtml添加js引用:
<script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.signalR-2.2.1.js"></script>
定义持久连接代理以及连接、断开的方法:
var listener = $.connection('/LogTracer'); //开启连接 function startConnection() { //stopConnection(); listener.start().fail(function () { $('#_messageList').append('<li>监听启动失败!</li>'); }).done(function () { $('#_messageList').append('<li>监听已启动...</li>'); }); listener.received(function (message) { $('#_messageList').append('<li>' + message + '</li>'); }); } //断开连接 function stopConnection() { if(listener!=null){ listener.stop(); } };
页面全部代码如下:
@{ ViewBag.Title = "系统日志"; } <h2>实时日志</h2> <p> @Html.ActionLink("历史日志","History") </p> <div> <input type="button" id="_start" value="开始监听" /> <input type="button" id="_stop" value="停止监听" /> <input type="button" id="_clear" value="清空记录" /> </div> <div> <ul id="_messageList"></ul> </div> @section scripts{ <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.signalR-2.2.1.js"></script> <script> //隐藏 $("#tbLog").hide(); $(function () { var startBtn = $('#_start'); var stopBtn = $('#_stop'); var listener = $.connection('/LogTracer'); enable(stopBtn, false); enable(startBtn, true); //启动 startBtn.click(function () { startConnection(); enable(stopBtn, true); enable(startBtn, false); }); //停止 stopBtn.click(function () { stopConnection(); enable(startBtn, true); enable(stopBtn, false); $('#_messageList').append('<li>监听已停止...</li>'); }); //清空列表 $('#_clear').click(function () { $('#_messageList').children().remove(); }); //开启连接 function startConnection() { //stopConnection(); listener.start().fail(function () { $('#_messageList').append('<li>监听启动失败!</li>'); }).done(function () { $('#_messageList').append('<li>监听已启动...</li>'); }); listener.received(function (message) { $('#_messageList').append('<li>' + message + '</li>'); }); } //断开连接 function stopConnection() { if(listener!=null){ listener.stop(); } }; //按钮切换 function enable(button,enabled) { if (enabled) { button.removeAttr("disabled"); } else { button.attr("disabled", "disabled"); } } }); </script> }
效果
完成上述改造后,运行项目,在系统日志页面启动日志监听,当API接口被调用时,就可以实时监测了。效果如下:另外又增加了一个历史日志的查询界面(日志文件保存在指定目录下,读取文件内容展示在界面上即可),效果如下:
通过这次思考及实现,发现将不同的技术点融合后会有许多不错的结果,期待后面能发现更多有趣的事情。
相关文章推荐
- Java用WebSocket + tail命令实现Web实时日志
- Java用webSocket实现tomcat的日志实时输出到web页面
- Java用WebSocket + tail命令实现Web实时日志(转)
- [Asp.net]SignalR实现实时日志监控
- WebAPI+NLog实现接口调用日志输出
- Java用webSocket实现tomcat的日志实时输出到web页面
- Java用webSocket实现tomcat的日志实时输出到web页面
- [Asp.net]SignalR实现实时日志监控
- SignalR SelfHost实时消息,集成到web中,实现服务器消息推送
- 基于https实现webSocket通信实时在web页面输出日志(两个日志输出)
- Java用webSocket实现tomcat的日志实时输出到web页面
- java用webSocket实现tomcat的日志实时输出到web页面______软件开发-JAVA
- SignalR实现实时日志监控
- SignalR 实现 Web 客户端与服务器实时通信
- Java用webSocket实现tomcat的日志实时输出到web页面
- SignalR SelfHost实时消息,集成到web中,实现服务器消息推送
- 融合SignalR的OPCClient实现环境参数实时监测
- SqlDependency 与 SignalR 实现Web页面的数据实时刷新
- Java用WebSocket + tail命令实现Web实时日志
- python实现websocket服务器,可以在web实时显示远程服务器日志