一、前言

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。
 
这博文主要为了提高大家的实战应用,有关原理方面了解可以参考:
http://blog.darkthread.net/post-2013-12-03-inside-signalr-transport.aspx

http://blog.jobbole.com/82746/

二、干货实战开始

在vs2013开发环境

1.创建ASP.NET空Web应用程序项目

2.右击SignalRTest项目添加新项,选择SignalR集线器(v2),并命名集线器名字为TestHub.cs

然后项目自动生成了Scripts文件夹和文件,下面的jquery-1.10.2.js和jquery.signalR-2.0.0.js比较重要的两个js库

3.还要添加一个OWIN Startup类

4.修改TestStartup里面代码,注册管道虚拟地址,为的是前端添加一个引用需要用到的配置地址,现在透露一些信息吧。就是这个<script src="signalr/hubs"></script>。这个文件是运行动态生成的,我们新建项目是看不到的,按照配置好路径就对了!

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRTest.TestStartup))]

namespace SignalRTest
{
    public class TestStartup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888

            //添加如下代码
            //注册管道,使用默认的虚拟地址,根目录下的"/signalr",当然你也可以自己定义
            app.MapSignalR();
        }
    }
}

5.在刚才新建的集线器里面就可以自己去写方法了,在方法体里可以通过 Clients.All.XXXXX  调用前端注册的js方法,实现了服务端调用客户端。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace SignalRTest
{
    //Hub的别名,方便前台调用
    [HubName("testHHH")]
    public class TestHub : Hub
    {
        /// <summary>
        /// 自动生成的方法
        /// </summary>
        public void Hello()
        {
            Clients.All.hello();//意思是调用所有客户端的集线器注册的方法
        }

        /// <summary>
        /// 自定义一个方法发送给所有的客户端
        /// </summary>
        /// <param name="msg"></param>
        public void SendToAllClients(string msg)
        {
            Clients.All.allMessage(msg);//意思是调用所有客户端的集线器注册的方法allMessage
        }
    }
}

6.新建一个ChatTest.html 页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery.signalR-2.0.0.js"></script>
    <!--这里要注意,这是虚拟目录,也就是你在OWIN Startup中注册的地址-->
    <script src="signalr/hubs"></script>
</head>
<body>
    <div>
        <div>姓名:<input type="text" name="name" id="name" /></div>
        <div>
            <ul id="ul">
                <li>开始群聊咯。。。。。。。。。。。。。</li>
            </ul>
            <input type="text" name="content" id="content" /><input type="button" name="btn" id="btn" value="发送" />
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            //1.声明一个代理引用集线器,如果集线器没有取别名,则要小写$.connection.testHub;如果有别名则直接写别名就好了
            var chatClient = $.connection.testHHH;
            //2.注册服务端调用客户端的方法,就是刚才在TestHub中调用的方法 Clients.All.allMessage(msg);
            //注意是否有参数
            chatClient.client.allMessage = function (msg) {
                //动态加载内容到ul中
                $("#ul").append($("<li>" + msg + "</li>"));
            }

            //3. 必须启动连接
            $.connection.hub.start().done(function () {

                $("#btn").click(function () {
                    if ($("#name").val().length > 0) {
                        var msg = $("#name").val() + "说:" + $("#content").val();
                        //4.客户端调用服务端方法,必须注意,很多时候自己掉坑了。。。调用服务端方法必须小写方法字母开头
                        chatClient.server.sendToAllClients(msg);
                    }
                    else {
                        alert("请输入名字");
                    }
                });

            });

        });
    </script>
</body>
</html>

7.运行结果

三、总结

服务端调用客户端js注册方法名字,名字大小写一致

客户端调用服务端方法,对应方法名字,客户端方的方法字母开头需小写

客户端声明一个代理引用集线器,如果集线器没有取别名,则要集线器类名字母开头小写$.connection.testHub;如果有别名则直接写别名就好了

客户端必须启动连接   $.connection.hub.start().done(function(){这里写调用服务端方法才能够起作用})

源代码:http://files.cnblogs.com/files/kesimin/SignalRTest.zip

