1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>SignalR Simple Chat</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 </head> 15 <body> 16 <div class="container "> 17 <input type="text" id="mm"/> 18 <input type="button" id="gg" value="Send " /> 19 <input type="hidden" id="nn" /> 20 <ul id="discussion"> 21 </ul> 22 </div> 23 24 <script src="Scripts/jquery-1.7.1.min.js"></script> 25 26 <script src="Scripts/jquery.signalR-2.2.0.min.js"></script> 27 28 <script src="/signalr/hubs"></script> 29 <script type="text/javascript"> 30 $(function () { 31 // Declare a proxy to reference the hub. 32 var chat = $.connection.chatHub; 33 // Create a function that the hub can call to broadcast messages. 34 chat.client.broadcastMessage = function (name, message) { 35 // Html encode display name and message. 36 var encodedName = $('<div />').text(name).html(); 37 var encodedMsg = $('<div />').text(message).html(); 38 // Add the message to the page. 39 $('#discussion').append('<li><strong>' + encodedName 40 + '</strong>: ' + encodedMsg + '</li>'); 41 }; 42 // Get the user name and store it to prepend to messages. 43 $('#nn').val(prompt('Enter your name:', '')); 44 // Set initial focus to message input box. 45 $('#mm').focus(); 46 // Start the connection. 47 $.connection.hub.start().done(function () { 48 $('#gg').click(function () { 49 50 // Call the Send method on the hub. 51 chat.server.send($('#nn').val(), $('#mm').val()); 52 // Clear text box and reset focus for next comment. 53 $('#mm').val('').focus(); 54 }); 55 56 }); 57 58 }); 59 </script> 60 </body> 61 </html>