【ASP.NET Core】修改Blazor.Server的Hub地址后引发的问题

2023-03-13 16:53| 来源: 网络整理| 查看: 265

Blazor Server，即运行在服务器上的 Blazor 应用程序，它的优点是应用程序在首次运行时，客户端不需要下载运行时。但它的代码是在服务器上执行的，然后通过 SignalR 通信来更新客户端的 UI，所以它要求必须建立 Web Socket 连接。

用于 Blazor 应用的 SignalR Hub 是 ComponentHub，默认的连接地址是 /_blazor。多数时候我们不需要修改它，但人是一种喜欢折腾的动物，既然 MapBlazorHub 方法的重载也允许我们修改地址，那咱们何不试试。

app.MapBlazorHub("/myapp"); app.MapFallbackToPage("/_Host");

我把 ComponentHub 的通信地址改为 /myapp。这时候，客户端上就不能使用 blazor.server.js 中的默认行为了，咱们必须手动启动 Blazor 应用了（因为自动启动用的是默认的 /_blazor 地址）。

Blazor.start({ configureSignalR: (connbuilder) => { connbuilder.withUrl("myapp"); } });

在引用 blazor.server.js 文件时，加上一个 autostart = "false"，表示 blazor 应用手动启动。哦，这个 autostart 是怎么来的？来，咱们看看源代码。在 BootCommon.ts 文件中，定义有一个名为 shouldAutoStart 的函数，而且它已导出。看名字就知道，它用来判断是否自动启动 Blazor 应用。

export function shouldAutoStart(): boolean { return !!(document && document.currentScript && document.currentScript.getAttribute('autostart') !== 'false'); }

现在，你明白这个 autostart 特性是怎么回事了吧。

在调用 Blazor.start 方法时咱们要设定一个配置项—— configureSignalR。它指定一个函数，函数的参数是 HubConnectionBuilder 对象。这是 signalR.js 中的类型。再调用 withUrl 方法更改连接地址，默认的代码是这样的。

const connectionBuilder = new HubConnectionBuilder() .withUrl('_blazor') .withHubProtocol(hubProtocol);

很遗憾的是，运行后发现并不成功。

其实咱们的代码并没有错，问题其实是出在 Blazor 自身的“八阿哥”上。别急，老周接下来一层层剥出这个问题，你会感叹，官方团队竟然会犯“高级错误”。

咱们先来解释这个奇葩的错误信息，什么JSON格式不对？什么无效的字符“ { if(context.Request.Path.StartsWithSegments("/_blazor", StringComparison.OrdinalIgnoreCase)) { var repl = context.Request.Path.ToString().Replace("/_blazor", NewBlazorHubUrl); context.Request.Path = repl; } await next(); }); // 注意顺序 app.UseRouting(); app.MapBlazorHub(NewBlazorHubUrl); app.MapFallbackToPage("/_Host");

因为新地址是 /myapp 开头，我们只要把以 /_blazor 开头的地址改为 /myapp 开头就行了。这个中间件一定要在路由中间件之前改地址。改地址后再做路由匹配才有意义。

当然，想简洁一点的，还可以用 URL Rewrite。

var rwtopt = new RewriteOptions() .AddRewrite("^_blazor/(.+)", "myapp/$1", true); app.UseRewriter(rwtopt); app.UseRouting(); app.MapBlazorHub("/myapp"); app.MapFallbackToPage("/_Host"); app.Run();

替换时用的正则表达式，我们匹配 _blazor 后的内容，即 initializers，然后替换为 myapp + initializers。“$1”引用正则中匹配的分组，即“.+”，匹配一个以上任意字符。URL 重写时，不需要指定开头的“/”，所以处理的是 _blazor/... 而不是 /_blazor/...。

前面我们提到了 BugApp.lib.module.js 脚本。干脆咱们也写一个自定义脚本。在 wwwroot 目录下添加一个 BugApp.lib.module.js 文件。BugApp 是项目名称，你要根据实际来改。

export function beforeStart() { console.log("Blazor应用即将启动"); } export function afterStarted() { console.log("Blazor应用已启动"); }

在这个脚本中，我们要导出两个函数：

beforeStart：在 Blazor 启动之前被调用。

afterStarted：在 Blazor 启动之后被调用。

现在，再次运行程序，用开发人员工具查看“控制台”消息，会看到这两条输出。

想玩直观一点的话，也可以修改 HTML 文档。

export function beforeStart() { let ele = document.createElement("div"); // 设置样式 ele.style = 'color: green; margin-top: 16px'; // 文本 ele.textContent = "Blazor应用即将启动"; document.body.append(ele); } export function afterStarted() { let ele = document.createElement("div"); ele.style = 'color: orange; margin-top: 15px'; ele.textContent = "Blazor应用已经启动"; document.body.append(ele); }

运行之后，页面上会动态加了两个元素。

XXX.lib.module.js 这个文件名是固定的，如果想自定义文件名，或想返回多个 js 文件，可以自己手动处理。

在 wwwroot 目录下添加一个名为 BugApp.modules.json 的文件。

[ "abc.js", "def.js", "opq.js" ]

以JSON数组的格式把你想用的初始化脚本写上。再次运行程序，就会下载这个文件，读取三个文件并将其下载。

你得注意，你指定的这些脚本必须是可访问，有效的，不然 Blazor 会启动失败。

好了，今天就说到这儿了，主要是发现了一个“八阿哥”。

【本文地址】

公司简介

联系我们