SignalR2.0开发实例之——群发消息的更多相关文章

  1. SignalR2.0开发实例之——设置时间、后台其他地方使用集线器、使用自己的连接ID

    一.连接的生命周期设置: 如下: // 该值表示连接在超时之前保持打开状态的时间长度. //默认为110秒 GlobalHost.Configuration.ConnectionTimeout = T ...

  2. SignalR2.0开发实例之——私聊

    一.前言 继续上一章的补充,这章介绍使用私聊的功能.主要通过一个方法   Clients.Client(Context.ConnectionId).showMessage(msg); SignalR框 ...

  3. SignalR2.0开发实例之——创建房间聊天

    SignalR作为一个强大的集线器,已经在hub里面集成了Gorups,也就是分组管理,使用方法如下: //作用:将连接ID加入某个组 //Context.ConnectionId 连接ID,每个页面 ...

  4. SignalR2.0开发实例之——负载均衡

    SignalR 2.0作为一个新的而且强大的通信工具,发布博客之后得到了很多人的支持,谢谢...也有人对性能和架设等问题提出了各种质疑..真的很感谢.. 我特意下载了SignalR 2.0的源码硬着头 ...

  5. springboot2.0+websocket集成【群发消息+单对单】(二)

    https://blog.csdn.net/qq_21019419/article/details/82804921 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上 ...

  6. 一篇对OAuth2.0开发实例的介绍

    今天看到了博友对SSO的文章,SSO单点登录的讲解突然想写一篇关于OAuth2.0用户授权的介绍. 应用场景:在APP或者网页接入一些第三方应用时,时长会需要用户登录另一个合作平台,比如QQ,微博,微 ...

  7. .net微信公众号开发——群发消息

    作者:王先荣    本文将介绍微信公众号开发中用于群发消息的类MassMessage,包括:(1)MassMessage类:(2)群发:(3)删除:(4)预览:(5)查询发送状态:(6)接收推送群发结 ...

  8. 用SignalR 2.0开发客服系统[系列1:实现群发通讯]

    前言 交流群:195866844 先说一下我为什么会写这个博客吧,(首先说一下,我是一个小菜鸟,讲的不好请指导 - -,)  前段时间公司的项目涉及到在B/S上使用即时通讯,(其实就是做一个B/S的客 ...

  9. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(中)

    接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...

随机推荐

  1. PL/SQL Developer主界面窗口左边窗口默认设置

    中文版:在菜单 工具 -> 首选项 -> 用户界面 -> 选项 窗口中,将“自动保存桌面”勾选上就可以了. 截图如下: 英文版:在菜单 Tools -> Preferences ...

  2. hdoj 1233 还是畅通工程---最小生成树---prime算法

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1233 可以用Kruskal来做,不过当图的边比较稠密的时候用prime会更快一些. AC代码:296MS ...

  3. jquery-multiselect在ie6里的一个bug

    在使用jquery-multiselect(一个把下拉框改造成带checkbox的可以多选的控件)时,正常时应该是下面这样:而它在ie6里是下面这样: 其中第一个bug参考‘ie6里png图片不透明’ ...

  4. HTML元素遮挡Flash之梦

    wmode参数: transparent模式:可用z-index控制层级 opaque模式:可用z-index控制层级 window模式:flash层级在浏览器核心显示窗口之上,flash会盖住与他重 ...

  5. 【转】对ARM堆栈的理解

    对ARM堆栈的理解 堆栈严格来说应该叫做栈,栈(Stack)是限定仅在一端进行插入或删除操作的线性表.因此,对栈来说,可以进行插入或删除操作的一端端称为栈顶(top),相应地,另一端称为栈底(bott ...

  6. 从事web前端的这些日子

    不知不觉从事web前端快要一年了,在这一年的时间,自己的技术也得到了不小的进步,但毕竟还是停留在摸索的阶段,前端的这条路还有很长的路要走,前端要掌握的东西太多,知识也在频繁的更新.每天在群里和别人的交 ...

  7. 从汇编来看c语言

    一. 学习过程 从C语言的角度提出一些问题,这些问题再从汇编的角度考虑,还真的很有意思. (1) 我们用高级语言编程时,一般不可能不用到变量,但是一定要用到变量吗?还有这些变量从汇编的角度是怎么实现的 ...

  8. Sogou搜狗搜索引擎登录网站 - Blog透视镜

    Sogou搜狗是中国搜狐旗下的搜索引擎,其登录方式也很简单,只要输入网址,验证码即可,不需要注册账号,再进行登录,其他非 * 必填的字段,可留下空白不填,验证码只有4码,也很清晰可见,不像有的网站,即 ...

  9. 将日期yyyy-MM-dd转为数字大写的形式

    /** * 将日期转大写 * 例如:2013-05-13转为 二0一三年五月十三日 * @param date * @return */ public static String getDxDate( ...

  10. C++中new和delete的背后( call edx 调用虚表内的第二个函数(析构函数))

    关于 C++中new背后的行为, 以前已经写过一篇了 理解C++中new背后的行为, 但是里面也只是泛泛而谈,没有真凭实据, 下面我们从汇编的角度看C++编译器究竟在背后干了什么?   我们的代码很简 ...