在上节中,我们已经初步对 SignalR 进行了了解,这一节我们将做一个SignalR Demon,具体的步骤如下:
1. 创建一个 mvc 4 web 应用程序,并选择 Basic
2. 创建一个 Home 控制器, 创建好后,目录应该是这样的:
3. 在项目中,鼠标右键打开 Nuget 程序管理包,在 Nuget 程序管理包中 输入 signalr 这样的字符串进行搜索,在搜索结果中选中 Microsoft ASP.NET SignalR 这个项目,并点击安装
4. 在刚创建好的 Home 控制器 添加 一个 Index 的 Action ,并创建视图,视图的完整代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <div class="container"> <input type="text" id="message" id="message" /> <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" /> <ul id="discussion"></ul> </div> <script src="/Scripts/jquery-1.8.2.min.js"></script> <script src="/Scripts/jquery.signalR-2.1.2.min.js"></script> <script src="signalr/hubs"> </script> <script type="text/javascript"> $(function () { // 定义一个代理, 以引用 Hub var chat = $.connection.chatHub; //定义client端的javascript function,供server端hub,通过dynamic的方式,调用所有Clients的javascript function // 在对话框中输入聊天者的姓名. $('#displayname').val(prompt('Enter your name:', '')); // 创建一个函数,以使 Hub 可以广播消息。 chat.client.broadcastMessage = function (name, message) { // 对字符串进行html 编码 var encodedName = $('#displayname').text(name).html(); var encodedMsg = $('#message').text(message).html(); //在页面中追加并显示聊天信息 $('#discussion').append('•' + encodedName + ': ' + encodedMsg + '' + '</br>'); }; // 设置消息框的焦点格式. $('#message').focus(); // 与服务器建立连接 $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // 在Hub中调用 Send 方法 chat.server.send($('#displayname').val(), $('#message').val()); // 清空消息输入框 $('#message').val('').focus(); }); }); }); </script> </body>
5. 在项目中创建 OWin Startup 启动类, 并在Configuration(IAppBuilder app) 中添加以下 代码:app.MapHubs();
这段代码的意义就是将 应用程序映射到 Hub 中去,这是在程序启动运行时就会执行的。
6. 添加 ChatHub.cs 类,并创建 send(string name, string message) 方法,以便在客户端能调用
public class ChatHub : Hub { public void Send(string name, string message) { Clients.All.broadcastMessage(name, message); } }
7. 对项目进行编译,如果没有错的话,程序执行的结果应该是这样的(以下是用fire fox浏览器):
在
用IE 调试时,在项目中我们可以看到自动生成的一些调用脚本,其中 hubs.js 就是个我们在客户端所引用的 <script
src="signalr/hubs"> </script>,它将会把服务器中的方法推送到客户端,以便在客户端可以调用
Hubs.js 的完整代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*! * ASP.NET SignalR JavaScript Library v2.1.2 * http://signalr.net/ * * Copyright Microsoft Open Technologies, Inc. All rights reserved. * Licensed under the Apache 2.0 * https://github.com/SignalR/SignalR/blob/master/LICENSE.md * */ /// <reference path="....SignalR.Client.JSScriptsjquery-1.6.4.js" /> /// <reference path="jquery.signalR.js" /> (function ($, window, undefined) { /// <param name="$" type="jQuery" /> "use strict"; if (typeof ($.signalR) !== "function") { throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js."); } var signalR = $.signalR; function makeProxyCallback(hub, callback) { return function () { // Call the client hub method callback.apply(hub, $.makeArray(arguments)); }; } function registerHubProxies(instance, shouldSubscribe) { var key, hub, memberKey, memberValue, subscriptionMethod; for (key in instance) { if (instance.hasOwnProperty(key)) { hub = instance[key]; if (!(hub.hubName)) { // Not a client hub continue; } if (shouldSubscribe) { // We want to subscribe to the hub events subscriptionMethod = hub.on; } else { // We want to unsubscribe from the hub events subscriptionMethod = hub.off; } // Loop through all members on the hub and find client hub functions to subscribe/unsubscribe for (memberKey in hub.client) { if (hub.client.hasOwnProperty(memberKey)) { memberValue = hub.client[memberKey]; if (!$.isFunction(memberValue)) { // Not a client hub function continue; } subscriptionMethod.call(hub, memberKey, makeProxyCallback(hub, memberValue)); } } } } } $.hubConnection.prototype.createHubProxies = function () { var proxies = {}; this.starting(function () { // Register the hub proxies as subscribed // (instance, shouldSubscribe) registerHubProxies(proxies, true); this._registerSubscribedHubs(); }).disconnected(function () { // Unsubscribe all hub proxies when we "disconnect". This is to ensure that we do not re-add functional call backs. // (instance, shouldSubscribe) registerHubProxies(proxies, false); }); proxies['chatHub'] = this.createHubProxy('chatHub'); proxies['chatHub'].client = { }; proxies['chatHub'].server = { send: function (name, message) { return proxies['chatHub'].invoke.apply(proxies['chatHub'], $.merge(["Send"], $.makeArray(arguments))); } }; return proxies; }; signalR.hub = $.hubConnection("/signalr", { useDefaultPath: false }); $.extend(signalR, signalR.hub.createHubProxies()); }(window.jQuery, window));
好了,非常感谢你的阅读,如果有什么好的想法,欢迎与我交流。
源码下载地址:下载源码