I'm making an Openfire client for browser. But I'm lost on how to even connect my browser to the Openfire server running on my localhost. Documentation from xmpp.js and Openfire both are insufficient and unclear. Nor is there any source online which explains how the xmpp.js library works clearly.
index.html
<head>
...
<script src="https://unpkg.com/@xmpp/[email protected]/dist/xmpp.min.js" crossorigin></script>
<script src="app.js" type="module" defer></script>
...
</head>
app.js
const { client, xml, jid } = window.XMPP;
const xmpp = client({
service: "ws://127.0.0.1:7070/ws/",
domain: "myDomain",
username: "myUsername",
password: "myPassword",
});
xmpp.on("error", (err) => {
console.error(err);
});
xmpp.on("offline", () => {
console.log("offline");
});
xmpp.on("status", (status) => {
console.log(status);
});
xmpp.on("stanza", async (stanza) => {
if (stanza.is("message")) {
await xmpp.send(xml("presence", { type: "unavailable" }));
await xmpp.stop();
}
});
xmpp.on("online", async (address) => {
// Makes itself available
await xmpp.send(xml("presence"));
// Sends a chat message to itself
const message = xml(
"message",
{ type: "chat", to: address },
xml("body", {}, "hello world"),
);
await xmpp.send(message);
});
xmpp.start().catch(console.error);
I've attached the error I'm getting on my browser console. Any help would be great, thank you.
I have tried various URLs for the service parameter, e.g. 'xmpp://127.0.0.1:5222' but from what I read from one answer on the Openfire community, directly using xmpp protocol is not the way, we have to use 'ws' protocol. (https://discourse.igniterealtime.org/t/how-to-connect-to-openfire-using-websocket/81860/2) (https://discourse.igniterealtime.org/t/help-xmpp-js-interoperate-with-openfire/89867/2)
Found the solution
The Web Bindings settings was disabled, by default, even though its listed in the front page of the admin panel (facepalm).
Go to Server Settings -> Web Bindings and enable it.
If you are unable to (like me), change the ports and try again, it will be enabled.