您的位置：首页 > 其它

用SignalR实现实时查看WebAPI请求日志

2016-04-25 11:10 405 查看

实现的原理比较直接，定义一个MessageHandler记录WebAPI的请求记录，然后将这些请求日志推送到客户端，客户端就是一个查看日志的页面，实时将请求日志展示在页面中。

这个例子的目的是演示如何在PersistentConnection类外部给Clients推送消息

<!DOCTYPE html>
<html>
<head>
<title>Web API页面实时请求监控</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Web API Request Logs</h1>
<div>
<input type="button" value="start" id="btnStart"/>
<input type="button" value="stop" id="btnStop"/>
<input type="button" value="clear" id="btnClear"/>
</div>
<ul id="requests"></ul>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script>
$(function () {
var requests = $("#requests");
var startButton = $("#btnStart");
var stopButton = $("#btnStop");
var connection = null;

enable(stopButton, false);
enable(startButton, true);

startButton.click(function () {
startConnection();
enable(stopButton, true);
enable(startButton, false);
});

$("#btnClear").click(function () {
$("#requests").children().remove();
});

stopButton.click(function () {
stopConnection();
enable(stopButton, false);
enable(startButton, true);
});

function startConnection() {
stopConnection();
connection = $.connection("/monitor");
connection.start()
.fail(function () {
console.log("connect failed");
});
connection.received(function (data) {
data = data.replace(/\r\n/g, "<br/>")
data = data.replace(/\n/g, "<br/>");
requests.append("<li>" + data + "</li>");
});
}

function stopConnection() {
if (connection != null){
connection.stop();
}
}

function enable(button, enabled) {
if (enabled) {
button.removeAttr("disabled");
}
else {
button.attr("disabled", "disabled");
}
}
});
</script>
</body>
</html>

Monitor
示例代码下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航