Open Closed

SignalR WebSocket connection : It gets connected and Messages are receiving but on page refresh console errors are coming. #4155


User avatar
0
suraj.kumbhar created
  • ABP Framework version: v5.0.1

  • UI type: Angular

  • DB provider: EF Core

  • Tiered (MVC) or Identity Server Separated (Angular): yes

  • Exception message and stack trace:

  • Steps to reproduce the issue:"

  • added below code in Service file in Angular :

  • notificationHub: HubConnection;

configureConnection(): void {
     // Set the common hub
     const connection = new signalR.HubConnectionBuilder()
     .withUrl(environment.apis.NotificationService.url + '/signalr-hubs/notification', { accessTokenFactory: () => this.OAuth.getAccessToken() })
     .build();
     this.notificationHub = connection;
     // Reconnect loop
     let reconnectTime = 5000;
     let tries = 1;
     let maxTries = 8;
     start().then(() => {
          this.isNotificationConnected = true;
          this.registerNotificationEvents(connection);
          
          }).catch(error => {
          });
     function start() {
     return new Promise(function (resolve, reject) {
     if (tries > maxTries) {
     reject();
     } else {
     connection.start()
     .then(resolve)
     .then(() => {
     reconnectTime = 5000;
     tries = 1;
     })
     .catch(() => {
     setTimeout(() => {
     start().then(resolve);
     }, reconnectTime);
     reconnectTime \*= 2;
     tries += 1;
     });
     }
     });
     }
     // Reconnect if hub disconnects
     connection.onclose(e => {
     this.isNotificationConnected = false;
     start().then(() => {
     this.isNotificationConnected = true;
     });
     }); 
     }

In Backend

added NotificationHub class like this.
[Authorize]
 public class NotificationHub : AbpHub
 {
 }

and In hostmodulefile added Authentication :

context.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
 .AddJwtBearer(options =>
 {
     options.Authority = configuration["AuthServer:Authority"];
     options.RequireHttpsMetadata = Convert.ToBoolean(configuration["AuthServer:RequireHttpsMetadata"]);
     options.Audience = "NotificationService";
     options.Events = new JwtBearerEvents
     {
          OnMessageReceived = context =>
          {
          string accessToken = context.Request.Headers["Authorization"];
          string hangfireToken = context.Request.QueryString.Value.Replace("?access\_token=", "");
          // If the request is for our hub...
          var path = context.HttpContext.Request.Path;
          if (!string.IsNullOrEmpty(accessToken) &&
          path.StartsWithSegments("/signalr-hubs/notification"))
          {
          // Read the token out of the query string
          context.Token = accessToken.Replace("Bearer ", "");
          }
          return Task.CompletedTask;
     }
     };
 });

7 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Are there any errors on the backend app?

  • User Avatar
    0
    suraj.kumbhar created

    No errors in backend.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    What about info logs?

    Please share the context logs when SignalR tries to connect.

  • User Avatar
    0
    suraj.kumbhar created

    2022-12-07 18:35:36.860 +05:30 [INF] Executed endpoint '/signalr-hubs/notification' 2022-12-07 18:35:36.862 +05:30 [INF] Request finished HTTP/2 GET https://localhost:44389/signalr-hubs/notification?id=P9g94so3lFjrr4rfgjcB8A&=1670418246837 text/plain;charset=UTF-8 - - 200 0 text/plain 90016.7631ms 2022-12-07 18:35:36.874 +05:30 [INF] Request starting HTTP/2 OPTIONS https://localhost:44389/signalr-hubs/notification?id=P9g94so3lFjrr4rfgjcB8A&=1670418336868 - - 2022-12-07 18:35:36.874 +05:30 [INF] CORS policy execution successful. 2022-12-07 18:35:36.874 +05:30 [INF] Request finished HTTP/2 OPTIONS https://localhost:44389/signalr-hubs/notification?id=P9g94so3lFjrr4rfgjcB8A&=1670418336868 - - - 204 - - 0.6637ms 2022-12-07 18:35:36.876 +05:30 [INF] Request starting HTTP/2 GET https://localhost:44389/signalr-hubs/notification?id=P9g94so3lFjrr4rfgjcB8A&=1670418336868 text/plain;charset=UTF-8 - 2022-12-07 18:35:36.876 +05:30 [INF] CORS policy execution successful. 2022-12-07 18:35:36.882 +05:30 [INF] Executing endpoint '/signalr-hubs/notification' 2022-12-07 18:35:45.711 +05:30 [DBG] Server vmuser6:9524:a748d9e2 heartbeat successfully sent 2022-12-07 18:36:15.712 +05:30 [DBG] Aggregating records in 'Counter' table... 2022-12-07 18:36:15.715 +05:30 [DBG] Server vmuser6:9524:a748d9e2 heartbeat successfully sent 2022-12-07 18:36:45.724 +05:30 [DBG] Server vmuser6:9524:a748d9e2 heartbeat successfully sent 2022-12-07 18:37:06.901 +05:30 [INF] Executed endpoint '/signalr-hubs/notification' 2022-12-07 18:37:06.901 +05:30 [INF] Request finished HTTP/2 GET https://localhost:44389/signalr-hubs/notification?id=P9g94so3lFjrr4rfgjcB8A&=1670418336868 text/plain;charset=UTF-8 - - 200 0 text/plain 90024.6143ms 2022-12-07 18:37:06.913 +05:30 [INF] Request starting HTTP/2 OPTIONS https://localhost:44389/signalr-hubs/notification?id=P9g94so3lFjrr4rfgjcB8A&=1670418426907 - - 2022-12-07 18:37:06.914 +05:30 [INF] CORS policy execution successful.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you share the simple project? liming.ma@volosoft.com I will test it on my locally.

  • User Avatar
    0
    suraj.kumbhar created

    could you please provide your approach used to connect SignalR hub from Angular (Code Sample). Will try that and let you know. Still if same error comes will create sample project and send it to you.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    You just need to follow the official documentation of signalr.

    https://www.npmjs.com/package/@microsoft/signalr?activeTab=readme

    Please share a simple project to reproduce the problem.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11