基于Blazor WASM+Asp.NET API如何实现司机在线状态检测

Blazor WASM完全可以实现用户在线状态检测功能，针对出租车管理的司机接单判定场景，可根据精度要求选择以下两种落地方案：

方案1：基于浏览器API的粗粒度检测 #

适合对状态精度要求不高的场景，实现成本极低：

• 直接调用浏览器原生navigator.onLine API，通过Blazor JS互操作即可快速获取当前设备的网络连接状态：

  // 注入IJSRuntime后调用
  bool isOnline = await JSRuntime.InvokeAsync<bool>("eval", "navigator.onLine");
  

• 可以监听浏览器online、offline事件，网络状态变化时主动同步给后端更新司机状态
• 局限性：仅能判断设备是否接入网络，无法验证是否能正常连通你的业务后端，比如设备连接了无法上网的WiFi时会误判为在线

方案2：基于心跳机制的高精度检测 #

出租车接单场景推荐优先使用该方案，状态准确率最高：

• 司机端Blazor WASM启动后，启动定时任务，每30~60秒向后端发送一个轻量心跳请求，仅携带司机ID即可
• 后端接收到心跳请求后，更新对应该司机的最后心跳时间字段
• 后端配置判定规则：当前时间与司机最后心跳时间的差值超过2个心跳周期时，直接判定为离线，标记为不可接单
• 可额外扩展逻辑：监听页面可见性事件，司机端切后台超过设定阈值时主动发送离线请求，进一步提升状态准确性
• 如果你已经使用SignalR实现实时派单功能，可以直接复用SignalR的连接状态，框架内部已经实现了心跳和断连检测，不用自行开发心跳逻辑：
  • 后端在OnConnectedAsync事件中标记司机在线
  • 后端在OnDisconnectedAsync事件中标记司机离线

基础心跳实现代码示例 #

Blazor WASM前端心跳逻辑：

// 提前注入HttpClient和当前登录司机信息
private Timer _heartbeatTimer;

protected override void OnInitialized()
{
    // 启动定时器，每30秒发送一次心跳
    _heartbeatTimer = new Timer(async _ =>
    {
        try
        {
            await HttpClient.PostAsJsonAsync("api/driver/heartbeat", new { DriverId = CurrentDriver.Id });
        }
        catch (Exception)
        {
            // 心跳发送失败，前端可直接提示用户当前网络异常，无法接单
        }
    }, null, TimeSpan.Zero, TimeSpan.FromSeconds(30));
}

public void Dispose()
{
    _heartbeatTimer?.Dispose();
}

内容的提问来源于stack exchange，提问作者Ion