如何在 ASP.NET Core 生产服务器上禁用“尝试重新连接到服务器”消息答案

【问题标题】：How to disable "Attempting to reconnect to the server" message on ASP.NET Core producton server如何在 ASP.NET Core 生产服务器上禁用“尝试重新连接到服务器”消息
【发布时间】：2020-04-01 20:17:41
【问题描述】：

我有一个 ASP.NET Core 3.1 C# razor pages 应用程序，它也使用一些 Blazor-serverside razor 组件。我已将它发布到 Windows 2008 R2 服务器上的 IIS。但是在一部安卓手机上用 Chrome 浏览网站时，会定期出现一条消息：

正在尝试重新连接到服务器

当用户有一段时间不活动时，例如关闭手机显示屏，出现一条消息

与服务器断开连接。重新加载页面...

该网站不是英文的，这些通用消息不利于最终用户体验。有什么办法可以禁用这些消息，或者至少将它们翻译成另一种语言？

【问题讨论】：

您可能会从 github.com/aspnet/AspNetCore/issues/10325 获得一些提示对于移动场景，WebAssembly 上的 Blazor 应该是您的主要选择，而不是服务器端。
但是即使页面上没有 blazor 组件，问题仍然存在，此消息是由于连接到 blazor hub 失败引起的，不是吗？
发现类似问题stackoverflow.com/questions/58404533/…
@VojtěchDohnal -- 使用 blazor Web 程序集无需连接到集线器。

标签： c# asp.net-core razor-pages blazor-server-side asp.net-core-3.1

【解决方案1】：

服务器端 Blazor 实际上也有一个答案。根据这个：ASP.NET Core Blazor hosting models，可以在_Host.cshtml 的主体中定义一个id 为components-reconnect-modal 的div 元素来操作在连接丢失的情况下显示的覆盖。

看起来像这样：

<body>
...
<!-- Blazor overlay -->
<div id="components-reconnect-modal"></div>

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
...
</body>

Blazor 根据应用的状态应用这些自定义类。根据文档，这些类是有效的：

components-reconnect-show：连接丢失。客户端正在尝试重新连接。显示模态框。然后您可以使用 CSS 将自定义样式应用到屏幕叠加层。如果您想将它们全部删除，您可以选择根本不显示它们。
components-reconnect-hide：重新建立到服务器的活动连接。隐藏模式。
components-reconnect-failed：重连失败，可能是网络故障。要尝试重新连接，请致电 window.Blazor.reconnect()。
components-reconnect-rejected：重新连接被拒绝。已到达服务器但拒绝连接，并且服务器上的用户状态丢失。要重新加载应用，请致电location.reload()。

要完全隐藏叠加层，例如，您可以添加以下 CSS：

.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
     display: none;
}

如果您想要自定义的叠加外观，您可以在_Host.cshtml 的 div 中填写您喜欢的内容：

<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="show">
    <p>
        // Message when attempting to connect to server
    </p>
</div>
<div class="failed">
    <p>
        // Message when failing to connect
    </p>
</div>
<div class="rejected">
    <p>
        // Message when refused
    </p>
</div>

我不知道这是否适用于客户端，因为我只使用服务器端 Blazor。我希望这对你有用。

【讨论】：

谢谢，它已经在linked answer 中描述过，我后来找到了，但还是谢谢。我有特殊情况，我使用 _Layout.cshtml 从普通 Razor 站点调用 Blazor 组件。对我来说，即使页面上没有任何 Blazor 组件，我也收到消息很奇怪。了解如何为 javascript 组件设置超时将非常有用，它在我的一部手机上表现得很奇怪。
链接已过时。也许用新的更新？ :) 这很好：MS Docs

【解决方案2】：

到目前为止，我只找到了一种在不包含任何服务器端 Blazor 组件的页面上禁用 Blazor 覆盖的方法。这很简单，我创建了一个空接口IPageWithBlazor，并让所有包含服务器端 Blazor 的剃须刀页面模型都实现了这个空接口。现在我可以在_Layout.cshtml 中使用以下条件：

@if (this.Model is IPageWithBlazor)
{
    <script type="text/javascript" src="~/js/blazor.polyfill.min.js"></script>
    <script src="~/_framework/blazor.server.js"></script>
}

关于翻译消息有another question that covers the topic。

【讨论】：