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

Question

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

尝试重新连接到服务器

此外，当用户在一段时间内处于非活动状态时，例如关闭手机显示屏，会出现一条消息

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

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

Answer 1

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

这看起来像这样：

<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。我希望这对你有用。

Answer 2

我遇到了同样的问题，我找到了这个解释（https://github.com/dotnet/aspnetcore/issues/19050从 Blazor 团队

Christiaan Bruin 的回答解决了我的问题，但它改变了重新连接页面。我只是希望它不会在用户浏览时被触发，尤其是在 Firefox 中。所以我所做的就是github问题上建议的方法，https://github.com/dotnet/aspnetcore/issues/19050#issuecomment-653953887。

<script src="_framework\blazor.server.js"></script>
<script>
  window.addEventListener('beforeunload', function () {
    Blazor.defaultReconnectionHandler._reconnectionDisplay = { };
  });
</script>

它适用于 Firefox 尝试重新连接的情况，并且当我实际终止连接时它正确显示了消息。

Answer 3

到目前为止，我只找到了一种在不包含任何服务器端 Blazor 组件的页面上禁用 Blazor 覆盖的方法。这很简单，我创建了一个空接口IPageWithBlazor，并使包含服务器端 Blazor 的所有 razor 页面模型都实现了这个空接口。现在我可以在中使用以下条件_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>
}

关于翻译消息还有另一个涉及该主题的问题。