使用 SignalR - Angular 将消息发送到特定浏览器选项卡页面（客户端）

Question

I'm using this piece of Web API C#.Net Core code to send a message from server to client:

public class Test : ITest
{
    private IHubContext<NotificationHub, ITest> _hub;

    public Test(IHubContext<NotificationHub, ITest> hub)
    {
        _hub = hub;
    }

    public async Task BroadcastMessage(string Type, string Payload)
    {
        await _hub.Clients.All.BroadcastMessage(Type, Payload);
    }
}

But It will send message to all clients but I only need to send the message to opened tab page (client) which is executing web API. What should I do to do such thing?

And here is Angular Codes:

import * as signalR from '@aspnet/signalr';
import { Component, OnInit } from '@angular/core';
import { MessageService } from 'primeng/components/common/messageservice';
import { LogState, ActivityLogType, ContentSearcherResult } from 'src/Model/StartContentSearcher';
import { PropertyRead } from '@angular/compiler';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  constructor(private messageService: MessageService) { }

  private connection: signalR.HubConnection;

  connect(accessToken) {
    if (!this.connection) {
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl("http://localhost:8178/contentsearcherHub", { accessTokenFactory: () => accessToken }).build();

      this.connection.start().catch(err => console.error(err))
      this.connection.on("BroadcastMessage", (Type, Payload) => { console.log(Type, Payload) })
    }
  }

  ngOnInit(): void {
    this.connect("3076a225-f2f6-4c68-b894-08accb62bb90");

  }

  uuidv4() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

}

Answer 1

I only need to send the message to opened tab page (client) which is executing web API. What should I do to do such thing?

After client started/established connection to hub server, we can get connection id of current connected client. To broadcast message only to that specific client who is consuming API, you can modify and pass connection id(s) to BroadcastMessage method, like below.

public async Task BroadcastMessage(string connectionId, string Type, string Payload)
{
    await _hub.Clients.Client(connectionId).BroadcastMessage(Type, Payload);
}

Answer 2

I have a Angular project and I use the Signalr inside it. But when I get the connectionId, I can print it. But I can't assign it in the global variable. This is my code:

connection = new signalR.HubConnectionBuilder().withUrl("http://localhost:8178/notifyHub").build();
connection.start().then(function () {
  connection.invoke("GetConnectionId").then(function (connectionId) {
   console.log(connectionId);
   // var temp=connectionId
  })
}).catch(err => console.error(err));