学习了一下SignalR 2.0,http://www.asp.net/signalr 文章写的很详细,如果头疼英文,还可以机翻成中文,虽然不是很准确,大概还是容易看明白。

理论要结合实践,自己动手做了个简单的聊天室。

   

开发环境:Win7 + Visual Studio 2012

主要步骤:

  • 添加SignalR库到你的ASP.NET web 应用.
  • 建立一个Hub类推送内容到客户端.
  • 建立一个 OWIN Startup 类来配置应用.
  • 使用SignalR jQuery库发送和显示信息.

打开vs2012,新建项目ASP.NET MVC4 Web 应用程序(选择.NET Framework 4.5),名称为MyChat

  

下一步选择 Internet 应用程序模板

  

项目建立完成后在解决方案资源管理器中,项目名称上点右键菜单中选择 管理Nuget 程序包... 打开对话框,选择联机 搜索 SignalR

返回搜索结果后 找到并下载,如果没有问题,就会安装SignalR库到你的项目,如果安装过程出现错误,可能是依赖项不符合要求。

需要跨域访问,需要同样方法下载 Microsoft.Owin.Cors 到项目

在解决方案资源管理器 新建文件夹 Hubs ,在这个文件夹上右键菜单 添加一个类文件 ChatHub.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using Microsoft.AspNet.SignalR;
  6. using System.Threading.Tasks;
  7.  
  8. namespace MyChat.Hubs
  9. {
  10. public class ChatHub : Hub
  11. {
  12. private static Dictionary<string,string> _clients = new Dictionary<string,string>(); //保存在线用户列表
  13. public Task OnConnected() //暂时无用
  14. {
  15. return base.OnConnected();
  16. }
  17.  
  18. public void Send(string name, string message) //处理发送信息
  19. {
  20. _clients[Context.ConnectionId] = name;
  21. Clients.All.addNewMessageToPage(name, message); //广播消息给所有连接到此Hub的客户端,addNewMessageToPage 是客户端定义的
  22. }
  23.  
  24. public void List() //获取在线用户列表
  25. {
  26. List<string> list = new List<string>();
  27. foreach (var k in _clients)
  28. {
  29. list.Add(k.Value);
  30. }
  31. Clients.Caller.listAll(list);//只发送给调用者, listAll 也是客户端定义的
  32. }
  33. }
  34. }

要运行起来还需要一个启动文件,在项目根目录添加一个类文件 Startup.cs ,SignalR 依赖于Owin,需要这个文件,否则会报错

  1. using Owin;
  2. using Microsoft.Owin;
  3. using Microsoft.Owin.Cors;
  4. [assembly: OwinStartup(typeof(MyChat.Startup))]
  5. namespace MyChat
  6. {
  7. public class Startup
  8. {
  9. public void Configuration(IAppBuilder app)
  10. {
  11. // Any connection or hub wire up and configuration should go here
  12. app.UseCors(CorsOptions.AllowAll); //跨域支持
  13. app.MapSignalR(); //路由映射
  14. }
  15. }
  16. }

服务端就写好了,下面开始客户端。在Controller 文件夹右键,添加一个控制器 ChatController, 并给Index 方法添加一个视图

代码如下

  1. @{
  2. ViewBag.Title = "聊天";
  3. }
  4. <h2>聊天</h2>
  5. <div class="container">
  6. <br />
  7. <div>在线:<span id="clientlist">&nbsp;</span></div>
  8. <div style="height:200px;margin-top:20px; padding:10px; border:solid 1px #ccc; overflow:auto;">
  9. <ul id="discussion">
  10. </ul>
  11. </div>
  12. <div>昵称: <input type="text" id="displayname" style="width:100px;" /> &nbsp;信息: <input type="text" id="message" style="width:200px;" />
  13. &nbsp;<input type="button" id="sendmessage" value="发送" /> <input type="button" id="getclients" value="获取列表" /></div>
  14. </div>
  15. @section scripts {
  16. <!--Script references. -->
  17. <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
  18. <!--Reference the SignalR library. -->
  19. <script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>
  20. <!--Reference the autogenerated SignalR hub script. -->
  21. <script src="~/signalr/hubs"></script>
  22. <!--SignalR script to update the chat page and send messages.-->
  23. <script>
  24. $(function () {
  25. // Reference the auto-generated proxy for the hub.
  26. var chat = $.connection.chatHub; //客户端代理,
  27. // Create a function that the hub can call back to display messages.
  28. chat.client.addNewMessageToPage = function (name, message) {
  29. // Add the message to the page.
  30. $('#discussion').append('<li><strong>' + htmlEncode(name)
  31. + '</strong>: ' + htmlEncode(message) + '</li>');
  32. }; //服务器端会调用
  33. chat.client.listAll = function (list) {
  34. var html = '';
  35. for (i = 0; i < list.length; i++) {
  36. html += list[i] + '&nbsp;';
  37. }
  38. $('#clientlist').html(html);
  39. }; //服务器端会调用
  40. // Get the user name and store it to prepend to messages.
  41. //$('#displayname').val(prompt('Enter your name:', ''));
  42. // Set initial focus to message input box.
  43. $('#message').focus();
  44. // Start the connection.
  45. $.connection.hub.start().done(function () {
  46. $('#sendmessage').click(function () {
  47. var dispname = $('#displayname').val();
  48. var message = $('#message').val();
  49. if (dispname == '') {
  50. alert('请输入昵称');
  51. return false;
  52. }
  53. if (message == '') {
  54. alert('请输入信息');
  55. return false;
  56. }
  57. // Call the Send method on the hub.
  58. chat.server.send(dispname, message );
  59. // Clear text box and reset focus for next comment.
  60. $('#message').val('').focus();
  61. });
  62. $('#getclients').click(function () {
  63. chat.server.list();
  64. });
  65. });
  66. });
  67. // This optional function html-encodes messages for display in the page.
  68. function htmlEncode(value) {
  69. var encodedValue = $('<div />').text(value).html();
  70. return encodedValue;
  71. }
  72. </script>
  73. }

