代码之家  ›  专栏  ›  技术社区  ›  Paul Dempsey

Blazor呈现组件,但立即无法连接

  •  0
  • Paul Dempsey  · 技术社区  · 4 年前

    我跟踪了 the documentation (和许多博客)用于将blazor组件添加到razor pages应用程序。razor页面完美地呈现了组件,但随后会立即出现“尝试重新连接”,但总是失败。控制台输出显示(显然是在本地主机上运行):

    [2020-07-20T00:22:59.957Z] Information: Normalizing '_blazor' to 'https://localhost:44306/_blazor'.
    blazor.server.js:1 [2020-07-20T00:22:59.961Z] Debug: Starting HubConnection.
    blazor.server.js:1 [2020-07-20T00:22:59.969Z] Debug: Starting connection with transfer format 'Binary'.
    blazor.server.js:1 [2020-07-20T00:22:59.970Z] Debug: Sending negotiation request: https://localhost:44306/_blazor/negotiate?negotiateVersion=1.
    blazor.server.js:1 [2020-07-20T00:23:00.145Z] Debug: Selecting transport 'WebSockets'.
    blazor.server.js:1 [2020-07-20T00:23:00.174Z] Information: WebSocket connected to wss://localhost:44306/_blazor?id=vuY411dkAsPan4fQrNN3aw.
    blazor.server.js:1 [2020-07-20T00:23:00.175Z] Debug: The HttpConnection connected successfully.
    blazor.server.js:1 [2020-07-20T00:23:00.175Z] Debug: Sending handshake request.
    blazor.server.js:1 [2020-07-20T00:23:00.176Z] Information: Using HubProtocol 'blazorpack'.
    blazor.server.js:1 [2020-07-20T00:23:00.182Z] Debug: Server handshake complete.
    blazor.server.js:1 [2020-07-20T00:23:00.182Z] Debug: HubConnection connected successfully.
    blazor.server.js:1 [2020-07-20T00:23:00.327Z] Information: Close message received from server.
    blazor.server.js:1 [2020-07-20T00:23:00.329Z] Debug: HttpConnection.stopConnection(undefined) called while in state Disconnecting.
    blazor.server.js:1 [2020-07-20T00:23:00.332Z] Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'.
    e.log @ blazor.server.js:1
    e.stopConnection @ blazor.server.js:1
    transport.onclose @ blazor.server.js:1
    e.close @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    a @ blazor.server.js:1
    Promise.then (async)
    c @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stopInternal @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    e.processIncomingData @ blazor.server.js:1
    connection.onreceive @ blazor.server.js:1
    i.onmessage @ blazor.server.js:1
    blazor.server.js:1 [2020-07-20T00:23:00.333Z] Debug: HubConnection.connectionClosed(Error: Server returned an error on close: Connection closed with an error.) called while in state Connected.
    blazor.server.js:1 Uncaught (in promise) Error: Server returned an error on close: Connection closed with an error.
        at e.processIncomingData (blazor.server.js:1)
        at e.connection.onreceive (blazor.server.js:1)
        at WebSocket.i.onmessage (blazor.server.js:1)
    e.processIncomingData @ blazor.server.js:1
    connection.onreceive @ blazor.server.js:1
    i.onmessage @ blazor.server.js:1
    Promise.then (async)
    c @ blazor.server.js:8
    a @ blazor.server.js:8
    Promise.then (async)
    c @ blazor.server.js:8
    (anonymous) @ blazor.server.js:8
    r @ blazor.server.js:8
    E @ blazor.server.js:8
    (anonymous) @ Eol:12448
    blazor.server.js:19 [2020-07-20T00:23:03.338Z] Error: TypeError: window.Blazor.reconnect is not a function
    e.log @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    r @ blazor.server.js:19
    e.attemptPeriodicReconnection @ blazor.server.js:19
    e @ blazor.server.js:19
    e.onConnectionDown @ blazor.server.js:19
    (anonymous) @ blazor.server.js:8
    (anonymous) @ blazor.server.js:1
    e.completeClose @ blazor.server.js:1
    e.connectionClosed @ blazor.server.js:1
    connection.onclose @ blazor.server.js:1
    e.stopConnection @ blazor.server.js:1
    transport.onclose @ blazor.server.js:1
    e.close @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    a @ blazor.server.js:1
    Promise.then (async)
    c @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stopInternal @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    e.processIncomingData @ blazor.server.js:1
    connection.onreceive @ blazor.server.js:1
    i.onmessage @ blazor.server.js:1
    blazor.server.js:19 [2020-07-20T00:23:06.346Z] Error: TypeError: window.Blazor.reconnect is not a function
    e.log @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    r @ blazor.server.js:19
    e.attemptPeriodicReconnection @ blazor.server.js:19
    e @ blazor.server.js:19
    e.onConnectionDown @ blazor.server.js:19
    (anonymous) @ blazor.server.js:8
    (anonymous) @ blazor.server.js:1
    e.completeClose @ blazor.server.js:1
    e.connectionClosed @ blazor.server.js:1
    connection.onclose @ blazor.server.js:1
    e.stopConnection @ blazor.server.js:1
    transport.onclose @ blazor.server.js:1
    e.close @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    a @ blazor.server.js:1
    Promise.then (async)
    c @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stopInternal @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    e.processIncomingData @ blazor.server.js:1
    connection.onreceive @ blazor.server.js:1
    i.onmessage @ blazor.server.js:1
    blazor.server.js:19 [2020-07-20T00:23:09.353Z] Error: TypeError: window.Blazor.reconnect is not a function
    e.log @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    r @ blazor.server.js:19
    e.attemptPeriodicReconnection @ blazor.server.js:19
    e @ blazor.server.js:19
    e.onConnectionDown @ blazor.server.js:19
    (anonymous) @ blazor.server.js:8
    (anonymous) @ blazor.server.js:1
    e.completeClose @ blazor.server.js:1
    e.connectionClosed @ blazor.server.js:1
    connection.onclose @ blazor.server.js:1
    e.stopConnection @ blazor.server.js:1
    transport.onclose @ blazor.server.js:1
    e.close @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    a @ blazor.server.js:1
    Promise.then (async)
    c @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stopInternal @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    e.processIncomingData @ blazor.server.js:1
    connection.onreceive @ blazor.server.js:1
    i.onmessage @ blazor.server.js:1
    blazor.server.js:19 [2020-07-20T00:23:12.375Z] Error: TypeError: window.Blazor.reconnect is not a function
    e.log @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    r @ blazor.server.js:19
    e.attemptPeriodicReconnection @ blazor.server.js:19
    e @ blazor.server.js:19
    e.onConnectionDown @ blazor.server.js:19
    (anonymous) @ blazor.server.js:8
    (anonymous) @ blazor.server.js:1
    e.completeClose @ blazor.server.js:1
    e.connectionClosed @ blazor.server.js:1
    connection.onclose @ blazor.server.js:1
    e.stopConnection @ blazor.server.js:1
    transport.onclose @ blazor.server.js:1
    e.close @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    a @ blazor.server.js:1
    Promise.then (async)
    c @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stopInternal @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    e.processIncomingData @ blazor.server.js:1
    connection.onreceive @ blazor.server.js:1
    i.onmessage @ blazor.server.js:1
    blazor.server.js:19 [2020-07-20T00:23:15.390Z] Error: TypeError: window.Blazor.reconnect is not a function
    e.log @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    a @ blazor.server.js:19
    Promise.then (async)
    c @ blazor.server.js:19
    (anonymous) @ blazor.server.js:19
    r @ blazor.server.js:19
    e.attemptPeriodicReconnection @ blazor.server.js:19
    e @ blazor.server.js:19
    e.onConnectionDown @ blazor.server.js:19
    (anonymous) @ blazor.server.js:8
    (anonymous) @ blazor.server.js:1
    e.completeClose @ blazor.server.js:1
    e.connectionClosed @ blazor.server.js:1
    connection.onclose @ blazor.server.js:1
    e.stopConnection @ blazor.server.js:1
    transport.onclose @ blazor.server.js:1
    e.close @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    a @ blazor.server.js:1
    Promise.then (async)
    c @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stopInternal @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    (anonymous) @ blazor.server.js:1
    M @ blazor.server.js:1
    e.stop @ blazor.server.js:1
    e.processIncomingData @ blazor.server.js:1
    connection.onreceive @ blazor.server.js:1
    i.onmessage @ blazor.server.js:1
    
    • _Layout.cshtml 包含 <base href="/"> 头和尾 <body> 它有:

      <script src="_framework/blazor.server.js" autostart="false"></script>
      <script>
          Blazor.start({
              configureSignalR: function (builder) {
                  builder.configureLogging(1); // LogLevel.Information
              }
          });
      </script>
      
    • 在Pages文件夹中,包含

      @using Microsoft.AspNetCore.Authorization
      @using Microsoft.AspNetCore.Components
      @using Microsoft.AspNetCore.Components.Authorization
      @using Microsoft.AspNetCore.Components.Forms
      @using Microsoft.AspNetCore.Components.Routing
      @using Microsoft.AspNetCore.Components.Web
      @using Microsoft.JSInterop
      @using MyAppNamespace
      
    • Startup.cs 有 services.AddServerSideBlazor(); 在里面 ConfigureServices

      .MapRazorPages();
      .MapBlazorHub();
      .MapFallbackToPage("/_Host");
      
    • _Host.cshtml 在Pages文件夹中,包含

      @page "/blazor"
      @{
          Layout = "_Layout";
      }
      
      <app>
          <component type="typeof(App)" render-mode="ServerPrerendered" />
      </app>
      

    根据控制台日志,从索引页进行连接可以正常工作,但对于另一个使用组件的页面则不行。

    我显然少了一些管道,但我不知道是什么。我错过了什么?


    更新:我尝试在索引页中使用blazor组件,在那里客户端似乎连接正常,但我看到了相同的情况:页面呈现组件,然后连接关闭,没有尝试重新连接成功。

    0 回复  |  直到 4 年前
        1
  •  0
  •   dsmolen    4 年前

    <href="/">

    <base href="/">

    推荐文章