一、简介

  ASP.NET Core SignalR 是一个开源代码库,它简化了向应用添加实时 Web 功能的过程。 实时 Web 功能使服务器端代码能够即时将内容推送到客户端。

  SignalR 的适用对象:

  • 需要来自服务器的高频率更新的应用。 例如:游戏、社交网络、投票、拍卖、地图和 GPS 应用。
  • 仪表板和监视应用。 示例包括公司仪表板、销售状态即时更新或行程警示。
  • 协作应用。 协作应用的示例包括白板应用和团队会议软件。
  • 需要通知的应用。 社交网络、电子邮件、聊天、游戏、行程警示以及许多其他应用都使用通知。

  SignalR 提供了一个用于创建服务器到客户端远程过程调用(RPC)的 API。 RPC 通过服务器端 .NET Core 代码调用客户端上的 JavaScript 函数。

以下是 ASP.NET Core SignalR 的一些功能:

  • 自动管理连接。
  • 同时向所有连接的客户端发送消息。 例如,聊天室。
  • 将消息发送到特定的客户端或客户端组。
  • 扩展以处理增加的流量。

二、软件

  1、vs2017

  2、.Net Core SDK 2.2

三、添加SignalR客户端库

  1、在“解决方案资源管理器” 中,右键单击项目,然后选择“添加” >“客户端库” 。

  2、在“添加客户端库” 对话框中,对于“提供程序” ,选择“unpkg” 。

  3、对于“库” ,输入 @aspnet/signalr@1,然后选择不是预览版的最新版本。

  

  4、选择“选择特定文件” ,展开“dist/browser” 文件夹,然后选择“signalr.js” 和“signalr.min.js” 。

  5、将“目标位置” 设置为 wwwroot/lib/signalr/ ,然后选择“安装”,将会创建 wwwroot/lib/signalr 文件夹并将所选文件复制到该文件夹 。

  

四、创建SginalR类

  创建文件BaseHub.cs。

namespace SignalRDemo.Hubs
{
public class BaseHub : Hub
{
public async Task SendMessage(string user,string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}

  BaseHub类继承SginalR的Hub类。Hub管理连接、组和消息。

  客户端可通过调用SendMessage向客户端发送消息。SignalR 代码是异步模式,可提供最大的可伸缩性。

五、配置SignalR

  在 Startup.cs 文件中将SignalR注入到中间件管道,并注册前端的访问地址。

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
{
  //......
services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
        //......
app.UseSignalR(routes =>
{
routes.MapHub<BaseHub>("/Hub");
});
        //.....
}

六、客户端页面通信

  1、引用 signalr.js

<script src="~/lib/signalr/dist/browser/signalr.js"></script>

  2、创建并且启动连接

  3、添加接收服务器端消息ReceiveMessage的处理程序

  4、添加点击事件,发送消息至服务器端SendMessage方法

<script type="text/javascript">
//1、创建并且启动连接
var connection = new signalR.HubConnectionBuilder().withUrl("/Hub").build(); connection.start().then(function () { }).catch(function (err) {
return console.error(err.toString());
});
//2、添加接收服务器端消息ReceiveMessage的处理程序
connection.on("ReceiveMessage", function (user, message) {
$('#content').append(user + ":" + message);
}); //3、添加点击事件,发送消息至服务器端SendMessage方法
$(document).on('click','#btn_submit', function () {
var user = $("#user").val();
var message = $("#message").val();
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
})
</script>

  5、页面元素

<div class="text-center">
<input type="text" id="user"/>
<input type="text" id="message"/>
<input type="button" value="发送" id="btn_submit"/>
</div>
<div id="content"> </div>

七、效果

  

  在两个输入框输入信息,点击发送会在页面上显示。

ASP.NET Core SignalR:基础概述的更多相关文章

  1. ASP.NET CORE使用WebUploader对大文件分片上传,并通过ASP.NET CORE SignalR实时反馈后台处理进度给前端展示

    本次,我们来实现一个单个大文件上传,并且把后台对上传文件的处理进度通过ASP.NET CORE SignalR反馈给前端展示,比如上传一个大的zip压缩包文件,后台进行解压缩,并且对压缩包中的文件进行 ...

  2. ASP.NET Core SignalR中的流式传输

    什么是流式传输? 流式传输是这一种以稳定持续流的形式传输数据的技术. 流式传输的使用场景 有些场景中,服务器返回的数据量较大,等待时间较长,客户端不得不等待服务器返回所有数据后,再进行相应的操作.这时 ...

  3. Asp.Net Core SignalR 用泛型Hub优雅的调用前端方法及传参

