不用找了,比较全的signalR例子已经为你准备好了.

 

这几天想着将一个winform的工具上线到web上,因为对时时性的要求比较高,找朋友咨询了一下推荐了SignlarR 框架,比较强大.昨天才看到,今天研究了一下将里面的例子都拿出来共享.

最全的参考:http://www.asp.net/signalr/overview/getting-started

关于如果安装SignalR： NuGet命令：

PM> Install-Package Microsoft.AspNet.SignalR

<------------1:与他人聊天:<------------

后台代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
 
namespace SignalRChat.Hubs.Data
{
    [HubName("<span style="color: #ff0000;">ViewDataHub</span>")]
    public class ViewDataHub : Hub
    {
        //this is just called by client and return the value for it .
        public string Hello()
        {
            return "hello";
        }
 
 
 
        //this fucntion will be called by client and the inside function
        //Clients.Others.talk(message);
        //will be called by clinet javascript function .
        public void <span style="color: #ff0000;">SendMessag</span>(string message)
        {
            Clients.Others.<span style="color: #ff0000;">talk</span>(message);
        }
 
    }
}

　　

小提示:注意其它的红色字体部分

前台代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<head>
    <title></title>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.0.2.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src='signalr/hubs'></script>
    <!--Add script to update the page and send messages.-->
    <script type='text/javascript'>
 
 
        $(function () {
            // Declare a proxy to reference the hub.
            var chat = $.connection.ViewDataHub;
 
 
            //init the client function
            init(chat);
 
 
            $("#btnclick").click(function () {
                //Response the information
                $.connection.hub.start().done(function () {
                    chat.server.hello().done(function (res) {
                        alert(res);
                    })//end of done function
                })//the end of the $.connection
            })//end of click function
 
 
 
            $("#btntalk").click(function () {
                $.connection.hub.start().done(function () {
                    chat.server.<span style="color: #ff0000;">sendMessag</span>($("#txttalk").val());
                    $("#txttalk").val("");
                })//the end of the $.connection
 
            });//btntalk end
 
        })
 
 
        //init the client method
        function init(chat) {
 
            chat.client.<span style="color: #ff0000;">talk</span> = function (message) {
                var talk = "<h1>" + message + "</h1>";
 
                $("#dvtalk").append(talk);
 
            } //end regist the client function
 
        } //end of the initfunction
 
    </script>
</head>
<body>
    <div>
        <table id="tbtoday"></table>
        <input type="text" id="txttalk" width="150"/>
        <input type="button" id="btnclick" value="clickme" />
        <input type="button" id="btntalk" value="talkwithme" />
        <div id="dvtalk">
 
        </div>
    </div>
</body>
</html>

　　

出现的效果:

两个窗口之间的聊天

我知道你心中肯定有疑问,我也是这样,当我刚接触的时候完全搞不懂这是为什么会这样,我们来回顾一次正常的聊天过程:

客户端A发送信息->服务端接收->服务端Post消息给客户端B

那我们重新拆分以上的方法来证明我们的猜想是否正确

1
2
3
4
5
6
7
$("#btntalk").click(function () {
    $.connection.hub.start().done(function () {
        chat.server.sendMessag($("#txttalk").val());
        $("#txttalk").val("");
    })//the end of the $.connection
 
});//btntalk end

chat.server.sendMessage(message) 从客户端调用了服务器的方法(服务器扮演的是中转站的角色).

此时的message 从客户端A发送给了服务端

那服务器就应该有这样的一个方法与之相对应

后台代码:

1    //this fucntion will be called by client and the inside function

2         //Clients.Others.talk(message);

3         //will be called by clinet javascript function .

4         public void SendMessag(string message)

5         {

6             Clients.Others.talk(message);

7         }

服务端接收到A发送来的message.

这个时候服务端将消息推送给客户端B

Clients.Others.talk(message);

这个时候客户端B应该有一个talk的方法来将消息显示出来

 1   //init the client method

 2         function init(chat) {

 3

 4             chat.client.talk = function (message) {

 5                 var talk = "<h1>" + message + "</h1>";

 6

 7                 $("#dvtalk").append(talk);

 8

 9             } //end regist the client function

10

11         } //end of the initfunction

这个时候客户端B接收到消息,用Js的方法显示出来消息. 一次通话就完成了.

<------------二,客户端传递参数给服务端并从服务端得到返回值:<------------

前端代码:

 

后端代码:

 

效果图:

<------------三，客户端刷时时的刷新数据<------------ 

前端：

 

后端：

 

注：本次实现的所谓的时时刷新数据和官方提供的Demo有很大的差异，并不是后台代码的角度来刷新，而是从前端的角度来实现的。

====>点我下载DEMO<====

 

signalR例子的更多相关文章

  1. 不用找了,比较全的signalR例子已经为你准备好了.

    这几天想着将一个winform的工具上线到web上,因为对时时性的要求比较高,找朋友咨询了一下推荐了SignlarR 框架,比较强大.昨天才看到,今天研究了一下将里面的例子都拿出来共享. 最全的参考: ...

  2. 不用找了,比较全的signalR例子已经为你准备好了(2)---JqGrid 服务端刷新方式-注释详细-DEMO源码下载

    上次用客户端进行数据刷新的方式,和官方的Demo实现存在差异性,今天花了一点时间好好研究了一下后台时时刷新的方式.将写的代码重新update了一次,在这之前找过好多的资料,发现都没有找到好的例子,自己 ...

  3. MVC的SignalR例子

    # SignalR学习 ASP.NET SignalR 是为.NET 开发者提供即时通讯Web 应用的类库.即时通讯Web服务就是服务器将内容自动推送到已经连接的客户端,而不是服务器等待客户端发起一个 ...

  4. 一个简单的SignalR例子

    本文介绍如何使用SignalR的Hub制作一个简单的点赞页面.不同浏览器(或者不同窗口)打开同一个页面,在任何一个页面点赞,所有页面同时更新点赞数. 1.使用Visual Studio Communi ...

  5. SignalR的客户端.NET Client介绍

    SignalR支持两种客户端:JavaScript Client和.NET Client.一个简单的SignalR例子中的SignalRDemo(点赞页面)就是JavaScript Client(HT ...

  6. ASP.NET Core: 全新的ASP.NET !

    背景 最新版本的 ASP.NET 叫做 ASP.NET Core (也被称为 ASP.NET 5)   它颠覆了过去的 ASP.NET. 什么是 ASP.NET Core? ASP.NET Core ...

  7. 全新的ASP.NET !

    全新的ASP.NET ! 背景 最新版本的 ASP.NET 叫做 ASP.NET Core (也被称为 ASP.NET 5)   它颠覆了过去的 ASP.NET. 什么是 ASP.NET Core? ...

  8. 第三章SignalR在线聊天例子

    第三章SignalR在线聊天例子 本教程展示了如何使用SignalR2.0构建一个基于浏览器的聊天室程序.你将把SignalR库添加到一个空的Asp.Net Web应用程序中,创建用于发送消息到客户端 ...

  9. [asp.net core]SignalR一个例子

    摘要 在一个后台管理的页面想实时监控一些操作的数据,想到用signalR. 一个例子 asp.net core+signalR 使用Nuget安装包:Microsoft.AspNetCore.Sign ...

随机推荐

  1. 在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启（另添加一个Config文件用于管理用户数据）

    原文:在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据) 我们都知道,在asp.net中修改 ...

  2. 第七个问题（枚举和set）

    set添加元素是基于equals和hashCode函数来确定的两个要素是否是同一物体. public final boolean equals(Object other) 当指定对象等于此枚举常量时, ...

  3. PHP訪问MySql数据库 0基础篇

    在站点后台,常常要与数据库打交道.本文介绍怎样使用XAMPP来管理MySql数据库及怎样用PHP来訪问MySql数据库. 一．使用XAMPP来管理MySql数据库 首先使用XAMPP打开MySql的管 ...

  4. 生产都消费者模式的一个demo，消费者设置缓存

    package queue; import java.util.concurrent.ExecutorService; import java.util.concurrent.LinkedBlocki ...

  5. C++11的一些功能

    .断言是将一个须要为真的表达式放在语句中,在debug模式下检查一些逻辑错误的參数.C++中使用assert须要使用<assert.h>或者<cassert>头文件.有函数定义 ...

  6. Canvas的quadraticCurveTo 和 bezierCurveTo 画曲线 方法细说

    详细代码如下: <!doctype html> <html lang="en"> <head> <script src="htt ...

  7. HDU 2112 HDU Today (Dijkstra算法)

    HDU Today Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. R0-R37它是Arm 寄存器，那是，CPU内部。和GPIO注册所有外设。换句话说，要是arm的cpu，它包含了其他芯片公司将有R0-R37，和GPIO寄存器只有一个特定的芯片。

    R0-R37它是Arm 寄存器.那是,CPU内部.和GPIO注册所有外设. 换句话说,要是arm的cpu,它包含了其他芯片公司将有R0-R37,和GPIO有. 版权声明:本文博主原创文章.博客,未经同 ...

  9. Akka 简介与入门

    Akka 简介与入门 http://www.thinksaas.cn/group/topic/344095/ 参考官网  http://akka.io/ 开源代码  https://github.co ...

  10. JBPM4实例教程

    JBPM语言概述:全名  Java Business Process Management  ,它是覆盖了业务流程管理.工作流.服务协作等领域的一个开源的.灵活的.易扩展的可运行流程语言框架. 是开源 ...