- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的问题类似于this one ,但不是属于 Blazor server 应用程序,我在 Blazor webassembly 应用程序的上下文中询问。我意识到在这个浏览器执行上下文中只有一个 (UI) 线程,但我认为必须有某种用于工作程序或后台服务的框架。我所有的谷歌搜索都是空的。
我只需要启动后台服务,在应用程序的生命周期内每秒持续轮询 Web API。
最佳答案
我看到了两种不同的方法。第一个是 AppCompontent
中基于计时器的简单调用。第二个是创建一个 javascript web worker 并通过互操作调用它。
App
组件中基于计时器
@inject HttpClient client
@implements IDisposable
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
@code {
private async void DoPeriodicCall(Object state)
{
//a better version can found here https://github.com/davidfowl/AspNetCoreDiagnosticScenarios/blob/master/AsyncGuidance.md#timer-callbacks
var response = await client.GetFromJsonAsync<Boolean>("something here");
//Call a service, fire an event to inform components, etc
}
private System.Threading.Timer _timer;
protected override void OnInitialized()
{
base.OnInitialized();
_timer = new System.Threading.Timer(DoPeriodicCall, null, TimeSpan.FromSeconds(1), TimeSpan.FromSeconds(1));
}
public void Dispose()
{
//maybe to a "final" call
_timer.Dispose();
}
}
Javascript 网络 worker
可以找到后台 worker 的一个很好的起点here .
如果你想在你的 WASM 应用程序中使用调用的结果,你需要实现 JS 互操作。 App
组件调用一个启动 worker 的 javascript 方法。 javascript 方法具有三个输入:URL、间隔和对 App
组件的引用。 URL 和间隔包含在“cmd”对象中,并在工作程序启动时传递给工作程序。当 worker 完成 API 调用时,它会向 javascript 返回一条消息。此 javascript 调用应用程序组件上的方法。
// js/apicaller.js
let timerId;
self.addEventListener('message', e => {
if (e.data.cmd == 'start') {
let url = e.data.url;
let interval = e.data.interval;
timerId = setInterval( () => {
fetch(url).then(res => {
if (res.ok) {
res.json().then((result) => {
self.postMessage(result);
});
} else {
throw new Error('error with server');
}
}).catch(err => {
self.postMessage(err.message);
})
}, interval);
} else if(e.data.cmd == 'stop') {
clearInterval(timerId);
}
});
// js/apicaller.js
window.apiCaller = {};
window.apiCaller.worker = new Worker('/js/apicallerworker.js');
window.apiCaller.workerStarted = false;
window.apiCaller.start = function (url, interval, dotNetObjectReference) {
if (window.apiCaller.workerStarted == true) {
return;
}
window.apiCaller.worker.postMessage({ cmd: 'start', url: url, interval: interval });
window.apiCaller.worker.onmessage = (e) => {
dotNetObjectReference.invokeMethodAsync('HandleInterval', e.data);
}
window.apiCaller.workerStarted = true;
}
window.apiCaller.end = function () {
window.apiCaller.worker.postMessage({ cmd: 'stop' });
}
您需要修改 index.html 以引用 apicaller.js 脚本。我建议在 blazor 框架之前包含它,以确保它之前可用。
...
<script src="js/apicaller.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
...
应用组件需要稍微修改。
@implements IAsyncDisposable
@inject IJSRuntime JSRuntime
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
@code {
private DotNetObjectReference<App> _selfReference;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
{
_selfReference = DotNetObjectReference.Create(this);
await JSRuntime.InvokeVoidAsync("apiCaller.start", "/sample-data/weather.json", 1000, _selfReference);
}
}
[JSInvokable("HandleInterval")]
public void ServiceCalled(WeatherForecast[] forecasts)
{
//Call a service, fire an event to inform components, etc
}
public async ValueTask DisposeAsync()
{
await JSRuntime.InvokeVoidAsync("apiCaller.stop");
_selfReference.Dispose();
}
}
在开发人员工具中,您可以看到工作人员执行调用。
并发、多线程等问题
worker 是一种真正的多线程方法。线程池由浏览器处理。 worker 中的调用不会阻塞“主”线程中的任何语句。但是,它不如第一种方法方便。选择什么方法取决于您的上下文。只要您的 Blazor 应用程序不会执行太多操作,第一种方法可能是一个合理的选择。如果您的 Blazor 应用程序已经有大量的事情要做,那么将负载卸载给工作人员可能会非常有益。
如果您寻求工作人员解决方案但需要非默认客户端,如身份验证或特殊 header ,您需要找到一种机制来同步 Blazor HttpClient
和对 获取
API。
关于blazor-webassembly - Blazor Webassembly 应用程序中的轮询线程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66082698/
Blazor 中的缓存破坏有什么解决方案吗?我在 Blazor WebAssembly 中转换了我的 asp.net 核心应用程序,我在 razor 页面中使用 asp-append-version=
使用 NavigationManager.NavigateTo() 在页面之间移动非常简单,但我想知道是否有一种导航到页面的方法,这样我就可以在不丢失状态的情况下导航回去第一页。 我正在寻找类似 Na
假设我的大部分组件都有一个标题。我想创建一个具有 header 变量的基本组件,并使所有其他组件从该组件继承并设置 header 。所以我有 基础组件 @inherits LayoutComponen
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
我现在正在试验 Blazor 一段时间,我正试图找到关于两者之间差异的解释 Something 和 methodCall()">Something 为什么 @ expected before onc
我正在使用 BlazorInputFile 包在 Blazor 中上传文件。 问题 此代码无效。 如何限制用户只能在 Blazor 中上传 jpeg 或 png?如果需要更多的东西来支持这个问题,请
这存在于许多现代 SPA 库/框架中...... 我将提供一个使用 React 的示例(但它可以是 Angular 或 Vue),您可以执行类似... this.props.router.push({
我有一个 Blazor 服务器端应用程序,我将托管在离我的主要用户将使用的地方不远的服务器上,我想模拟某些功能是否可用但有一些延迟,或者延迟是否会真正影响它。 但我无法在开发时测试延迟,而且我不想每次
我有一个 Blazor 服务器项目,我想将一些共享组件移动到不同的程序集中,看看它是否会在编译时间上产生差异(让我知道这是否可行的奖励......) ,但这并不是那么顺利。 在 VS2019 中,组件
我最近开始使用 Blazor,发现它是一项非常有前途的技术。 我正准备制作自定义嵌套 Blazor 组件,但我似乎没有让它按我想要的方式工作。 目标是拥有一个具有“ContentHeader”和“Co
我想在我的 Blazor 项目中插入和使用 Mapster。我找不到关于如何注册映射并将它们注入(inject)我的应用程序的不同层的好引用。 有人知道我该如何实现吗? 谢谢 最佳答案 原来很简单。
我正在考虑在 Blazor 服务器项目上使用 PostSharp,想知道此 Postsharp 博客 (https://blog.postsharp.net/post/blazor-support-6
我在使用 RenderTreeBuilder 的 Blazor 组件上使用事件绑定(bind)时遇到问题。我了解如何使用编写 HTML 并将事件附加到组件的直接方法来触发事件。但是,我现在需要使用 R
当用户按下包含登录的左上链接的登录链接时,我试图将其存档: 但相反,我收到了这个: 换句话说:我想转到一个没有主布局导航栏的页面。如何存档? MainLayout.razor inherits Lay
如果程序中有错误,我会收到“发生未处理的错误”。使用 Blazor Web 程序集,我可以在浏览器中打开开发者工具以获取所发生事件的详细信息。这在 Blazor MAUI 中是不可能的。 那么如何在
我刚刚在 Blazor WebAssembly 中完成了我的第一个重要测试应用程序。 Blazor 是令人印象深刻的东西,但我发现很难推断属性更改如何导致 DOM 更新 - 例如,在 Razor 组件
很高兴了解 Blazor。这个框架有很多潜力! VS 2017 build 15.8.9 和 Blazor v 15.5.9 的 VS 扩展好的,所以在使用 asp.net 核心(托管)模板开始新项目
我想要在 ASP.NET Core blazor 中触发 click 事件的确切目标。这是可以实现的吗? 最佳答案 您可以使用@ref 获取对 DOM 对象的引用,然后将其作为参数传递给您的处理程序函
Blazor 服务器端基于 Signalr,因此我假设它知道用户何时离开网站(关闭连接)。是否有任何事件可用于记录此事件?或者其他任何方式! 最佳答案 我认为这项服务可以帮助您... public c
我是一名优秀的程序员,十分优秀!