▼

Tuesday 29 November 2016

SignalR Examples

ChatHUBS.cs 

Code
  1. public void Send(string name, string message) {  
  2.     // Call the broadcastMessage method to update clients.  
  3.     Clients.All.broadcastMessage(name, message);  
  4. }  
Startup.cs

  1. public void Configuration(IAppBuilder app)  
  2. {  
  3.     // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888  
  4.     app.MapSignalR();  
  5. }  
Htmlpage

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         .container {  
  8.             background-color: #99CCFF;  
  9.             border: thick solid #808080;  
  10.             padding: 20px;  
  11.             margin: 20px;  
  12.         }  
  13.     </style>  
  14.     <meta charset="utf-8" /> </head>  
  15.   
  16. <body>  
  17.     <div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" />  
  18.         <ul id="discussion"></ul>  
  19.     </div>  
  20.     <!--Script references. -->  
  21.     <!--Reference the jQuery library. -->  
  22.     <script src="Scripts/jquery-1.6.4.min.js"></script>  
  23.     <!--Reference the SignalR library. -->  
  24.     <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>  
  25.     <!--Reference the autogenerated SignalR hub script. -->  
  26.     <script src="signalr/hubs"></script>  
  27.     <!--Add script to update the page and send messages.-->  
  28.     <script type="text/javascript">  
  29.         $(function() {  
  30.             // Declare a proxy to reference the hub.  
  31.             var chat = $.connection.chatHub;  
  32.             // Create a function that the hub can call to broadcast messages.  
  33.             chat.client.broadcastMessage = function(name, message) {  
  34.                 // Html encode display name and message.  
  35.                 var encodedName = $('<div />').text(name).html();  
  36.                 var encodedMsg = $('<div />').text(message).html();  
  37.                 // Add the message to the page.  
  38.                 $('#discussion').append('<li><strong>' + encodedName + '</strong>:  ' + encodedMsg + '</li>');  
  39.             };  
  40.             // Get the user name and store it to prepend to messages.  
  41.             $('#displayname').val(prompt('Enter your name:', ''));  
  42.             // Set initial focus to message input box.  
  43.             $('#message').focus();  
  44.             // Start the connection.  
  45.             $.connection.hub.start().done(function() {  
  46.                 $('#sendmessage').click(function() {  
  47.                     // Call the Send method on the hub.  
  48.                     chat.server.send($('#displayname').val(), $('#message').val());  
  49.                     // Clear text box and reset focus for next comment.  
  50.                     $('#message').val('').focus();  
  51.                 });  
  52.             });  
  53.         });  
  54.     </script>  
  55. </body>  
  56.   
  57. </html>  
Hub connect check

  1. <script>  
  2.     $.connection.hub.start().done(function() {  
  3.         alert("Hub Connected");  
  4.     }).fail(function() {  
  5.         alert("Hub error");  
  6.     });  
  7. </script>  
-

No comments:

Post a Comment