Chenh

SignalR#

说明#

SignalR 的作用是建立稳定的 WebSocket 连接，使得服务端可以向客户端发送信息。

使用方式#

服务端#

使用.net 环境

• 为项目添加 SignalR netget 包

• 创建 Hubs 文件夹

• 在文件夹下创建第一个 SignalHub : Hub

• 在该类下创建我们的 “信号”

  Copy

  using Microsoft.AspNetCore.SignalR;
  // ...
  // Signal也可以携带参数
  public async Task OrgnizationSignal(){
    await Clients.All.SendAsync("orgnizationChanged");
  }
  

• 为项目添加 SignalR 服务

  Copy

  // Program.cs 中
  using CMS_miniAPI.Hubs;
  //...
  builder.services.AddSignalR();
  // 路由映射
  var app = builder.Build();
  app.MapHub<SignalHub>("/signalHub");
  
  app.Run();
  

客户端 web#

这里就用 Vue-web 客户端为例

• 为项目安装 SignalR 包

  npm install @microsoft/signalr

• 在 main.js 中引入

  import { HubConnectionBuild } from '@microsoft/signalr'

• 建立连接

  Copy

  const connection = new HubConnectionBuild()
  	.withUrl('/signalhub')
  	.build();
  // 建立监听
  connection.on('orgnizationChanged',()=>{
    console.log("message");
  })
  connection.start();
  

可以在 web 端将 signalr 打包，在需要的地方建立连接。

注意#

1. 当在 Program.cs 中添加 signalR 服务后，就已经可以正常工作了。
2. Hubs 衍生类的作用是存放客户端的 SignalR 方法调用，web 客户端使用connection.invoke("name", {data}) 方式调用。窗体程序类似，调用连接对象的invoke方法。
3. 需要服务端直接发送信息，可以在调用hubContext.Clients.All.SendAsync('name', data)
4. hubContext 存放的是当前与服务器建立连接的信息，包括客户端列表。
5. Connection 则是客户端建立的一条 signalR 通行连接。
6. 换一种理解方式，把 Hub 中的方法称作SignalR 服务端方法，把客户端的connection.on('name', func)称作SignalR 客户端方法。两边都可以相互调用。服务端使用SendAsync调用客户端，客户端使用invoke调用服务端。

参考资料#

1. Web 实时通信，SignalR 真香，不用愁了 - Code 综艺圈 - 博客园 (cnblogs.com)