.NET MVC5中使用SignalR2 Demo

1.打开工具|库包管理器|包管理器控制台,运行以下命令。这一步添加到项目的一套脚本文件和程序集引用,使signalr功能。

install-package Microsoft.AspNet.SignalR

2.在“解决方案资源管理器”中,展开脚本文件夹。注意,脚本库signalr已添加到项目中。

Scripts folder

3.在解决方案资源管理器中,右键单击该项目,选择“添加|新文件夹,并添加一个新文件夹命名为Hubs。

4.右键单击集线器的文件夹,单击“添加新项|,选择Visual C # | Web | signalr节点,选择SignalR Hub Class(V2),并创建一个新的Hub,叫ChatHub.cs。你会使用这个类作为一个signalr服务器中心,把消息发送给所有客户。

Create new hub

5.用下面的代码替换chathub类代码(下面的代码意思是向所有的客户端推送消息)

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}
6.创建一个新的OWIN Startup类称为startup.cs。


7.将startup.cs类中的代码修改成如下代码

using Owin;
using Microsoft.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();
        }
    }
}
8.创建控制器和视图

9.将视图中的代码修改成如下(注:重点部分是JavaScript中的那一部分)

@{
    ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<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>
@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.--> 
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</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();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}
如果想了解更多有关SignalR的相关内容,可以在官网上自己查阅
https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc

在 ASP.NET MVC 使用 SignalR 实现推送功能需要以下步骤: 1. 在 Visual Studio 创建一个 ASP.NET MVC 项目。 2. 通过 NuGet 安装 SignalR 库。 3. 创建一个 SignalR Hub 。Hub 是用来处理客户端和服务器之间的连接和消息传递的核心组件。 4. 在 Startup.cs 配置 SignalR 间件。 5. 在客户端 JavaScript 引用 SignalR 库,并连接到 SignalR Hub。 6. 在 SignalR Hub 定义需要推送的消息方法,然后在服务器端调用该方法以向客户端发送消息。 下面是一个简单的示例: 1. 创建一个名为 ChatHub 的 SignalR Hub : ```csharp using Microsoft.AspNetCore.SignalR; using System.Threading.Tasks; namespace MvcSignalR.Hubs { public class ChatHub : Hub { public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", user, message); } } } ``` 2. 在 Startup.cs 配置 SignalR 间件: ```csharp using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using MvcSignalR.Hubs; namespace MvcSignalR { public class Startup { public IConfiguration Configuration { get; } public Startup(IConfiguration configuration) { Configuration = configuration; } public void ConfigureServices(IServiceCollection services) { services.AddMvc(); services.AddSignalR(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseStaticFiles(); app.UseSignalR(routes => { routes.MapHub<ChatHub>("/chathub"); }); app.UseMvcWithDefaultRoute(); } } } ``` 3. 在客户端 JavaScript 引用 SignalR 库,并连接到 SignalR Hub: ```javascript <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="/lib/signalr/dist/browser/signalr.js"></script> <script> var connection = new signalR.HubConnectionBuilder().withUrl("/chathub").build(); connection.start().then(function () { console.log("connected"); }).catch(function (err) { return console.error(err.toString()); }); connection.on("ReceiveMessage", function (user, message) { console.log(user + " says " + message); }); $("#sendButton").click(function () { var user = $("#userInput").val(); var message = $("#messageInput").val(); connection.invoke("SendMessage", user, message).catch(function (err) { return console.error(err.toString()); }); }); </script> ``` 4. 在 SignalR Hub 定义需要推送的消息方法,然后在服务器端调用该方法以向客户端发送消息。 在这个示例,当客户端调用 SendMessage 方法时,服务器将向所有连接的客户端发送 ReceiveMessage 消息。 以上就是在 ASP.NET MVC 使用 SignalR 实现推送功能的基本步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值