<PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="7.0.1" />

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.SignalR;

namespace ApiServer.SignalRHubs;

[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
public class UsersDmHub : Hub
{
    private readonly UserInfoInMemory _userInfoInMemory;

    public UsersDmHub(UserInfoInMemory userInfoInMemory)
    {
        _userInfoInMemory = userInfoInMemory;
    }

    public async Task Leave()
    {
        _userInfoInMemory.Remove(Context.User!.Identity!.Name);
        await Clients.AllExcept(new List<string> { Context.ConnectionId }).SendAsync(
               "UserLeft",
               Context.User.Identity.Name
               );
    }

    public async Task Join()
    {
        if (!_userInfoInMemory.AddUpdate(Context.User!.Identity!.Name, Context.ConnectionId))
        {
            // new user
            // var list = _userInfoInMemory.GetAllUsersExceptThis(Context.User.Identity.Name).ToList();
            await Clients.AllExcept(new List<string> { Context.ConnectionId }).SendAsync(
                "NewOnlineUser",
                _userInfoInMemory.GetUserInfo(Context.User.Identity.Name)
                );
        }
        else
        {
            // existing user joined again
            
        }

        await Clients.Client(Context.ConnectionId).SendAsync(
            "Joined",
            _userInfoInMemory.GetUserInfo(Context.User.Identity.Name)
            );

        await Clients.Client(Context.ConnectionId).SendAsync(
            "OnlineUsers",
            _userInfoInMemory.GetAllUsersExceptThis(Context.User!.Identity!.Name)
        );
    }

    public Task SendDirectMessage(string message, string targetUserName)
    {
        var userInfoSender = _userInfoInMemory.GetUserInfo(Context.User!.Identity!.Name);
        var userInfoReciever = _userInfoInMemory.GetUserInfo(targetUserName);
        return Clients.Client(userInfoReciever.ConnectionId).SendAsync("SendDM", message, userInfoSender);
    }
}

using System.Collections.Concurrent;

namespace ApiServer.SignalRHubs;

public class UserInfoInMemory
{
    private readonly ConcurrentDictionary<string, UserInfo> _onlineUser = new();

    public bool AddUpdate(string? name, string connectionId)
    {
        if (!string.IsNullOrEmpty(name))
        {
            var userAlreadyExists = _onlineUser.ContainsKey(name);

            var userInfo = new UserInfo
            {
                UserName = name,
                ConnectionId = connectionId
            };

            _onlineUser.AddOrUpdate(name, userInfo, (key, value) => userInfo);

            return userAlreadyExists;
        }

        throw new ArgumentNullException(nameof(name));
    }

    public void Remove(string? name)
    {
        if(!string.IsNullOrEmpty(name))
        {
            _onlineUser.TryRemove(name, out _);
        }
    }

    public IEnumerable<UserInfo> GetAllUsersExceptThis(string? username)
    {
        if(string.IsNullOrEmpty(username))
            return new List<UserInfo>();

        return _onlineUser.Values.Where(item => item.UserName != username);
    }

    public UserInfo GetUserInfo(string? username)
    {
        if (!string.IsNullOrEmpty(username))
        {
            _onlineUser.TryGetValue(username, out UserInfo? userInfo);
            if(userInfo != null)
                return userInfo;
        }

        throw new ArgumentNullException(nameof(username));
    }
}

namespace ApiServer.SignalRHubs;

public class UserInfo
{
    public string ConnectionId { get; set; } = string.Empty;
    public string UserName { get; set; } = string.Empty;
}

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
	.AddJwtBearer(options =>
	{
		options.Authority = "https://localhost:5001/";
		options.Audience = "dataEventRecordsApi";
		options.IncludeErrorDetails = true;
		options.SaveToken = true;
		options.TokenValidationParameters = new TokenValidationParameters
		{
			ValidateIssuer = true,
			ValidateAudience = true,
			ValidateIssuerSigningKey = true,
			NameClaimType = "email",
			RoleClaimType = "role",
			ValidAudiences = new List<string> { "dataEventRecordsApi" },
			ValidIssuers = new List<string> { "https://localhost:5001/" }
		};
		options.Events = new JwtBearerEvents
		{
			OnMessageReceived = context =>
			{
				if ( ( context.Request.Path.Value!.StartsWith("/signalrhome")
					|| context.Request.Path.Value!.StartsWith("/looney")
					|| context.Request.Path.Value!.StartsWith("/usersdm") 
				   )
					&& context.Request.Query.TryGetValue("token", out StringValues token)
				)
				{
					context.Token = token;
				}

				return Task.CompletedTask;
			},
			OnAuthenticationFailed = context =>
			{
				var te = context.Exception;
				return Task.CompletedTask;
			}
		};
});

import { Subscription, Observable } from 'rxjs';

import { HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { HubConnection } from '@microsoft/signalr';
import { Store } from '@ngrx/store';
import * as directMessagesActions from './store/directmessages.action';
import { OidcSecurityService } from 'angular-auth-oidc-client';
import { OnlineUser } from './models/online-user';
import * as signalR from '@microsoft/signalr';

@Injectable()
export class DirectMessagesService {
  private hubConnection: HubConnection | undefined;
  private headers: HttpHeaders | undefined;
  private token: string = '';

  isAuthorizedSubscription: Subscription | undefined;
  isAuthorized = false;

  constructor(
    private store: Store<any>,
    private oidcSecurityService: OidcSecurityService
  ) {
    this.headers = new HttpHeaders();
    this.headers = this.headers.set('Content-Type', 'application/json');
    this.headers = this.headers.set('Accept', 'application/json');

    this.init();
  }

  sendDirectMessage(message: string, userId: string): string {
    if (this.hubConnection) {
      this.hubConnection.invoke('SendDirectMessage', message, userId);
    }
    return message;
  }

  leave(): void {
    if (this.hubConnection) {
      this.hubConnection.invoke('Leave');
    }
  }

  join(): void {
    console.log('DMS: send join');
    if (this.hubConnection) {
      this.hubConnection.invoke('Join');
    }
  }

  private init(): void {

    this.oidcSecurityService.isAuthenticated$.subscribe(({ isAuthenticated }) => {
      this.isAuthorized = isAuthenticated;

      if (this.isAuthorized) {
        this.initHub();
      }

      console.warn('authenticated: ', isAuthenticated);
    });
  }

  private initHub(): void {
    console.log('DMS: initHub');

    this.oidcSecurityService.getAccessToken().subscribe((token) => {

      let tokenValue = '';
      this.token = token;
      const tokenApiHeader = 'Bearer ' + this.token;
      this.headers = this.headers.append('Authorization', tokenApiHeader);
      console.log(tokenApiHeader)
      tokenValue = '?token=' + token;


      const url = 'https://localhost:44390/';

      this.hubConnection = new signalR.HubConnectionBuilder()
        .withUrl(`${url}usersdm${tokenValue}`)
        .configureLogging(signalR.LogLevel.Information)
        .build();

      this.hubConnection.start().catch((err) => console.error(err.toString()));

      this.hubConnection.on('NewOnlineUser', (onlineUser: OnlineUser) => {
        console.log('DMS: NewOnlineUser received');
        console.log(onlineUser);
        this.store.dispatch(
          directMessagesActions.receivedNewOnlineUserAction({
            payload: onlineUser,
          })
        );
      });

      this.hubConnection.on('OnlineUsers', (onlineUsers: OnlineUser[]) => {
        console.log('DMS: OnlineUsers received');
        console.log(onlineUsers);
        this.store.dispatch(
          directMessagesActions.receivedOnlineUsersAction({
            payload: onlineUsers,
          })
        );
      });

      this.hubConnection.on('Joined', (onlineUser: OnlineUser) => {
        console.log('DMS: Joined received');
        console.log(onlineUser);
      });

      this.hubConnection.on(
        'SendDM',
        (message: string, onlineUser: OnlineUser) => {
          console.log('DMS: SendDM received');
          this.store.dispatch(
            directMessagesActions.receivedDirectMessageForUserAction({
              payload: { onlineUser, message },
            })
          );
        }
      );

      this.hubConnection.on('UserLeft', (name: string) => {
        console.log('DMS: UserLeft received');
        this.store.dispatch(
          directMessagesActions.receivedUserLeftAction({ payload: name })
        );
      });
    });
  }
}

import { sendDirectMessageAction } from './../store/directmessages.action';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, Observable } from 'rxjs';
import { select, Store } from '@ngrx/store';
import { DirectMessagesState } from '../store/directmessages.state';
import * as directMessagesAction from '../store/directmessages.action';
import { OidcSecurityService } from 'angular-auth-oidc-client';
import { OnlineUser } from '../models/online-user';
import { DirectMessage } from '../models/direct-message';
import * as fromSelectorsStore from '../store/directmessages.selectors';

@Component({
  selector: 'app-direct-message-component',
  templateUrl: './direct-message.component.html',
})
export class DirectMessagesComponent implements OnInit {
  public async: any;
  onlineUser: OnlineUser = { connectionId: '', userName: '' };
  selectedOnlineUserName = '';
  isAuthorized = false;
  message = '';
  onlineUsers$: Observable<OnlineUser[]>;
  directMessages$: Observable<DirectMessage[]>;
  // connected$: Observable<boolean>;
  connected = false;
  constructor(
    private store: Store<any>,
    private oidcSecurityService: OidcSecurityService
  ) {
    this.onlineUsers$ = this.store.pipe(
      select(fromSelectorsStore.selectOnlineUsers)
    );
    this.directMessages$ = this.store.pipe(
      select(fromSelectorsStore.selectDirectMessages)
    );

    this.store
      .pipe(select(fromSelectorsStore.selectConnected))
      .subscribe((data) => {
        console.log(data);
        this.connected = data;
      });
  }

  ngOnInit(): void {

    this.oidcSecurityService.isAuthenticated$.subscribe(({ isAuthenticated }) => {
      this.isAuthorized = isAuthenticated;

      console.warn('authenticated: ', isAuthenticated);
    });

    console.log('IsAuthorized:' + this.isAuthorized);
  }

  selectChat(onlineuserUserName: string): void {
    console.log('DMC: selectedOnlineUserName' + onlineuserUserName);
    this.selectedOnlineUserName = onlineuserUserName;
  }

  sendMessage(): void {
    console.log(
      'DMC: send message to:' + this.selectedOnlineUserName + ':' + this.message
    );

    const message = {
      payload: {
        message: this.message,
        userNameTarget: this.selectedOnlineUserName,
      },
    };

    this.store.dispatch(directMessagesAction.sendDirectMessageAction(message));
  }

  getUserInfoName(directMessage: DirectMessage): string {
    if (directMessage.fromOnlineUser) {
      return directMessage.fromOnlineUser.userName;
    }

    return '';
  }

  disconnect(): void {
    this.store.dispatch(directMessagesAction.leaveAction());
  }

  connect(): void {
    this.store.dispatch(directMessagesAction.joinAction());
  }
}

<div class="full-width" *ngIf="isAuthorized">
  <div class="left-navigation-container">
    <nav *ngIf="connected">
      <mat-list>
        <mat-list-item *ngFor="let onlineuser of onlineUsers$ | async">
          <a mat-button (click)="selectChat(onlineuser.userName)">{{
            onlineuser.userName
          }}</a>
        </mat-list-item>
      </mat-list>
    </nav>
  </div>
  <div class="column-container content-container">
    <div>
      <div class="row-container info-bar">
        <h3 style="padding-left: 20px">{{ selectedOnlineUserName }}</h3>
        <a
          mat-button
          (click)="sendMessage()"
          *ngIf="connected && selectedOnlineUserName && message !== ''"
          >SEND</a
        >
        <a mat-button (click)="disconnect()" *ngIf="connected">Disconnect</a>
        <a mat-button (click)="connect()" *ngIf="!connected">Connect</a>
      </div>
    </div>

    <div class="content" *ngIf="selectedOnlineUserName">
      <mat-form-field style="width: 95%">
        <textarea
          matInput
          placeholder="your message"
          [(ngModel)]="message"
          cdkTextareaAutosize
          cdkAutosizeMinRows="2"
          cdkAutosizeMaxRows="5"
        ></textarea>
      </mat-form-field>

      <mat-chip-list class="mat-chip-list-stacked">
        <ng-container *ngFor="let directMessage of directMessages$ | async">
          <ng-container *ngIf="getUserInfoName(directMessage) !== ''">
            <mat-chip selected="true" style="width: 95%">
              {{ getUserInfoName(directMessage) }} {{ directMessage.message }}
            </mat-chip>
          </ng-container>

          <ng-container *ngIf="getUserInfoName(directMessage) === ''">
            <mat-chip style="width: 95%">
              {{ getUserInfoName(directMessage) }} {{ directMessage.message }}
            </mat-chip>
          </ng-container>
        </ng-container>
      </mat-chip-list>
    </div>
  </div>
</div>