Connecting to Openfire server from browser using xmpp.js

Openfire Openfire Support
1

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/client@0.12.1/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.

2
2955×368 14 KB

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. (How to connect to openfire using websocket - #2 by wroot) (Help xmpp.js interoperate with Openfire - #2 by Mike90)

2

Hi. I’m sorry you have to go through this. I do not immediately see anything wrong with your connection configuration, although the browser is refusing to connect.

The service ws://127.0.0.1:7070/ws/ seems to be correct to me (although you might want to use wss - the encrypted variant, for better security).

Did you check if Openfire is actually running, and that its web bindings are enabled?

Openfire gives you a handy set of connection strings that you can use in the admin console. You can navigate to Server > Server Settings > Web Binding to see those.

image
image1159×695 92.3 KB

(please note that in this screenshot, non-default ports are used)

3

Okay thank you, the Web Bindings was disabled (by default), even though its listed as a port on the home page. Couldn’t enable it using default port (7070), changed to another number and now it is enabled.