不用找了,比较全的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. JS call与apply

    JS的call与apply call和apply是JS中比较重要的两个方法, 一般在框架和组件设计中用的较多,比如jQuery Code. 那么这两个方法是做什么的呢,下面我们通过代码来了解: 1 f ...

  2. 了解HTML5和“她”的 API (三)

    Web Workers(后台线程) JavaScript是单线程的,较长的javascript运算会阻塞UI线程. web worker 是运行在后台的 JavaScript,不会影响页面的性能. 在 ...

  3. Singleton模式(Singleton创建类型)c#简单的例子

    单(Singleton创建模式)c#简单的例子 当需要生成一个实例,可单发模式 样品可以在短短的球员中产生,玩家和测试.单线程例子,如以下: namespace singletonpattern { ...

  4. leetcode:pascal&#39;s_triangle_II

    一.     称号 一行值. 二.     分析 这道题跟Pascal'sTriangle非常类似,仅仅是这里仅仅须要求出某一行的结果.Pascal's Triangle中由于是求出所有结果,所以我们 ...

  5. 父类中可继承方法在处理private的一个demo

    public abstract class AbstractParent { public AbstractParent() { System.out.println("Hello,pare ...

  6. HDU 3032 Nim or not Nim? （需求的游戏SG功能）

    意甲冠军:经典Nim游戏转换,给你n礧pi,每个堆栈有pi石头, Alice和Bob轮流石头,意一堆中拿走随意个石子,也能够将某一堆石子分成两个小堆 (每堆石子个数必须不能为0).先拿完者获胜 思路: ...

  7. JQuery EasyUI学习框架

    前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...

  8. Atitit。团队建设--管理最佳实践--如何留住关键人才,防止人才外流 ？？

    Atitit.团队建设--管理最佳实践--怎样留住核心人才,防止人才流失 ?? 1. 1.人才流失后果 1 1. 1.员工的离职带走商业技术秘密和客户等资源 1 2. 2.影响在职员工的情绪.极大挫伤 ...

  9. SVG图像技术摘要

    该公司今天没有,研究了最近流行SVG技术,发现,随着css3不断流行,和浏览器技术的发展,SVG网站将取代大量的图片,成为主流站点图片展示. AI是我们经常使用的矢量图编辑器,如今AI能够直接另存SV ...

  10. cocos2dx 使得单麻将(三)

    cocos2dx 使得单麻将(三) 麻将逻辑4.得到手牌数据 我们已经保存了一个一维数组, 类似于一个表格,统计出全部牌相应的数量, 但我们如何得到当前手中是什么牌呢 //扑克转换 BYTE Swit ...