当前位置: 首页 > article >正文

前端vue中使用signalr

一、引入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)<
http://www.lryc.cn/news/2387822.html

相关文章:

  • Stable Diffusion底模对应的VAE推荐
  • centos7.5安装kubernetes1.25.0
  • ‌AT2659S射频前端芯片技术解析:L1频段低噪声高增益GNSS信号放大
  • ROS2学习(15)------ROS2 TF2 机器人坐标系管理器
  • 每日c/c++题 备战蓝桥杯(洛谷P3382 三分法求极值详解)
  • Vue+css实现扫描动画效果(使用@keyframes scan)
  • Windows 配置 ssh 秘钥登录 Ubuntu
  • Conda:环境移植及更新1--使用conda-pack
  • github好玩的工具
  • PHP学习笔记(九)
  • 共现矩阵的SVD降维与低维词向量计算详解
  • 信创 CDC 实战 | OGG、Attunity……之后,信创数据库实时同步链路如何构建?(以 GaussDB 数据入仓为例)
  • PyQt学习系列08-插件系统与模块化开发
  • Redis核心数据结构操作指南:字符串、哈希、列表详解
  • 微服务(SpringCloud)的简单介绍
  • Python 爬虫开发
  • 第十一周作业
  • 猿大师办公助手网页编辑Office/wps支持服务器文件多线程下载吗?
  • 英码科技携带 “无感知AI数字课堂”解决方案,亮相第22届广东教育装备展
  • 各个链接集合
  • 【R语言科研绘图】
  • Linux Shell 切换
  • ProfiNet转Ethernet/IP网关选型策略适配西门子S7-1500与罗克韦尔ControlLogix5580的关键指标对比
  • AWS WebRTC:获取信令服务节点和ICE服务节点
  • [图文]图6.3会计事项-Fowler分析模式的剖析和实现
  • [Linux] 利用systemd实现周期性执行任务(DDNS设置案例)
  • maven 3.0多线程编译提高编译速度
  • Dalvik虚拟机、ART虚拟机与JVM的核心区别
  • Unity 3D AssetBundle加密解密教程
  • 【Linux】shell脚本的常用命令