如何取消Blazor Server烦人的重新连接?
2023/6/23 5:22:18
本文主要是介绍如何取消Blazor Server烦人的重新连接?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
如何取消Blazor Server烦人的重新连接?
相信很多Blazor的用户在开发内部系统上基本上都选择速度更快,加载更快的Blazor Server
模式。
但是Blazor Server
由于是SignalR
实现,所以在访问的时候会建立WebSocket
通道,用于js
交互和界面渲染,但是由于WebSocket
是长连接,这样就会导致用户在界面的时候会一直建立链接,导致服务器宽度占用,所以微软默认会在无操作的情况下自动断开链接,然后会加上该死的重新链接的一个ui,很难看,导致很多用户看到灰色的效果。当然,微软也提供了如何处理这个情况的方案,下面我们会使用微软提供的方案解决这个问题。
创建Blazor Server
的空项目
下面的刚刚创建的Blazor Server
的空项目。
然后长时间挂着就会出现下面这个情况。
很丑的加载ui
,灰色的全面覆盖样式,下面就得干掉这个。
去掉灰色加载样式。
新增boot.js
js脚本,用于处理重新连接
boot.js
用于自定义重新连接的操作。并且接管重新连接的程序。
(() => { // 重试次数 const maximumRetryCount = 10000; // 重试间隔 const retryIntervalMilliseconds = 1000; const startReconnectionProcess = () => { let isCanceled = false; (async () => { for (let i = 0; i < maximumRetryCount; i++) { console.log(`试图重新连接: ${i + 1} of ${maximumRetryCount}`) await new Promise(resolve => setTimeout(resolve, retryIntervalMilliseconds)); if (isCanceled) { return; } try { const result = await Blazor.reconnect(); if (!result) { // 已到达服务器,但连接被拒绝;重新加载页面。 location.reload(); return; } // 成功重新连接到服务器。 return; } catch { //没有到达服务器;再试一次。 } } // 重试次数太多;重新加载页面。 location.reload(); })(); return { cancel: () => { isCanceled = true; }, }; }; let currentReconnectionProcess = null; Blazor.start({ reconnectionHandler: { onConnectionDown: () => currentReconnectionProcess ??= startReconnectionProcess(), onConnectionUp: () => { currentReconnectionProcess?.cancel(); currentReconnectionProcess = null; }, }, }); })();
修改Pages/_Host.cshtml
@page "/" @using Microsoft.AspNetCore.Components.Web @namespace BlazorApp1.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <base href="~/" /> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <link href="css/site.css" rel="stylesheet" /> <link href="BlazorApp1.styles.css" rel="stylesheet" /> <link rel="icon" type="image/png" href="favicon.png"/> <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" /> </head> <body> <component type="typeof(App)" render-mode="ServerPrerendered" /> <div id="blazor-error-ui"> <environment include="Staging,Production"> 发生错误。此应用程序在重新加载之前可能不再响应。 </environment> <environment include="Development"> 发生了一个未处理的异常。详细信息请参见浏览器开发工具。 </environment> <a href="" class="reload">重新加载</a> <a class="dismiss">🗙</a> </div> <script src="_framework/blazor.server.js" autostart="false"></script> <script src="/boot.js"></script> <script> Blazor.start({ configureSignalR: function (builder) { let c = builder.build(); c.serverTimeoutInMilliseconds = 30000; c.keepAliveIntervalInMilliseconds = 15000; builder.build = () => { return c; }; } }); </script> </body> </html>
我们修改了blazor.server.js
的引用。
由<script src="_framework/blazor.server.js"></script>
改成<script src="_framework/blazor.server.js" autostart="false"></script>
说一下为什么要改这个,实现我们需要自定义处理程序,但是引用了blazor.server.js
,它就会直接执行,并不会等我们的处理程序,所以需要增加autostart="false"
阻止默认的启动程序。
然后在下面的脚本中自定义自动程序,在上面还引用了 <script src="/boot.js"></script>
,然后下面的自定义处理启动Blazor Server
程序。
<script> Blazor.start({ configureSignalR: function (builder) { let c = builder.build(); c.serverTimeoutInMilliseconds = 30000; c.keepAliveIntervalInMilliseconds = 15000; builder.build = () => { return c; }; } }); </script>
-
serverTimeoutInMilliseconds
:服务器超时(以毫秒为单位)。 如果此超时已过但未从服务器接收任何消息,连接将终止并出现错误。 默认超时值为 30 秒。 服务器超时应至少是分配给 Keep-Alive 间隔 (keepAliveIntervalInMilliseconds
) 的值的两倍。 -
keepAliveIntervalInMilliseconds
:ping 服务器时采用的默认间隔。 使用此设置,服务器可以检测强行断开连接的情况,例如客户断开其计算机的网络连接。 此 ping 的发生频率最多与服务器 ping 的频率一样。 如果服务器每 5 秒 ping 一次,则分配的值低于5000
(5 秒)时,将会每 5 秒 ping 一次。 默认值为 15 秒。 Keep-Alive 间隔应小于或等于分配给服务器超时 (serverTimeoutInMilliseconds
) 的值的一半。
写完以后启动程序,然后将后端服务关闭,然后我们的界面并没有在出现上面的ui了。
当我们的后端启动就会和前端自动链接。并且不会对于前端有影响。
结尾
来自token的分享
Blazor技术交流群:452761192
这篇关于如何取消Blazor Server烦人的重新连接?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行
- 2024-05-08阿里云域名注册流程,分享给第一次购买域名的新手站长!