实时web应用方案——SignalR(.net core)
何为实时
先从理论上解释一下两者的区别。
大多数传统的web应用是这样的:客户端发起http请求到服务端,服务端返回对应的结果。像这样:
也就是说,传统的web应用都是客户端主动发起请求到服务端。
那么实时web应用呢?它不需要主动发起请求,服务端可以主动推送信息到客户端。
举栗子的话,实时聊天工具、web游戏等都可以算是实时应用。
什么是SignalR
如果想做一个实时应用,最好用web socket。很早以前我也写过web socket的实现方式,但不够全面,这里再补上一篇。
来说说signalR,它是一款开源的实时框架,可以使用三种方式实现通信(long polling、server sent events、web socket)。它很好的整合了底层技术,让我们可以不用关注底层技术实现而把精力聚焦在业务实现上。一个完整的signalR包括客户端和服务端,服务端支持net core/net framework,还支持大部分客户端,比如浏览器和桌面应用。
回落机制
为了兼容不同浏览器(客户端)和服务端,signalR采用了回落机制,使得它可以根据情况协商使用不同的底层传输方式。假如浏览器不支持web socket,就自动降级使用sse,再不行就long polling。当然,也可以禁用这种机制,指定其中一种。
三种通信方式
long polling(长轮询)
长轮询是客户端发起请求到服务端,服务器有数据就会直接返回。如果没有数据就保持连接并且等待,一直到有新的数据返回。如果请求保持到一段时间仍然没有返回,这时候就会超时,然后客户端再次发起请求。
这种方式优点就是简单,缺点就是资源消耗太多,基本是不考虑的。
server sent events(sse)
如果使用了sse,服务器就拥有了向客户端推送的能力,这些信息和流信息差不多,期间会保持连接。
这种方式优点还是简单,也支持自动重连,综合来讲比long polling好用。缺点也很明显,不支持旧的浏览器不说,还只能发送本文信息,而且浏览器对sse还有连接数量的限制(6个)。
web socket
web socket允许客户端和服务端同时向对方发送消息(也就是双工通信),而且不限制信息类型。虽然浏览器同样有连接数量限制(可能是50个),但比sse强得多。理论上最优先使用。
进入正题
开始之前,还需要了解RPC和Hub的概念。
RPC:全程Remote Procedure Call,字面意思远程服务调用,可以像调用本地方法一样调用远程服务。前端可以调用后端方法,后端也可以调用前端方法。
Hub:基于RPC,接受从客户端发过来的消息,也同时负责把服务端的消息发送给客户端。客户端可以调用Hub里面的方法,服务端可以通过Hub调用客户端里面的方法。
好了,概念已经理解清楚了,接下来上代码。
在项目里新增Hub类:
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks; namespace SignalRDemo.Server
{
public class SignalRHub : Hub
{
/// <summary>
/// 客户连接成功时触发
/// </summary>
/// <returns></returns>
public override async Task OnConnectedAsync()
{
var cid = Context.ConnectionId; //根据id获取指定客户端
var client = Clients.Client(cid); //向指定用户发送消息
await client.SendAsync("Self", cid); //像所有用户发送消息
await Clients.All.SendAsync("AddMsg", $"{cid}加入了聊天室");
}
}
}
为了让外部可以访问,我们还需要一个控制器。在控制器里声明随便建一个:
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using SignalRDemo.Server;
using System.Threading.Tasks; namespace SignalRDemo.Controllers
{
public class HomeController : Controller
{
private readonly IHubContext<SignalRHub> _countHub; public HomeController(IHubContext<SignalRHub> countHub)
{
_countHub = countHub;
} /// <summary>
/// 发送信息
/// </summary>
/// <param name="msg"></param>
/// <param name="id"></param>
/// <returns></returns>
public async Task Send(string msg, string id)
{
await _countHub.Clients.All.SendAsync("AddMsg", $"{id}:{msg}");
}
}
}
再然后进入StartUp设置端点:
endpoints.MapHub<SignalRHub>("/hub");
完成以后,配置signalr客户端:
setupConn = () => {
conn = new signalR.HubConnectionBuilder()
.withUrl("/hub")
.build(); conn.on("AddMsg", (obj) => {
$('#msgPanel').append(`<p>${obj}</p>`);
}); conn.on("Finished", () => {
conn.stop();
$('#msgPanel').text('log out!');
}); conn.on("Self", (obj) => {
$('#userId').text(obj);
}); conn.start()
.catch(err => console.log(err));
}
要注意withUrl里面的路径就是之前设置好的端点。
运行效果:
Hub还支持组操作,比如:
//将用户添加到A组
await Groups.AddToGroupAsync(Context.ConnectionId, "GroupA");
//将用户踢出A组
await Groups.RemoveFromGroupAsync(Context.ConnectionId, "GroupA");
//向A组所有成员广播消息
await Clients.Group("GroupA").SendAsync("AddMsg", "群组消息");
更多操作请参考官方文档。
本文演示demo的源码见git,地址:https://gitee.com/muchengqingxin/SignalRDemo.git
实时web应用方案——SignalR(.net core)的更多相关文章
- 常见的Web实时消息交互方式和SignalR
标签: WebSocket SignalR 前言 1. Web消息交互技术 1.1 常见技术 1.2 WebSocket介绍 1.3 WebSocket示例 2. Signal 2.1 SignalR ...
- SignalR来做实时Web聊天
本章和大家分享的内容是使用Signal R框架创建个简易的群聊功能,主要讲解如何在.Net的MVC中使用这个框架,由于这个项目有官方文档(当然全英文),后面也不打算写分享篇了,主要目的是让朋友们在需要 ...
- 【转】常见的Web实时消息交互方式和SignalR
https://www.cnblogs.com/Wddpct/p/5650015.html 前言 1. Web消息交互技术1.1 常见技术1.2 WebSocket介绍1.3 WebSocket示例 ...
- 使用SignalR实时Web应用程序
实时Web应用程序能够实时地将服务器端内容推送到连接的客户端.对于ASP.NET开发人员,ASP.NET SignalR是一个向其应用程序添加实时Web功能的库.它利用了多种传输方式,根据客户端和服务 ...
- 【转】SignalR来做实时Web聊天
本章和大家分享的内容是使用Signal R框架创建个简易的群聊功能,主要讲解如何在.Net的MVC中使用这个框架,由于这个项目有官方文档(当然全英文),后面也不打算写分享篇了,主要目的是让朋友们在需要 ...
- [ASP.NET] 使用 ASP.NET SignalR 添加实时 Web
ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务 ...
- 使用WebSocket构建实时WEB
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3795075.html ...
- 使用SuperWebSocket 构建实时 Web 应用
Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...
- 实时Web与WebSocket实践
引言:实时Web越来越被重视,Google.Facebook等大公司也逐渐开始提供实时性服务.实时Web将是未来最热门的话题之一. 本文选自<基于MVC的JavaScript Web富应用开发 ...
随机推荐
- 使用 Typora 编辑器运用 Markdown 的语法编写文档
Markdown 介绍 Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档. Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建. ...
- Azure AD(三)知识补充-Azure资源的托管标识
一,引言 来个惯例,吹水! 前一周因为考试,还有个人的私事,一下子差点颓废了.想了想,写博客这种的东西还是得坚持,再忙,也要检查.要养成一种习惯,同时这也是自我约束的一种形式.虽然说不能浪费大量时间在 ...
- Vue中导出Excel表格方法
本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取. ...
- Java 蓝桥杯 算法训练 字符串的展开 (JAVA语言实现)
** 算法训练 字符串的展开 ** 题目: 在初赛普及组的"阅读程序写结果"的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于"d-h" ...
- Java实现 LeetCode 912 排序数组(用数组去代替排序O(N))
912. 排序数组 给你一个整数数组 nums,将该数组升序排列. 示例 1: 输入:nums = [5,2,3,1] 输出:[1,2,3,5] 示例 2: 输入:nums = [5,1,1,2,0, ...
- Java实现 蓝桥杯 算法训练 最大的算式
算法训练 最大的算式 时间限制:1.0s 内存限制:256.0MB 问题描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果尽量大.因为 ...
- css3图片防止变形
1.object-fit 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐. 之前我们大多数用的 大多数都是利用background-size: cover 来避免对图片造 ...
- Python简单http服务实现
1.代码实现 # -*- coding: utf-8 -*-"""Created on Tue Jun 11 18:12:01 2019 @author: wangymd ...
- vue对象数组数据变化,页面不渲染
很多时候,我们习惯于这样操作数组和对象: data() { // data数据 return { arr: [1,2,3], obj:{ a: 1, b: 2 } }; }, // 数据更新 数组视图 ...
- 数据库连接池 Druid和C3p0
datasource.properties数据源 #数据源 datasource.peoperties jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc: ...