using System; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat { public class ChatHub : Hub { public void Send(string name, string message) { // Call the broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message);
}
}
}
在解决方案资源管理器中,右键单击项目,然后选择 "添加 > 新项"。
在 "添加新项"-SignalRChat选择 "安装 > Visual C# > Web ",然后选择 " OWIN Startup 类"。
将类命名为Startup ,并将其添加到项目。
将Startup类中的默认代码替换为以下代码:
using Microsoft.Owin; using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { // Any connection or hub wire up and configuration should go here app.MapSignalR();
}
}
}
在解决方案资源管理器中,右键单击项目,然后选择 "添加 > " HTML 页"。
为新页索引命名,然后选择 "确定" 。
在解决方案资源管理器中,右键单击创建的 HTML 页面,然后选择 "设为起始页"。
将 HTML 页面中的默认代码替换为以下代码:
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
"><!DOCTYPE html> <html> <head> <title>SignalR Simple Chat</title> <style type="text/css"> .container { background-color: #99CCFF; border: thick solid #808080; padding: 20px; margin: 20px;
} </style> </head> <body> <div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" /> <ul id="discussion"> </ul> </div> <!--Script references. --> <!--Reference the jQuery library. --> <script src="Scripts/jquery-3.1.1.min.js" ></script> <!--Reference the SignalR library. --> <script src="Scripts/jquery.signalR-2.2.1.min.js"></script> <!--Reference the autogenerated SignalR hub script. --> <script src="signalr/hubs"></script> <!--Add script to update the page and send messages.--> <script type="text/javascript"> $(function () { // Declare a proxy to reference the hub. var chat = $.connection.chatHub; // Create a function that the hub can call to broadcast messages. chat.client.broadcastMessage = function (name, message) { // Html encode display name and message. var encodedName = $('<div />').text(name).html(); var encodedMsg = $('<div />').text(message).html(); // Add the message to the page. $('#discussion').append('<li><strong>' + encodedName
+ '</strong>: ' + encodedMsg + '</li>');
}; // Get the user name and store it to prepend to messages. $('#displayname').val(prompt('Enter your name:', '')); // Set initial focus to message input box. $('#message').focus(); // Start the connection. $.connection.hub.start().done(function () {
$('#sendmessage').click(function () { // Call the Send method on the hub. chat.server.send($('#displayname').val(), $('#message').val()); // Clear text box and reset focus for next comment. $('#message').val('').focus();
});
});
}); </script> </body> </html>
在解决方案资源管理器中,展开 "脚本"。
JQuery 和 SignalR 的脚本库在项目中可见。
重要
程序包管理器可能已安装了更高版本的 SignalR 脚本。
检查代码块中的脚本引用是否对应于项目中的脚本文件的版本。
从原始代码块编写引用脚本: