ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十六节--SignalR与ABP框架Abp.Web.SignalR及扩展

SignalR简介

SignalR是什么?

ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。

ASP.NET SignalR是ASP.NET开发人员的一个新库,可以使开发实时Web功能变得简单。SignalR允许服务器和客户端之间的双向通信。服务器现在可以将内容即时推送到连接的客户端。SignalR包含用于连接管理(例如连接和断开事件),连接分组和授权的API。一般情况下,SignalR会使用JavaScript(Ajax长时间轮询)的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信和支持CORS(跨源资源共享)。另外SignalR开发的程序不仅仅限制于宿主在IIS中,也可以宿主在任何应用程序,包括控制台,客户端程序和Windows服务等,另外还支持Mono,这意味着它可以实现跨平台部署在Linux环境下。JSONP没有配置,并且连接不是跨域的,如果客户端和服务器都支持,则使用WebSocket。

SignalR内部有两类对象:
Http持久连接(Persisten Connection)对象:
- Connection表示用于发送单收件人,分组或广播消息的简单终端。持久连接API(由PersistentConnection类的.NET代码表示)为开发人员提供了对SignalR公开的低级通信协议的直接访问。用来解决长时间连接的功能。还可以由客户端主动向服务器要求数据,而服务器端不需要实现太多细节,只需要处理PersistentConnection 内所提供的五个事件:OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。

  • Hub(集线器)对象:基于连接API构建的更高级别的管道,允许您的客户端和服务器直接调用彼此的方法。SignalR像魔术一样处理跨机器边界的调度,允许客户端像本地方法一样方便地调用服务器上的方法,反之亦然。对于使用远程调用API(如.NET Remoting)的开发人员来说,使用Hubs通信模型将会很熟悉。使用集线器还允许您将强类型参数传递给方法,从而启用模型绑定。

SignalR将整个信息的交换封装起来,客户端和服务器都是使用JSON来沟通的,在服务端声明的所有Hub信息,都会生成JavaScript输出到客户端,.NET则依赖Proxy来生成代理对象,而Proxy的内部则是将JSON转换成对象。

参考

官网及学习文档:https://www.asp.net/signalr
github:https://github.com/SignalR
SignalR 参考项目:https://github.com/SignalR/Samples

实战

工具要求:
- Visual Studio 2013 及以上
- .NET 4.5及以上
- MVC 5及以上
- SignalR版本2及以上

  1. 使用Visual Studio 2013,创建一个MVC项目
  2. 通过Nuget安装SignalR包。
    install-package Microsoft.AspNet.SignalR
  3. 安装SignalR成功后,SignalR库的脚本将被添加进Scripts文件夹下。具体如下图所示:
    image.png

  4. 在解决方案资源管理器中,右键单击该项目(也可以新建一个类库),选择添加 新建文件夹,并添加一个名为Hubs的新文件夹。
    用鼠标右键单击该Hubs文件夹,新建一个SignalR Hub Class(v2)类,并创建一个名为Chat .cs。您将使用此类作为将消息发送到所有客户端的SignalR服务器中心。
    image.png

  5. 用下面的代码替换Chat 类中的代码。

    public class Chat : Hub
    {
        public void Send(string message)
        {
            Clients.All.send(message);
        }
    }
  1. 创建一个Startup类,如果开始创建MVC项目的时候没有更改身份验证的话,这个类会默认添加的,如果已有就不需要重复添加了。按照如下代码更新Startup类。
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();
        }
    }
}
  1. 编辑HomeController在Controllers / HomeController.cs中找到的类,并将以下方法添加到类中。此方法返回您将在稍后的步骤中创建的聊天视图。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace BasicChat.Mvc.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}


  1. 用以下代码替换Chat.cshtml的内容。

将SignalR和其他脚本库添加到Visual Studio项目中时,程序包管理器可能会安装比本主题中显示的版本更新的SignalR脚本文件版本。确保代码中的脚本引用与项目中安装的脚本库的版本相匹配。
@{
    ViewBag.Title = "聊天窗口";
}
<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
{
    <!--引用SignalR库. -->
    <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
     <!--引用自动生成的SignalR 集线器(Hub)脚本.在运行的时候在浏览器的Source下可看到 -->
    <script src="~/signalr/hubs"></script>

    <script>
        $(function () {
    
            // 引用自动生成的集线器代理
            var chat = $.connection.serverHub;
            // 定义服务器端调用的客户端sendMessage来显示新消息

            chat.client.sendMessage = function (name, message) {
    
                // 向页面添加消息
                $('#discussion').append('<li><strong>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };

            // 设置焦点到输入框
            $('#message').focus();
            // 开始连接服务器
            $.connection.hub.start().done(function () {
    
                $('#sendmessage').click(function () {
    
                    // 调用服务器端集线器的Send方法
                    chat.server.send($('#message').val());
                    // 清空输入框信息并获取焦点
                    $('#message').val('').focus();
                });
            });
        });

        // 为显示的消息进行Html编码
        function htmlEncode(value) {
    
            
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值