Angular UI not updating after SockJS connect

I try to setup websocket connection in Angular. When adding the SockJs socket, the buttons are no longer working. Please help me why is the button no longer responding.

Not working code(Button not working):

import {Component, NgZone, OnInit} from '@angular/core';
import SockJS from 'sockjs-client';

@Component({
selector: 'app-notifications',
template: `
<h2>WebSocket Messages</h2>
<div *ngFor="let message of messages">
{{ message }}
</div>
<button (click)="onclick()">CONFIRM</button>
`,
})
export class NotificationsComponent implements OnInit {
public messages: string[] = [];
private stompClient: any;

constructor(private ngZone: NgZone) {}

public onclick() {
this.messages.push('TestItem');
}

ngOnInit(): void {
const socket = new SockJS('http://localhost:8082/ws'); // Replace with your actual endpoint
}
}



Working code(Button working):

import {Component, NgZone, OnInit} from '@angular/core';
import SockJS from 'sockjs-client';

@Component({
selector: 'app-notifications',
template: `
<h2>WebSocket Messages</h2>
<div *ngFor="let message of messages">
{{ message }}
</div>
<button (click)="onclick()">CONFIRM</button>
`,
})
export class NotificationsComponent implements OnInit {
public messages: string[] = [];
private stompClient: any;

constructor(private ngZone: NgZone) {}

public onclick() {
this.messages.push('TestItem');
}

ngOnInit(): void {
// const socket = new SockJS('http://localhost:8082/ws'); // Replace with your actual endpoint
}
}



When i set up the connection, the messages come in, i see them in the console. But the UI is not updated and the button handler is no longer called(also when adding console.log in the button handler, the console log is not working when adding the socket code)

Code that does print to the console but disables the button:

import {Component, NgZone, OnInit} from '@angular/core';
import SockJS from 'sockjs-client';
import {Stomp} from "@stomp/stompjs";

@Component({
selector: 'app-notifications',
template: `
<h2>WebSocket Messages</h2>
<div *ngFor="let message of messages">
{{ message }}
</div>
<button (click)="onclick()">CONFIRM</button>
`,
})
export class NotificationsComponent implements OnInit {
public messages: string[] = [];
private stompClient: any;

constructor(private ngZone: NgZone) {}

public onclick() {
this.messages.push('TestItem');
}

ngOnInit(): void {
const socket = new SockJS('http://localhost:8082/ws'); // Replace with your actual endpoint
this.stompClient = Stomp.over(socket);

this.stompClient.connect({}, () => {
console.log('Connected!');
this.stompClient.subscribe('/topic/notifications', (message: any) => {
this.ngZone.run(() => {
const messageBody = JSON.parse(message.body);
console.log('Received message:', messageBody);
this.messages.push(messageBody.content);
});
});
}, (error: any) => {
console.error('Error while connecting to WebSocket:', error);
});
}
}



This prints incoming messages from the websocket:

Received message: { id: 111, name: 'NHH', description: '', timestampStart: 0, timestampEnd: 0 }

To the console, but the button is no longer working and the UI is not updated. What is wrong?(angular 17)

I tried commenting out the code for sockjs, and then it worked fine.

Continue reading...