(() => { // 重试次数 const maximumRetryCount = 10000; // 堆代码 duidaima.com // 重试间隔 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({ configureSignalR: function (builder) { let c = builder.build(); c.serverTimeoutInMilliseconds = 30000; c.keepAliveIntervalInMilliseconds = 15000; builder.build = () => { return c; }; }, 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> </body> </html>我们修改了blazor.server.js的引用。
<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) 的值的两倍。