Azure webpubsub service receive message from admin to student vs student to admin using Angular

In Angular, I'm creating an Azure Web PubSub chat application where an admin can send messages to a student, and the student can send messages to the admin.

Admin to student: const apiUrl = ${environment.Negotiate_apiBaseUrl}/${constant.NEGOTIAGE}?userid=${studentId_Admin}; student to Admin: const apiUrl = ${environment.Negotiate_apiBaseUrl}/${constant.NEGOTIAGE}?userid=${studentId};

Groups are being created on the backend, and the issue is that messages aren't being received either from the admin to the student or from the student to the admin, despite the connection being successfully established on both sides.

Am I missing something? I noticed that the await this.client.on("server-message", (e) => { ... }); is not always being invoked. Please review the script below and let me know if anything is incorrect.

WebPubSubService.ts

import { WebPubSubClient, WebPubSubClientCredential } from '@azure/web-pubsub-client';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';

@Injectable({
providedIn: 'root',
})
export class WebPubSubService {
private client!: WebPubSubClient;
public isConnected = false;
constructor(private http: HttpClient) {}

// Initialize WebSocket connection for student
async initializePatientWebSocket(studentId: string) {
try {
const apiUrl = `${environment.Negotiate_apiBaseUrl}/${constant.NEGOTIAGE}?userid=${studentId}`;
const response: any = await this.http.get(apiUrl).toPromise();
console.log(response)
const clientAccessUrl = response?.url;
if (!clientAccessUrl) {
throw new Error('clientAccessUrl is undefined');
}

this.client = new WebPubSubClient({
getClientAccessUrl: clientAccessUrl,
} as WebPubSubClientCredential);

this.client.on("connected", (e) => {
console.log(`Connected: ${e.connectionId}.`);
});

// Listen for messages from patients
await this.client.on("server-message", (e) => {
console.log("Received message", e)
if (e.message.data instanceof ArrayBuffer) {
console.log(`Received message ${Buffer.from(e.message.dataType).toString("base64")}`);
} else {
console.log(`Received message ${JSON.stringify(e.message.data)}`);
}
});

await this.client.start();
this.isConnected = true;
console.log('admin WebSocket connection established');

} catch (error) {
console.error('Error initializing WebSocket for admin:', error);
}
}

isWebSocketConnected(): boolean {
return this.isConnected;
}
// Send message to a admin
async sendMessageToPharmacist(studentId: string, message: string) {
if (!this.isConnected || !this.client) {
console.error('WebSocket client is not connected. Cannot send message.');
return;
}

try {
// Send the message event to the server
await this.client.sendEvent('message', {
messageText: "test message from student"
}, 'json');

console.log(`Message sent to admin ${studentId}: ${message}`);
} catch (error) {
console.error('Error sending message to admin:', error);
}
}
}


Similarly implemented Student to Admin file as mentioned below other end to establish chat feature. Chat message both end not receiving...

Continue reading...