signalR with angular 【前后端双向通信】

傷城~ 2023-06-08 14:55 3阅读 0赞

### 为什么引入signalR： ###

SignalR 作为  ASP.NET 的一个库，能够简单方便地为应用提供实时的**服务器端与客户端双向通信功能**。SignalR可使用**WebSocket**, Server Sent Events 和 Long Polling作为底层传输方式。SignalR基于这三种技术构建, 抽象于它们之上, 它让你更好的关注业务问题而不是底层传输技术问题。（signalR会优先选择webSocket作为服务器的传输方式，用signalR连接后在控制台的**negotiate请求**可看到详细的）

SignalR 在客户端方面有两种API：Connections 和 Hubs。大多数情况下使用Hubs，因为它是 Connections API 更高级的一种实现，**允许客户端与服务端相互直接调用方法。**一个实际应用的具体场景，比如服务端获取到新订单时，调用客户端的打印方法，客户端打印完成后，调用服务端的订单状态更新方法。

*  客户端调用服务端方法：invoke()
 *  服务端调用客户端方法：客户端需在on()中注册方法名

--------------------

![signalr][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2][]

--------------------

参考：[https://www.cnblogs.com/viter/p/10527566.html][https_www.cnblogs.com_viter_p_10527566.html]

signalR with angular: （第一个较为清晰）

[https://github.com/AARNOLD87/SignalRWithAngular/blob/master/Frontend/SignalR/src/app/services/signalr.service.ts][https_github.com_AARNOLD87_SignalRWithAngular_blob_master_Frontend_SignalR_src_app_services_signalr.service.ts]

[https://github.com/rukshandangalla/Angular7-SignalR-Notifications][https_github.com_rukshandangalla_Angular7-SignalR-Notifications]   (angular 7)

[https://github.com/Ibro/AngularAspNetCoreSignalR/blob/48a96a00f0/AngularAspNetCoreSignalR/ChatHub.cs][https_github.com_Ibro_AngularAspNetCoreSignalR_blob_48a96a00f0_AngularAspNetCoreSignalR_ChatHub.cs]

[https://github.com/Ibro/AngularAspNetCoreSignalR][https_github.com_Ibro_AngularAspNetCoreSignalR]

其它：

[https://github.com/lianggx/Examples/tree/master/SignalR/Ron.SignalRLesson1/Ron.SignalRLesson1][https_github.com_lianggx_Examples_tree_master_SignalR_Ron.SignalRLesson1_Ron.SignalRLesson1]

--------------------

## other ##

如果从服务端接收的是数组的 JSON 数据，则 JSON.parse()  会将其转换为 JavaScript 数组。

用法：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
    document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;

--------------------

## ASP.NET与ASP.NET Core ##

ASP.NET与ASP.NET Core之间最大区别之一就是内置了依赖注入机制，虽然ASP.NET中也有DI机制，但没有内置容器，一般都需要使用第三方的容器来提供服务，另外依赖注入的概念也不像ASP.NET Core中这样无处不在。  
　　简单来说依赖注入的目的是为了让代码解耦以提高代码的可维护性，同时也要求代码设计符合依赖导致原则使得代码更加灵活，而其原理实际上就是在应用程序中添加一个对象容器，在应用初始化时将实际的服务“放”到容器中，然后当需要相应服务时从容器中获取，由容器来组装服务。

## 需要用到的技术？ ##

[https://www.cnblogs.com/cgzl/p/9515516.html][https_www.cnblogs.com_cgzl_p_9515516.html]  （概念， 值得看）

ASP.NET Core 与常用客户端框架和库（包括 [Blazor][]、[Angular][]、[React][] 和 [Bootstrap][]）无缝集成。 有关详细信息，请参阅 [ASP.NET Core Blazor 简介][Blazor] 和“客户端开发” 下的相关主题。

*  后端使用 ASP.Net Core
 *  前端使用的是 Angular

[signalr]: /images/20230531/288d157cbd50406583f5bfdaa4623e79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20230531/6c3d84cdd82d40eb82ddd4d9acd3f6f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1]: /images/20230531/4a8e8929a71141d1a803ba86cb71481c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2]: /images/20230531/4fb645de3830434eaff3da1498b0819b.png
[https_www.cnblogs.com_viter_p_10527566.html]: https://www.cnblogs.com/viter/p/10527566.html
[https_github.com_AARNOLD87_SignalRWithAngular_blob_master_Frontend_SignalR_src_app_services_signalr.service.ts]: https://github.com/AARNOLD87/SignalRWithAngular/blob/master/Frontend/SignalR/src/app/services/signalr.service.ts
[https_github.com_rukshandangalla_Angular7-SignalR-Notifications]: https://github.com/rukshandangalla/Angular7-SignalR-Notifications
[https_github.com_Ibro_AngularAspNetCoreSignalR_blob_48a96a00f0_AngularAspNetCoreSignalR_ChatHub.cs]: https://github.com/Ibro/AngularAspNetCoreSignalR/blob/48a96a00f0/AngularAspNetCoreSignalR/ChatHub.cs
[https_github.com_Ibro_AngularAspNetCoreSignalR]: https://github.com/Ibro/AngularAspNetCoreSignalR
[https_github.com_lianggx_Examples_tree_master_SignalR_Ron.SignalRLesson1_Ron.SignalRLesson1]: https://github.com/lianggx/Examples/tree/master/SignalR/Ron.SignalRLesson1/Ron.SignalRLesson1
[https_www.cnblogs.com_cgzl_p_9515516.html]: https://www.cnblogs.com/cgzl/p/9515516.html
[Blazor]: https://docs.microsoft.com/zh-cn/aspnet/core/blazor/index?view=aspnetcore-3.0
[Angular]: https://docs.microsoft.com/zh-cn/aspnet/core/client-side/spa/angular?view=aspnetcore-3.0
[React]: https://docs.microsoft.com/zh-cn/aspnet/core/client-side/spa/react?view=aspnetcore-3.0
[Bootstrap]: https://getbootstrap.com/