学习了一下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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks; namespace MyChat.Hubs
{
public class ChatHub : Hub
{
private static Dictionary<string,string> _clients = new Dictionary<string,string>(); //保存在线用户列表
public Task OnConnected() //暂时无用
{
return base.OnConnected();
} public void Send(string name, string message) //处理发送信息
{
_clients[Context.ConnectionId] = name;
Clients.All.addNewMessageToPage(name, message); //广播消息给所有连接到此Hub的客户端,addNewMessageToPage 是客户端定义的
} public void List() //获取在线用户列表
{
List<string> list = new List<string>();
foreach (var k in _clients)
{
list.Add(k.Value);
}
Clients.Caller.listAll(list);//只发送给调用者, listAll 也是客户端定义的
}
}
}

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

using Owin;
using Microsoft.Owin;
using Microsoft.Owin.Cors;
[assembly: OwinStartup(typeof(MyChat.Startup))]
namespace MyChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// Any connection or hub wire up and configuration should go here
app.UseCors(CorsOptions.AllowAll); //跨域支持
app.MapSignalR(); //路由映射
}
}
}

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

代码如下

@{
ViewBag.Title = "聊天";
}
<h2>聊天</h2>
<div class="container">
<br />
<div>在线:<span id="clientlist">&nbsp;</span></div>
<div style="height:200px;margin-top:20px; padding:10px; border:solid 1px #ccc; overflow:auto;">
<ul id="discussion">
</ul>
</div>
<div>昵称: <input type="text" id="displayname" style="width:100px;" /> &nbsp;信息: <input type="text" id="message" style="width:200px;" />
&nbsp;<input type="button" id="sendmessage" value="发送" /> <input type="button" id="getclients" value="获取列表" /></div>
</div>
@section scripts {
<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script>
$(function () {
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub; //客户端代理,
// Create a function that the hub can call back to display messages.
chat.client.addNewMessageToPage = function (name, message) {
// Add the message to the page.
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
}; //服务器端会调用
chat.client.listAll = function (list) {
var html = '';
for (i = 0; i < list.length; i++) {
html += list[i] + '&nbsp;';
}
$('#clientlist').html(html);
}; //服务器端会调用
// Get the user name and store it to prepend to messages.
//$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
var dispname = $('#displayname').val();
var message = $('#message').val();
if (dispname == '') {
alert('请输入昵称');
return false;
}
if (message == '') {
alert('请输入信息');
return false;
}
// Call the Send method on the hub.
chat.server.send(dispname, message );
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
$('#getclients').click(function () {
chat.server.list();
});
});
});
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}

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

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

<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. js转换ascii编码如中文友转换为编码友;可防止乱码

  2. .net中用到的一些方法

    //文件操作string fullDirPath = Utils.GetMapPath(string.Format("/aspx/{0}/", buildPath)); Direc ...

  3. xml入门简介--两天学会xml

    前言 在很久以前,笔者曾见到过1000+页的xml书,里面还有n多的概念,XSL,Xquery,让人头痛.无奈最近需要用到,所以在w3c恶补了一下.以下大致整理了一下相关概念,但是对XSL等派生语言没 ...

  4. Silverlight调用网站项目的Session

    项目中遇到Silverlight调网站Session的问题了,试了几种方法,用这种方法获取到了,如果有不对不恰当的地方,还望各路大神给指正出来. 解决方法: 1.Silverlight调用网站的接口 ...

  5. C#winform修改IP,dns

     /// 将IP,DNS设置为自动获取        ///        private void setDHCP()        {            string  _doscmd = & ...

  6. $.getJson()和$.ajax()同步处理

    一.前言 为什么需要用到同步,因为有时候我们给一个提交按钮注册提交表单数据的时候,在提交动作之前会进行一系列的异步ajax请求操作,但是页面js代码会按顺序从上往下面执行,如果你在这过程中进行了异步操 ...

  7. fitness

    大家一定要小心那些有6块腹肌的男人和永远保持好身材的女人 这些人拥有你所想不到的决心和意志力 还要小心那些冬天里 能唰的一下起床的人 他们什么事都能干的.

  8. php 数组Array 删除指定键名值

    if(array_key_exists('keyname',$array)){ //检查数组中此键名是否存在: unset($array['keyname']); //删除后位置仍然保留,但清空了键名 ...

  9. PHP 中 AJAX 中文乱码解决

    最近,在用PHP做一个AJAX功能时,出现了中文乱码.在网上搜索了一上,很多是有说不过试过都不行,我页面的的编码是UTF-8的,MYSQL中也是UTF-8的.以前在.NET中也遇到这样的问题,但只是在 ...

  10. Python爬虫学习:四、headers和data的获取

    之前在学习爬虫时,偶尔会遇到一些问题是有些网站需要登录后才能爬取内容,有的网站会识别是否是由浏览器发出的请求. 一.headers的获取 就以博客园的首页为例:http://www.cnblogs.c ...