using headless-converse.js with custom GUI

I'm working on integrating headless-converse.js in an Angular application using a custom GUI. I've configured it as a service and initialized it successfully using converse.initialize({...}), but I’m facing a few issues:

What I'm trying to do:

Use headless-converse.js inside Angular as a service.

Build my own chat UI (not using Converse’s default UI).

Connect users to Openfire server via BOSH.

Fetch user roster/groups and presence.

Send/receive messages using the API.

Problems I'm encountering

Connection seems to fail silently or doesn't trigger connected events.

Groups (roster) are not being fetched.

converse.api is sometimes undefined or not ready.

I’m unsure about the correct lifecycle in Angular (e.g. where to wait for Converse to fully initialize).

What I’ve done: Used headless-converse.js as an NPM module.

Created a service in Angular like this:

@Injectable({ providedIn: 'root' })
export class XmppChatService {
async initChat(jid: string, password: string) {
await converse.initialize({
bosh_service_url: 'https://myserver:7443/http-bind',
jid,
password,
authentication: 'login',
auto_login: true,
auto_reconnect: true,
allow_non_roster_messaging: true,
use_stream_management: true,
whitelisted_plugins: ['converse-headless']
});

// Can't reliably use API or detect presence
converse.api.listen.on('connected', () => {
console.log('Connected');
});
}
}


Questions:

Where and when should I use converse.api.listen.on() inside Angular to detect connected, rosterFetched, etc.? Is there a better way to wait for full initialization? What’s the best practice to handle message queue or retries when contact is offline? Any working examples of headless-converse.js inside an Angular app?

Environment:

Angular 14+
Converse.js 6.0.1
Openfire 5.x (tested also with 4.6.6)
Using BOSH (http-bind)


Any help, working example, or clarification would be appreciated! Thanks!

Continue reading...