Open Closed

Is Chat Module Supported in Maui Blazor project? #6640


User avatar
0
olitrepanier created
  • ABP Framework version: v7.4.2
  • UI Type: Maui Blazor
  • Database System: EF Core SQL Server
  • Tiered (for MVC) or Auth Server Separated (for Angular): no
  • Exception message and full stack trace:

  • Steps to reproduce the issue:
  1. Open abp suite
  2. Generate new Maui Blazor project
  3. Add chat module
  4. Enable chat feature
  5. Attempt to navigate to /chat page -> get the exception

It looks like HubConnection is never instantiated for a Maui Blazor project? In comparison, a Blazor project has the Abp.Chat.Volo.Blazor.WebAssembly module which overrides the function SetChatHubConnectionAsyc() where the HubConnection object is instantiated.

My question is, is the Chat feature supported for a Maui Blazor project?


5 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Chat feature Supported in 8.1 for a Maui Blazor.

    You can try :

    using Microsoft.AspNetCore.Components;
    using Microsoft.AspNetCore.SignalR.Client;
    using Microsoft.Extensions.Options;
    using Volo.Abp.DependencyInjection;
    using Volo.Abp.Http.Client;
    using Volo.Abp.Http.Client.Authentication;
    using Volo.Chat.Blazor.Components;
    
    namespace Volo.Chat.Blazor.MauiBlazor.Components;
    
    [ExposeServices(typeof(MessagesToolbarItem))]
    public class BlazorMessagesToolbarItem : MessagesToolbarItem
    {
        [Inject]
        protected IAbpAccessTokenProvider AccessTokenProvider { get; set; }
    
        [Inject]
        protected IOptions<ChatBlazorMauiBlazorOptions> ChatBlazorMauiBlazorOptions { get; set; }
    
        [Inject]
        protected IOptions<AbpRemoteServiceOptions> AbpRemoteServiceOptions { get; set; }
    
        protected async override Task SetChatHubConnectionAsync()
        {
            var accessToken = await AccessTokenProvider.GetTokenAsync();
    
            var signalrUrl = ChatBlazorMauiBlazorOptions.Value.SignalrUrl ?? AbpRemoteServiceOptions.Value.RemoteServices.Default.BaseUrl;
    
            HubConnection = new HubConnectionBuilder()
                .WithUrl(signalrUrl.EnsureEndsWith('/') + "signalr-hubs/chat", options =>
                {
                    options.AccessTokenProvider = () => Task.FromResult(accessToken);
                })
                .Build();
        }
    }
    
    public class ChatBlazorMauiBlazorOptions
    {
        public string SignalrUrl { get; set; }
    }
    
  • User Avatar
    0
    olitrepanier created

    Hello!

    Awesome news. I already managed to code it on our end (very similar to the code you're giving). I was wondering if the razor components are also improved?

    This is what it looks like with LeptonX:

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Yes, this is the code, you can override the chat page: https://gist.github.com/realLiangshiwei/b90eabf57bf4f1e90e9ce2cbabdea770

  • User Avatar
    0
    olitrepanier created

    Thank you for the code,

    I also notice that there seems to be two SignalR connections. I doubt this is intended since it triggers the function ReceiveMessageAsync from the ChatHubConnectionService twice.

    Is this normal?

    This seems to be problematic since the chat sometimes gets Reversed twice, which cancels it out and is ordered wrongly.

    Also, this means that calls to the API are made twice.

    I'm having these issues both on Blazor and Maui Blazor.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    This might be a problem, could you provide full steps to reproduce, I will check it. thanks

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