這幾天想著將一個(gè)winform的工具上線到web上,因?yàn)閷?duì)時(shí)時(shí)性的要求比較高,找朋友咨詢了一下推薦了SignlarR 框架,比較強(qiáng)大.昨天才看到,今天研究了一下將里面的例子都拿出來共享.
官方的參考:http://www.asp.net/signalr/overview/getting-started
安裝SignalR：NuGet命令：
PM> Install-Package Microsoft.AspNet.SignalR
<------------1:與他人聊天:------------>
后臺(tái)代碼示例:
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小提示:注意其它的紅色字體部分
前臺(tái)代碼示例:
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
出現(xiàn)的效果:
兩個(gè)窗口之間的聊天
我知道你心中肯定有疑問,我也是這樣,當(dāng)我剛接觸的時(shí)候完全搞不懂這是為什么會(huì)這樣,我們來回顧一次正常的聊天過程:
那我們重新拆分以上的方法來證明我們的猜想是否正確
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 endchat.server.sendMessage(message) 從客戶端調(diào)用了服務(wù)器的方法(服務(wù)器扮演的是中轉(zhuǎn)站的角色).
此時(shí)的message 從客戶端A發(fā)送給了服務(wù)端
那服務(wù)器就應(yīng)該有這樣的一個(gè)方法與之相對(duì)應(yīng)
后臺(tái)代碼:
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 }服務(wù)端接收到A發(fā)送來的message.
這個(gè)時(shí)候服務(wù)端將消息推送給客戶端B
Clients.Others.talk(message);
這個(gè)時(shí)候客戶端B應(yīng)該有一個(gè)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這個(gè)時(shí)候客戶端B接收到消息,用Js的方法顯示出來消息. 一次通話就完成了.
<------------二,客戶端傳遞參數(shù)給服務(wù)端并從服務(wù)端得到返回值:------------>
前端代碼:
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
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
