jQuery(SignalR)中$connection含义及Angular11引入hub后对象未定义问题

$.connection是jQuery版本SignalR客户端封装的核心顶层对象，服务端注册的所有Hub会被自动生成的signalr/hubs脚本挂载为该对象下的同名属性，同时该对象下的$.connection.hub是全局Hub连接管理器，用于配置连接参数、监听连接状态、控制连接启停。

你遇到的cloudsferWebHub未定义是常见的异步加载时序问题，按以下步骤排查即可：

• 优先确认脚本加载时序：动态创建script标签加载资源是异步行为，你当前的业务代码在执行$.connection.cloudsferWebHub调用时，signalr/hubs脚本还未完成下载和执行，自然没有注入对应的Hub属性。
  修复方法是将所有SignalR相关逻辑放在script的onload回调中执行，参考代码：

  let node = document.createElement('script');
  let url = this.GlobalServ.BasicUrl + 'signalr/hubs';
  node.src = url;
  node.id = 'signalr';
  node.onload = () => {
    // 所有SignalR操作必须放在加载完成回调内
    $.connection.hub.qs = { 'migration': this.contentData.Id };
    const agents = $.connection.cloudsferWebHub;
    // 后续注册客户端方法、启动连接的逻辑也放在此处
  };
  document.getElementsByTagName('head')[0].appendChild(node);
  

• 校验signalr/hubs生成内容：直接访问你拼接的signalr/hubs完整地址，查看返回的JS内容中是否存在cloudsferWebHub的相关定义。如果没有，检查服务端配置：Hub类是否为public、是否配置了[HubName]特性导致名称不匹配、服务端是否正确开启了Hub路由映射。
• 检查依赖加载顺序：signalr/hubs必须在jQuery、jquery.signalR.min.js加载完成后再加载，缺少前置依赖或顺序错误都会导致Hub注入失败。
• 排查变量覆盖问题：确认项目中是否有自定义代码重写了$或$.connection对象，导致自动生成的Hub无法正常挂载。

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