I am using appwrite cloud + angular (appwrite 21.2.1).
On Chrome, when I have a realtime subscribtion and I reload the page or navigate to another page, realtime features stop working and I start getting the following errors over and over again:
WebSocket connection to 'wss://-------/v1/realtime?project=------&channels%5B%5D=databases.b-----' failed:
createSocket @ sdk.js:544
(anonymous) @ sdk.js:494
Realtime got disconnected. Reconnect will be attempted in 1 seconds.
(anonymous) @ sdk.js:560
When II fully close my browser and open it again, it works again for the first page, until I refresh or navigate to another page.
It works correctly on Firefox and Edge.
Following the guide in https://appwrite.io/docs/quick-starts/angular, I have configured the following minimally working example:
src/lib/appwrite.ts:
import { Client} from 'appwrite';
export const client = new Client()
.setEndpoint('https://<redacted>/v1')
.setProject('<redacted>');
src/app/app.ts:
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { client } from '../lib/appwrite';
@Component({
selector: 'app-root',
imports: [RouterOutlet],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
protected readonly title = signal('test-app');
private unsubscribe : (() => void) | null = null;
ngOnInit() {
this.unsubscribe = client.subscribe(
[`*`],
(response) => console.log(response.payload)
);
}
onDestroy() {
this.unsubscribe?.();
}
}
TL;DR
Issue: WebSocket connection fails and Realtime feature disconnects when reloading or navigating in Chrome, but works in Firefox and Edge.
Solution:
- Make sure WebSocket connections are properly handled on page reload or navigation in Angular.
- Consider implementing a reconnect mechanism for WebSocket connections in your Angular app.
- Review and test WebSocket configurations for Chrome compatibility.
- Check for any browser-specific issues or bugs related to WebSocket connections in Chrome.
