SignalR急忙入门 ~ 仿QQ即时拉扯,音讯推送,单聊,群聊,多群公聊(基础=》进步)

 SignalR连忙入门 ~
仿QQ即时闲聊,音讯推送,单聊,群聊,多群公聊(基础=》提高,5个Demo贯彻全篇,感兴趣的玩才是真的学)

官方demo:http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr

源码http://pan.baidu.com/s/1dETGYGT

应用场景之一:

 Ajax 1

 

没太多连续的时刻来讨论SignalR,所以我把这篇散文分了两个阶段:

率先个级次,简单利用,熟习并认识SignalR

第二个等级,实现上图的单聊效果

其五个阶段,实现类似QQ群发的成效

推而广之阶段,假如有时光,逆天会再开一篇,封装一个LoTSignalR,看过逆天封装的人都清楚,相对简单又轻量级

比如LoTQQ,现在一度重重人在用了,前期会添加新职能,敬请期待~~

++++++++++++++++++ 我是华丽的撤并线 +++++++++++++++++++++

步入正轨:

率先个级次:

1.什么是ASP.NET SignalR?

ASP .NET SignalR是一个 ASP .NET
下的类库,可以在ASP .NET
的Web项目中落实实时通信。什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以并行通报音讯及调用方法,当然这是实时操作的。

style=”color: #888888;”>WebSockets是Html5提供的新的API,能够在Web网页与服务器端间建立Socket连接,当WebSockets可用时(即浏览器襄助Html5)SignalR使用WebSockets,当不辅助时SignalR将利用其他技术来保管达到平等效果。

style=”color: #888888;”>SignalR当然也提供了非凡简单易用的高阶API,使劳动器端可以单个或批量调用客户端上的JavaScript函数,并且充足方便地举办连接管理,例如客户端连接到服务器端,或断开连接,客户端分组,以及客户端授权,使用SignalR都丰硕容易实现。

style=”color: #888888;”>Ajax 2

2.得以应用ASP.NET SingalR做什么?
SignalR
将与客户端举行实时通信带给了ASP .NET
。当然如此既好用,而且也有充裕的扩张性。在此以前用户需要刷新页面或使用Ajax轮询才能实现的实时呈现数据,现在假诺利用SignalR,就足以简简单单实现了。

style=”color: #888888;”>最根本的是您无需另行树立项目,使用现有ASP
.NET项目即可无缝使用SignalR。

style=”color: #ff00ff; background-color: #ffff00;”>网上某架构图:

Ajax 3

下边乱七八糟的估价很六个人懒得看,好啊,你能够这样通晓:

Ajax, style=”color: #ff00ff; background-color: #ffff00;”>使用了SignalR就可以让客户端通过SignalR代理直接调用服务端的法门,让服务端通过SignalR直接调用客户端的章程

下边大家来实例演示一下,先演示一下不用IIS的情形:

新建一个控制台项目,引入 signalR Self Host
可以考虑一下为何会用NuGet包,他究竟好在哪?O(∩_∩)O~不知情等门类示范完你应有就清楚了

Ajax 4

这是她的借助项

Ajax 5

设置一下Owin.Cors

Ajax 6

依赖项:

Ajax 7

增产一个Owin的Startup类,类似于大家传统类其余Global文件

Ajax 8

登记一下signalR中间组件(学过mvc的能够变相的驾驭为注册路由之类的)

Ajax 9

在main方法中绑定端口(不肯定是8080,比如我demo中就用的其他端口)

Ajax 10

创办一个“SignalR集线器”(控制台这边因为没有集线器所以只可以自己建类)

Ajax 11

建了一个DntHub,定义了一个劳动器端的点子,叫瑟维斯(Service)(Service)Send(一会会用到)

Ajax 12

转到定义,看看Hub类(好东西啊,还有分组啥的,下面会讲)

Ajax 13

运转一下,假如出错请参考我的这篇作品:http://www.cnblogs.com/dunitian/p/5232229.html

Ajax 14

先看看共引用多少dll(和MVC之类的比起是不是简单很多?一会示范好处在哪)最小引用

Ajax 15

