使用SignalR建一个简单的web聊天Demos

来源：互联网发布：win10获取权限软件编辑：程序博客网时间：2024/05/23 17:44

ASP .NET SignalR 是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。WebSockets是HTML5提供的新的API，可以在Web网页与服务器端间建立Socket连接，当WebSockets可用时（即浏览器支持Html5）SignalR使用WebSockets，当不支持时SignalR将使用其它技术来保证达到相同效果。SignalR当然也提供了非常简单易用的高阶API，使服务器端可以单个或批量调用客户端上的JavaScript函数，并且非常方便地进行连接管理，例如客户端连接到服务器端，或断开连接，客户端分组，以及客户端授权，使用SignalR都非常容易实现。SignalR 将与客户端进行实时通信带给了ASP .NET 。当然这样既好用，而且也有足够的扩展性。以前用户需要刷新页面或使用Ajax轮询才能实现的实时显示数据，现在只要使用SignalR，就可以简单实现了。最重要的是您无需重新建立项目，使用现有ASP .NET项目即可无缝使用SignalR。

1.说明：
开发环境：Microsoft Visual Studio 2010

2.添加SignalR所需要的类库：

3.首先新建一个Hub类，内有一个方法能够被脚本调用到：

4.注册Hub脚本缓存路径，在全局应用程序里面

5.前台页面实现逻辑

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Css/common.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Css/index.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/JavaScript/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/JavaScript/SignalR/jquery.signalR-1.1.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//设置高度
var msgListH = window.innerHeight - 150;
$(".messageList").height(msgListH);
$('#messageBox').keypress(function (e) {
var key = e.keyCode;
if (key == 13) {
sendMsg();
}
});
});

var chat = $.connection.chatHub;
chat.client.SentMsgToPages = function (name, message) {
// Add the message to the page.
$('#msgUl').append('<li><strong>' + name
+ '</strong>: ' + message + '</li>');
};
function sendMsg() {
var userName = $("#userName").val();
if (!userName) {
$(".alert").show();
return;
}
var msg = $('#messageBox').val();
if (msg) {
chat.server.send(userName, msg);
$('#messageBox').val('').focus();
}
};
$.connection.hub.start().done(function () {
//设置按钮事件
$("#btnSent").click(
sendMsg
);
$("#userName").focus(
function () {
$(".alert").hide();
});
});
</script>
</head>
<body>
<h2>SignalR Chat Room</h2>
<div style="width: 99%;margin: 4px" id="outBoard" >
<div class="messageList" >
<ul id="msgUl" class="unstyled">

</ul>
</div>
<div class="form-inline">
<input type="text" id="userName" placeholder="昵称" class="input-mini" />
<input type="text" id="messageBox" class="input-xxlarge"/>
<input type="submit" value="发送" class="btn btn-info" id="btnSent" />

</div>
<div class="alert" style="display: none; width: 100px">
必须输入昵称！
</div>
</div>
</body>
</html>

var chat = $.connection.chatHub;
客户端跟服务端建立连接。
chat.client.SentMsgToPages = function (name, message) { };
这就是服务端回调客户端的方法，给SentMsgToPages实现一个function表示如何处理返回值，这里当然是把message添加到聊天记录列表里。
chat.server.send(userName, msg);
客户端通过chat对象调用服务端的send方法，把数据传回到服务器。

0 0