如何在服务器上的 ASP.NET Core 产品上禁用“尝试重新连接到服务器”消息
[英]How to disable "Attempting to reconnect to the server" message on ASP.NET Core producton server
问题描述
I have an ASP.NET Core 3.1 C# razor pages application that also uses some Blazor-serverside razor components.
我有一个 ASP.NET Core 3.1 C# razor pages 应用程序，它也使用一些 Blazor-serverside razor 组件。 I have published it to IIS on Windows 2008 R2 Server.我已将它发布到 Windows 2008 R2 服务器上的 IIS。 But when browsing the site in Chrome on one andorid mobile phone a message appears periodically:但是当在一部安卓手机上用 Chrome 浏览网站时，会定期出现一条消息：
Attemting to reconnect to the server
Also when user stays inactive for a while, eg turns off the mobile phone display, a message appears此外，当用户一段时间不活动时，例如关闭手机显示屏，会出现一条消息
Disconnected from server.
The site is not in english and those generic messages are not good for end user exprience.该网站不是英文的，这些通用消息不利于最终用户体验。 Is there any way how to disable those messages, or at least translate them to another language?有什么办法可以禁用这些消息，或者至少将它们翻译成另一种语言？
3 个解决方案
解决方案1
23 2019-12-18 15:35:57
There is actually an answer for server-side Blazor as well.服务器端 Blazor 实际上也有一个答案。 According to this: ASP.NET Core Blazor hosting models , one can define a div-element with the id components-reconnect-modal in the body of _Host.cshtml to manipulate the overlay that shows up in case of a connection loss.根据这一点： ASP.NET Core Blazor 托管模型，可以在_Host.cshtml的主体中定义一个 id components-reconnect-modal的 div 元素来操作在连接丢失的情况下显示的覆盖。
That would look something like this:看起来像这样：
<body>
...
<!-- Blazor overlay -->
<div id="components-reconnect-modal"></div>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
...
</body>
Blazor applies these custom classes depending on the state of the app. Blazor 根据应用的状态应用这些自定义类。 According to the documentation these classes are in effect:根据文档，这些类是有效的：
-
components-reconnect-show: A lost connection.components-reconnect-show：丢失的连接。 The client is attempting to reconnect.客户端正在尝试重新连接。 Show the modal.Then you can apply your custom styling to the screen overlay with CSS.显示模式。然后您可以使用 CSS 将自定义样式应用于屏幕覆盖。 If you want to remove them all to you can just choose to not display them at all.如果您想将它们全部删除，您可以选择根本不显示它们。 -
components-reconnect-hide: An active connection is re-established to the server.components-reconnect-hide：重新建立到服务器的活动连接。 Hide the modal.隐藏模态。 -
components-reconnect-failed: Reconnection failed, probably due to a network failure.components-reconnect-failed：重新连接失败，可能是由于网络故障。 To attempt reconnection, callwindow.Blazor.reconnect().要尝试重新连接，请调用window.Blazor.reconnect()。 -
components-reconnect-rejected: Reconnection rejected.components-reconnect-rejected：重新连接被拒绝。 The server was reached but refused the connection, and the user's state on the server is lost.已到达服务器但拒绝连接，并且服务器上的用户状态丢失。 To reload the app, call location.reload().要重新加载应用程序，请调用location.reload()。
To hide the overlay completely, for instance you can add this CSS:要完全隐藏覆盖，例如，您可以添加以下 CSS：
.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
display: none;
}
If you want a custom look for the overlay, you can just fill the div in _Host.cshtml with content to your liking:如果您想要自定义的叠加层外观，您可以在_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>
I have no idea if this works client-side however, as I only work with server-side Blazor.我不知道这是否适用于客户端，因为我只使用服务器端 Blazor。 I hope this works for you.我希望这对你有用。
解决方案2
2 已采纳 2019-12-13 14:57:42
So far I have only found a way how to disable Blazor overlays on pages that do not contain any serverside Blazor components.到目前为止，我只找到了一种如何在不包含任何服务器端 Blazor 组件的页面上禁用 Blazor 覆盖的方法。 It is quite simple, I have created an empty Interface IPageWithBlazor and made all models of razor pages that contain serverside Blazor implement this empty interface.这很简单，我创建了一个空接口IPageWithBlazor ，并让所有包含服务器端 Blazor 的剃须刀页面模型都实现了这个空接口。 Now I can use the following condition in _Layout.cshtml :现在我可以在_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>
}
About translating messages there is another question that covers the topic .关于翻译消息，还有一个涵盖该主题的问题。
解决方案3
0 2022-06-23 16:58:59
I had the same issue and I found this explanation ( https://github.com/dotnet/aspnetcore/issues/19050 ) from the Blazor team.我遇到了同样的问题，我从 Blazor 团队找到了这个解释 ( https://github.com/dotnet/aspnetcore/issues/19050 )。
Christiaan Bruin's answer solved my issue, but it changes the reconnect page. Christiaan Bruin 的回答解决了我的问题，但它改变了重新连接页面。 I just wanted it not to be fired as the user browses, especially in Firefox.我只是希望它不会在用户浏览时被触发，尤其是在 Firefox 中。 So the way I did is the one suggested on the github issue, https://github.com/dotnet/aspnetcore/issues/19050#issuecomment-653953887 .所以我所做的就是在 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>
It worked for the Firefox attempts to reconnect and it showed the message correctly when I actually killed the connection.它适用于 Firefox 尝试重新连接，并且当我实际终止连接时它正确显示了消息。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.