创立一个web的Client,引用一下
SignalR的js包,其实你会发觉就是多了多少个js包并不曾引用任何dll(必须的,不然岂不是太臃肿?)

Ajax 16

前者的调用步骤:

    <!--
    总结一下:
    1.先引入jq包,再引入signalR的js包,再引入signalR动态生成的hubs
    2.设置signalR的hubs url地址:$.connection.hub.url =xxx
    3.声明一个代理对象来引用集线器:var chat = $.connection.dntHub;
    4.创建一个客户端方法:chat.client.xxxx=function(){}
    5.启动并调用服务端方法:
        $.connection.hub.start().done(function(){
            chat.server.xxx()
        });
    -->

代码贴起:

Ajax 17Ajax 18

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简单聊天程序</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    <!--动态生成的-->
    <script src="http://localhost:5438/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            //日记记录
            $.connection.hub.logging = true;

//设置hubs的url
$.connection.hub.url = “http://localhost:5438/signalr“;

// 表明一个代理来引用该集线器。
var chat = $.connection.dntHub;

// 创造一个方法供服务端调用
chat.client.addMessage = function (name, message) {
var encodedName = $(‘

‘).text(name).html();
var encodedMsg = $(‘

‘).text(message).html();
$(‘#discussion’).append(‘

  • ‘ + encodedName + ‘:  ‘ + encodedMsg + ‘
  • ‘);
    };
    $(‘#displayname’).val(‘路人’);

    // 启动 connection
    $.connection.hub.start().done(function () {
    $(‘#sendmessage’).click(function () {
    //调用服务器端方法
    chat.server.serviceSend($(‘#displayname’).val(), $(‘#message’).val());
    });
    });
    });



    View Code

    style=”line-height: 1.5; background-color: initial;”>借使要调节的话,保证服务端 style=”line-height: 1.5; background-color: initial;”>先运行,调试小技巧:

    Ajax 19

    下边说一下上边的功利:

    webclient我就独自拿出来了(一个js包,一个index.html),控制台的主次我也单身拿出去了,下边先运行一下服务端,再打开index.html

    Ajax 20

    重新验证最下边说的,端口不固定

    Ajax 21

    第二个级次:

     QQ聊天案例,先讲一种正常的点子,下边会讲一种简易方法

    先看看gif效果图把

    Ajax 22

    概念一个BaseHub类,里面用 qqModeList来临时存放数据(用户数据)

    Ajax 23

    QQModel,如今就用到五个属性,其他的可以友善扩展

    Ajax 24

    概念了一个上线方法,一会每个客户端都会调用(本来是准备用OnConnected的,没办法他没参数。。。而且以此时候,qq昵称还一贯不生出,于是自己取其次的方案)

    Ajax 25

    概念一个发音讯的艺术

    Ajax 26

    上面就是前者的事物了,注释很详细,不知底可以直接留言,我没心花怒放深度封装,首要就是简单演示一下

    代码贴上:

    客户端-逆天

    Ajax 27Ajax 28

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>仿QQ聊天--我是逆天</title>
        <link href="Style/MyQQ.css" rel="stylesheet" />
    </head>
    <body>
        <div><input id="inputMsg" /><input id="btn" type="button" value="发消息" /></div><br /><br />
        <div id="main"></div>
    






    View Code

    客户端-美女

    Ajax 29Ajax 30

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>仿QQ聊天--我是美女</title>
        <link href="Style/MyQQ.css" rel="stylesheet" />
    </head>
    <body>
        <div><input id="inputMsg" /><input id="btn" type="button" value="发消息" /></div><br /><br />
        <div id="main"></div>
    






    View Code

     

    其三阶段

     群发

    俺们先跟着前天的QQ聊天来说

    这一次用一个简练的艺术搞定

    一个键值对聚集存放ConnectionId和GroupName

    Ajax 31

    每个客户端连接的时候会进入一个组

    Ajax 32

     断开的时候退出组

    Ajax 33

     发消息

    Ajax 34

    前者也举办了优化。ok,signalR第多个demo诞生,比后日简短多了

    Ajax 35

     

    上边可以说说类似于QQ群的群发信息了

     

    这么些是逆天的自学笔记:

    Ajax 36

    相关文章