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>