$.connection.chatHub 是个客户端代理,定义在 ~/signalr/hubs 脚本文件中,火狐浏览器,查看源码,可以看到这个文件的源码。

为了方便,我们可以在布局文件中加个菜单

  1. <li>@Html.ActionLink("聊天", "Index", "Chat")</li>

至此,简单的聊天室完成了,点击运行,就可以在浏览器中查看效果,多开几个窗口,就可以互相聊天了。
代码下载 http://pan.baidu.com/s/1ePme7 (百度网盘 30M)

有时间实践一下SignalR的分组,就可以实现一对一聊天,多聊天室功能

ASP.NET Signalr 2.0 实现一个简单的聊天室的更多相关文章

  1. [SignalR]一个简单的聊天室

    原文:[SignalR]一个简单的聊天室 1.说明 开发环境:Microsoft Visual Studio 2010 以及需要安装NuGet. 2.添加SignalR所需要的类库以及脚本文件: 3. ...

  2. 基于websocket实现的一个简单的聊天室

    本文是基于websocket写的一个简单的聊天室的例子,可以实现简单的群聊和私聊.是基于websocket的注解方式编写的.(有一个小的缺陷,如果用户名是中文,会乱码,不知如何处理,如有人知道,请告知 ...

  3. 用ServletContext做一个简单的聊天室

    这里主要是ServletContext的一个特性:ServletContext是一个公共的空间,可以被所有的客户访问.由此可见ServletContext比cookie和session的作用范围要大[ ...

  4. 使用ASP.NET SignalR实现一个简单的聊天室

    前言 距离我写上一篇博客已经又过了一年半载了,时间过得很快,一眨眼,就把人变得沧桑了许多.青春是短暂的,知识是无限的.要用短暂的青春,去学无穷无尽的知识,及时当勉励,岁月不待人.今天写个随笔小结记录一 ...

  5. WebSocket介绍和一个简单的聊天室

    WebSocket是什么呢? WebSocket一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范, ...

  6. 如何用WebSocket实现一个简单的聊天室以及单聊功能

    百度百科中这样定义WebSocket:WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.简单的说,We ...

  7. node实现一个简单的聊天室(认识一下socket)

    边学边理解node的高深,今天写了一个聊天室的demo,很简单,认识一下socket node服务端代码 var express = require('express'); var app = exp ...

  8. 利用JavaUDPSocket+多线程模拟实现一个简单的聊天室程序

    对Socket的一点个人理解:Socket原意是指插座.家家户户都有五花八门的家用电器,但它们共用统一制式的插座.这样做的好处就是将所有家用电器的通电方式统一化,不需要大费周章地在墙壁上凿洞并专门接电 ...

  9. 通过WebSocket实现一个简单的聊天室功能

    WebSocket WebSocket是一个协议,它是是基于TCP的一种新的网络协议,TCP协议是一种持续性的协议,和HTTP不同的是,它可以在服务器端主动向客户端推送消息.通过这个协议,可以在建立一 ...

随机推荐

  1. 关于vi不正常退出产生的swp文件

    关于vi不正常退出产生的swp文件   非正常关闭vi编辑器时会生成一个.swp文件 关于swp文件 使用vi,经常可以看到swp这个文件,那这个文件是怎么产生的呢,当你打开一个文件,vi就会生成这么 ...

  2. maven ClassNotFoundException: org.springframework.web.context.ContextLoader

    信息: Starting Servlet Engine: Apache Tomcat/6.0.32 2012-3-31 9:39:40 org.apache.catalina.core.Standar ...

  3. 使导出excle文档实现ALT+Enter的效果()

    JAVA中输入什么转义字符,使导出excle文档实现ALT+Enter的效果?或者有没有其他方法可以实现. 20 JAVA中输入什么转义字符,使导出excle文档实现ALT+Enter的效果?或者有没 ...

  4. onclick事件

    onclick = "func(this);"----------->传递element对象 onclick = "func(event);"------ ...

  5. USBASP下载线制作教程

  6. 三星S5360(GALAXY Y)首次刷机尝试~

    刷机包下载: http://www.romjd.com/Device/samsung-s5360 http://www.shuaji.com/rom/2033.htm#down http://www. ...

  7. WPF笔记(2.3 StackPanel)——Layout

    原文:WPF笔记(2.3 StackPanel)--Layout StackPanel用于小规模的排版布局,比如说一个局部下几个textbox和Button啦.Orientation属性有Vertic ...

  8. iOS开发之property属性介绍

    大家都知道@property和@synthesize可以自动生成某个类成员变量的存取方法,但可能对property中的一些属性不是很了解,网上的一些介绍有的不是很正确,感觉会误导新手,于是准备详细介绍 ...

  9. Linux下程序崩溃,ulimit,coredump,gdbserver

    操作系统:Ubuntu10.04 前言:    在程序崩溃后,如何快速定位问题.    以下方法适用于开发调试阶段,不太适用成品.    本文着眼于嵌入式,PC方面更简单.    核心:gdbserv ...

  10. Eclipse总是自动关闭

    -Dosgi.requiredJavaVersion=1.5把INI文件中的这一行删除掉,貌似这样以后模拟器也没再出现timeout的问题了,O(∩_∩)O哈哈~