·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 不用找了,比较全的signalR例子已经为你准备好了.

【如有意向点此提交需求】关于我们

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

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

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

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

官方的参考:http://www.asp.net/signalr/overview/getting-started

安装SignalR：NuGet命令：

PM> Install-Package Microsoft.AspNet.SignalR

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

后台代码示例:

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

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

前台代码示例:

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

出现的效果:

两个窗口之间的聊天

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

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

1          $("#btntalk").click(function () {2                 $.connection.hub.start().done(function () {3                     chat.server.sendMessag($("#txttalk").val());4                     $("#txttalk").val("");5                 })//the end of the $.connection6 7             });//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 function10 11         } //end of the initfunction

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

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

前端代码:

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4     <title></title> 5     <!--Script references. --> 6     <!--Reference the jQuery library. --> 7     <script src="Scripts/jquery-1.10.2.min.js"></script> 8     <!--Reference the SignalR library. --> 9     <script src="Scripts/jquery.signalR-2.0.2.js"></script>10     <!--Reference the autogenerated SignalR hub script. -->11     <script src='signalr/hubs'></script>12     <!--Add script to update the page and send messages.-->13     <script type='text/javascript'>14 15 16         $(function () {17             // Declare a proxy to reference the hub.18             var chat = $.connection.ViewDataHub;19 20 21             //init the client function 22             init(chat);23 24 25             $("#btnclick").click(function () {26                 //Response the information27                 $.connection.hub.start().done(function () {28                     chat.server.hello($("#txttalk").val()).done(function (res) {29                         var talk = "<h1>" + res + "</h1>";30 31                         $("#dvtalk").append(talk);32                     })//end of done function33                 })//the end of the $.connection34             })//end of click function35 36 37 38             $("#btntalk").click(function () {39                 $.connection.hub.start().done(function () {40                     chat.server.sendMessag($("#txttalk").val());41                     $("#txttalk").val("");42                 })//the end of the $.connection43 44             });//btntal