扫描二维码下载沐宇APP

沐宇

微信扫码使用沐宇小程序

沐宇

SignalR濡備綍涓嶣lazor WebAssembly搴旂敤闆嗘垚

扬州沐宇科技
2024-05-09 15:25:03
SignalR

SignalR鏄竴涓?NET搴擄紝鐢ㄤ簬鍦ㄥ鎴风鍜屾湇鍔″櫒涔嬮棿瀹炴椂閫氫俊銆侭lazor WebAssembly鏄竴涓娇鐢╓ebAssembly鎶€鏈湪娴忚鍣ㄤ腑杩愯.NET浠g爜鐨勬鏋躲€傝鍦˙lazor WebAssembly搴旂敤涓泦鎴怱ignalR锛屽彲浠ユ寜鐓т互涓嬫楠ゆ搷浣滐細

  1. 鍦˙lazor WebAssembly搴旂敤涓畨瑁匰ignalR瀹㈡埛绔簱锛屽彲浠ヤ娇鐢ㄤ互涓嬪懡浠わ細
dotnet add package Microsoft.AspNetCore.SignalR.Client
  1. 鍒涘缓涓€涓猄ignalR鏈嶅姟鏉ヨ繛鎺ュ埌SignalR鏈嶅姟鍣紝鍙互鍦˙lazor鐨勬湇鍔′腑娉ㄥ叆SignalR杩炴帴锛?/li>
using Microsoft.AspNetCore.SignalR.Client;

public class SignalRService
{
    private HubConnection hubConnection;

    public SignalRService()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl("https://<your-signalr-server-url>")
            .Build();
    }

    public async Task StartConnection()
    {
        await hubConnection.StartAsync();
    }

    public HubConnection GetHubConnection()
    {
        return hubConnection;
    }
}
  1. 鍦˙lazor缁勪欢涓娇鐢⊿ignalR鏈嶅姟鏉ヨ繛鎺ュ埌SignalR鏈嶅姟鍣ㄥ苟鎺ユ敹瀹炴椂鏁版嵁锛?/li>
@page "/signalr"
@inject SignalRService signalRService

@code {
    protected override async Task OnInitializedAsync()
    {
        await signalRService.StartConnection();
        signalRService.GetHubConnection().On<string>("ReceiveMessage", (message) =>
        {
            // 澶勭悊鎺ユ敹鍒扮殑娑堟伅
        });
    }
}
  1. 鍦⊿ignalR鏈嶅姟鍣ㄤ腑鍒涘缓Hub骞跺鐞嗗鎴风鍙戦€佺殑娑堟伅锛?/li>
public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", $"{user}: {message}");
    }
}
  1. 鍦˙lazor缁勪欢涓娇鐢⊿ignalR鏈嶅姟鍙戦€佸疄鏃舵秷鎭細
@page "/signalr"

<input @bind="user" placeholder="Enter your name" />
<input @bind="message" placeholder="Enter your message" />
<button @onclick="SendMessage">Send</button>

@code {
    private string user;
    private string message;

    private async Task SendMessage()
    {
        await signalRService.GetHubConnection().InvokeAsync("SendMessage", user, message);
    }
}

閫氳繃浠ヤ笂姝ラ锛屾偍鍙互鍦˙lazor WebAssembly搴旂敤涓泦鎴怱ignalR锛屽苟瀹炵幇瀹炴椂閫氫俊鍔熻兘銆傛偍鍙互鏍规嵁鑷繁鐨勯渶姹備慨鏀逛互涓婁唬鐮佹潵瀹炵幇涓嶅悓鐨勫姛鑳姐€?/p>

扫码添加客服微信