    继续学习 最近一直在使用Asp.Net Core SignalR(下面成SignalR Core)为小程序提供websocket支持,前端时间也发了一个学习笔记,在使用过程中稍微看了下它的源码,不得不 ...

  4. Asp.Net Core SignalR 与微信小程序交互笔记

    什么是Asp.Net Core SignalR Asp.Net Core SignalR 是微软开发的一套基于Asp.Net Core的与Web进行实时交互的类库,它使我们的应用能够实时的把数据推送给 ...

  5. [asp.net core]SignalR一个例子

    摘要 在一个后台管理的页面想实时监控一些操作的数据,想到用signalR. 一个例子 asp.net core+signalR 使用Nuget安装包:Microsoft.AspNetCore.Sign ...

  6. ASP.NET Core SignalR

    ASP.NET Core SignalR 是微软开发的一套基于ASP.NET Core的与Web进行实时交互的类库,它使我们的应用能够实时的把数据推送给Web客户端. 功能 自动管理连接 允许同时广播 ...

  7. ASP.NET Core SignalR 使用

    SignalR: 实时 Web 功能使服务器端代码能够即时将内容推送到客户端(包括B/S,C/S,Andriod).   SignalR最新版本为3.0(截止2020-02-28)   SignalR ...

  8. 使用websocket连接(对接)asp.net core signalr

    使用通用websocket连接asp.net core signalr 一.背景介绍 signalr的功能很强大,可以为我们实现websocket服务端节省不少的时间.但是可能由于不同的环境,我们在对 ...

  9. asp.net core 系列 1 概述

    一.   概述 ASP.NET Core 是一个跨平台的高性能开源框架,可以用来:建置 Web 应用程序和服务.IoT应用和移动后端.在 Windows macOS 和 Linux 上使用喜爱的开发工 ...

随机推荐

  1. Laravel 中使用 swoole 项目实战开发案例二 (后端主动分场景给界面推送消息)

    推荐阅读:Laravel 中使用 swoole 项目实战开发案例一 (建立 swoole 和前端通信)​ 需求分析 我们假设有一个需求,我在后端点击按钮 1,首页弹出 “后端触发了按钮 1”.后端点了 ...

  2. 在 ASP.NET Core 中使用 Serilog 进行日志记录

    目录 从 NuGet 安装 Serilog 在 Main函数 中配置 Serilog 在项目中使用 Serilog 进行日志输出 从 NuGet 安装 Serilog 核心的包是 Serilog 和 ...

  3. 《Java基础知识》Java包的概念

    一.什么是java中的包 Java程序中,为了开发方便,会将功能相似的类放入一个文件夹中,这个文件结构就是包. 二.java中的包的命名规范 域名反写,例如:com.baidu. 三.java中的包的 ...

  4. Golang中类面向对象特性

    一.类型方法的实例成员复制与类型方法的实例成员引用   在Go中可以类似Java等面向对象语言一定为某个对象定义方法,但是Go中并没有类的存在,可以不严格的将Go中的struct类型理解为面向对象中的 ...

  5. 消费者驱动的契约Consumer drivern Contract

    消费者驱动的契约Consumer Driven Contracts (CDC) A contract between a consuming service and a providing servi ...

  6. DC8: Vulnhub Walkthrough

    镜像下载链接: https://www.vulnhub.com/entry/dc-8,367/#download 主机扫描: http://10.10.202.131/?nid=2%27 http:/ ...

  7. DG重启之后主备数据不同步

    问题描述:本来配置好的DG第二天重启之后,发现主备库数据不能同步,在主库上执行日志切换以及创建表操作都传不到备库上,造成这种错误的原因是主库实例断掉后造成备库日志与主库无法实时接收 主库:orcl  ...

  8. 部署flas到服务器:No module named flask

    首先,你要先把nginx和uwsgi安装好(个人觉得这搭起来比较舒服),可以通过pip 或者源安装,具体方法在前面我有提到过,好了接下来我就讲讲我的踩坑经历与解决办法. 我先采用的pip  insta ...

  9. Jupyter修改设置

    下载完anaconda后Jupyter默认目录是用户目录,默认浏览器是IE,让有强迫症的我有点难受,所以把它的默认目录和浏览器修改一下. 首先运行一下jupyter notebook --genera ...

  10. 推荐一种非常好的新版DSP库源码移植方式,含V7,V6和V5的IAR以及MDK5的AC5和AC6版本

    说明: 1.新版CMSIS V5.6里面的DSP库比以前的版本人性化了好多. 2.本帖为大家分享一种源码的添加方式,之前一直是用的库方便,不方便查看源码部分. 3.DSP教程可以还看第1版的,在我们的 ...