准备：

开发工具：visual studio 2013

使用框架：SignalR、Jquery

正文

概述

基于ASP.NET web 应用程序创建并引用SignalR 和JQuery框架简单实现文字聊天


开发任务：

A、创建一个空的ASP.NET web 项目

B、引用SignalR 和Jquery框架

C、创建一个集线器类，以将内容推送到客户端。

D、创建一个OWIN Startup类，配置启动。

E、在Web中使用SignalR jQuery实现消息的收发。



效果图展示：


开发步骤

1、在 Visual Studio 中创建一个 ASP.NET Web 应用程序。

2、在解决方案资源管理器中，右键单击项目，选择添加|那么 SignalR 集线器类 (v2)。命名ChatHub.cs类并将其添加到该项目。此步骤将创建ChatHub类，并向项目中添加一组脚本文件和支持那么 SignalR 的程序集引用。

3、将ChatHub类替换如下：

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingMicrosoft.AspNet.SignalR;namespaceSignalRChatDemo{publicclassChatHub:Hub{///<summary>///发送消息///</summary>///<paramname="name">姓名</param>///<paramname="message">消息内容</param>publicvoidSend(stringname,stringmessage){//回调客户端方法CallMessage通知客户端Clients.All.CallMessage(name,message);}}}

4、在解决方案资源管理器中，右键单击该项目，然后单击添加OWIN Startup启动类。Startup新类的名称并单击确定。

注：如果您使用的 Visual Studio 2012，OWIN Startup启动类模板将不可用。您可以添加一个名为Startup相反的普通类。

5、更改为以下内容的新的启动类。

usingSystem;usingSystem.Threading.Tasks;usingMicrosoft.Owin;usingOwin;[assembly:OwinStartup(typeof(SignalRChatDemo.Startup))]namespaceSignalRChatDemo{publicclassStartup{publicvoidConfiguration(IAppBuilderapp){//有关如何配置应用程序的详细信息，请访问http://go.microsoft.com/fwlink/?LinkID=316888app.MapSignalR();}}}

6、引用SignalR 和Jquery框架

在NuGet管理中输入JqueryUI ,安装JQuery UI库，如下图：

安装完成后可以看到我们需要的两个框架库了，如下图：

7、编写Web页面，实现聊天

<!DOCTYPEhtml><html><head><title>SignalRSimpleChat</title><styletype="text/css">.container{background-color:#07325e;border:thicksolid#808080;padding:20px;margin:20px;}body{color:white;}</style></head><body><divclass="container"><inputtype="text"id="message"/><inputtype="button"id="sendmessage"value="发送"/><inputtype="hidden"id="name"/><ulid="msgList"></ul></div><scriptsrc="Scripts/jquery-1.10.2.min.js"></script><scriptsrc="Scripts/jquery.signalR-2.1.2.min.js"></script><scriptsrc="signalr/hubs"></script><scripttype="text/javascript">$(function(){//定义一个代理并引用Hub。注意：JS需要使用驼峰式大小写varchat=$.connection.chatHub;//创建一个客户端方法，C#ChatHub类中的方法需要和客户端方法保持一致，C#ChatHub类才能调用到客户端方法chat.client.CallMessage=function(name,message){//对HTML进行编码.varencodedName=$('<div/>').text(name).html();varencodedMsg=$('<div/>').text(message).html();$('#msgList').append('<li><B>'+encodedName+'</B>:&nbsp;&nbsp;'+encodedMsg+'</li>');};//输入需要在客户端显示的用户名$('#name').val(prompt('亲输入的您的姓名:',''));$('#message').focus();//启动一个连接$.connection.hub.start().done(function(){$('#sendmessage').click(function(){//回调服务的的send方法并传入参数chat.server.send($('#name').val(),$('#message').val());$('#message').val('').focus();});});});</script></body></html>

×××