不用找了,比较全的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. 开源 自由 java CMS - FreeCMS1.9 评论管理

    项目地址:http://code.google.com/p/freecms/ 评论管理 1. 评论管理 从左側管理菜单点击评论管理进入. 2. 评论审核 选择须要审核的评论,然后点击"审核& ...

  2. NET中小型企业项目开发框架系列（一个）

    当时的前端,我们开发了基于Net一组结构sprint.NET+NHibernate+MVC+WCF+EasyUI等中小型企业级系统开发平台,如今把整个开发过程中的步步进展整理出来和大家分享,这个系列可 ...

  3. 谈论json - json经常使用的功能

    json经常使用的功能有JSON.parse().JSON.stringify(),供json对象和字符串之间的相互转换. 1.JSON.parse() 将 JavaScript 对象符号 (JSON ...

  4. dom4j解析xml中指定元素下内容

    需求:XML为例如以下样式,如今我仅仅想取得timer以下的5000和60000. 解决的方法例如以下: <?xml version="1.0" encoding=" ...

  5. Html5 拖放上传图片

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  6. iOS在地图上WGS84、GCJ-02、BD-09互转解决方案

    该项目的最新进展包括地图共享模块,android同事集团开始,使用百度地图sdk,我开始回,运用iOS SDK的mapkit做,之后,问题是,用纬度和经度坐标iOS端和Android端出现了比較大偏差 ...

  7. React JS高速新手教程

    翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.n ...

  8. UIViewAdditions(一个非常方便的工具类用它)

    我们在project在,改变或多或少控件的坐标-宽度-高度,然后,经常看到你的self.view.frame.origin.x,self.view.frame.size.width.........相 ...

  9. NSIS：安装、卸载时检查程序是否正在运行

    原文 NSIS:安装.卸载时检查程序是否正在运行 如果我们要安装或升级的程序正在运行,文件肯定会替换不成功,以下代码可以提示用户结束正在运行的程序. 需要使用插件FindProcDLL.dll,下载路 ...

  10. mac在查看jre通路

    于Finder于command+shift+G 选/Library/Java/JavaVirtualMachines/jdk1.8.0_20.jdk/Contents/Home 版权声明:本文博主原创 ...