当前位置：首页 > news >正文

前端vue中使用signalr

news 来源：原创 2025/5/30 21:34:39

一、引入SignalR库

使用NPM引入SignalR库

npm install @microsoft/signalr

Js文件中引入

import * as signalR from '@microsoft/signalr';

二、初始化连接

这一步需要指定SignalR Hub的URL。

const connection = new signalR.HubConnectionBuilder().withUrl("https://yourserver.com/hub/myhub").build();

参数说明

在使用 SignalR 的 HubConnectionBuilder 时，可以通过链式方法配置连接的各个参数。以下是完整的参数配置写法和说明：

const connection = new signalR.HubConnectionBuilder()// 必填：设置 Hub 的 URL.withUrl(url, options) // 可选：配置日志.configureLogging(logging) // 可选：配置自动重连.withAutomaticReconnect(retryPolicy) // 可选：配置自定义 HTTP 客户端.withHubProtocol(protocol) // 构建连接对象.build();

1. `withUrl`

作用：设置 SignalR Hub 的 URL 和连接选项。

参数：.withUrl(url: string, options?: IHttpConnectionOptions)

.withUrl("https://example.com/chathub", {transport: signalR.HttpTransportType.WebSockets | signalR.HttpConnectionOptions.LongPolling,    // 自定义传输方式（默认为自动选择）accessTokenFactory: () => "your-access-token",      // 身份验证 Token（如 JWT）httpClient: customHttpClient,      // 自定义 HTTP 客户端（如修改超时时间）skipNegotiation: true,       // 跳过协商步骤（仅适用于 WebSocket）headers: { "X-Custom-Header": "value" },        // 自定义请求头// WebSocket 配置websocket: {// 自定义 WebSocket 构造函数（如代理）constructor: CustomWebSocket,},// 是否使用默认的 `fetch` API（默认为 true）useDefaultFetch: false,
})

2. `configureLogging`

作用：配置日志级别或自定义日志记录器。
参数：.configureLogging(logging: LogLevel | ILogger)

示例：

// 简单配置日志级别
.configureLogging(signalR.LogLevel.Information)// 自定义日志记录器
.configureLogging({log(logLevel, message) {console.log(`[SignalR] ${logLevel}: ${message}`);}
})

3. `withAutomaticReconnect`

作用：配置自动重连策略。

参数：.withAutomaticReconnect(retryPolicy?: RetryPolicy)

// 默认策略：重试 0次、3次、10次、30次 后停止
.withAutomaticReconnect()// 自定义重试间隔数组（单位：毫秒）
.withAutomaticReconnect([0, 2000, 5000, 10000, 30000])// 高级策略：实现 `RetryPolicy` 接口
.withAutomaticReconnect({nextRetryDelayInMilliseconds(retryContext) {if (retryContext.elapsedMilliseconds < 60000)<