使用xmpp.js从浏览器连接Openfire服务器遇阻求助

核心排查步骤 #

• 验证Openfire WebSocket服务状态
  登录Openfire管理后台，进入「服务器」→「服务器设置」→「WebSocket」页面，确认「启用WebSocket」已勾选，端口设置为7070（默认值）。可以用curl -i ws://127.0.0.1:7070/ws测试端点是否可达，正常会返回101 Switching Protocols。
• 解决浏览器跨域限制
  不要直接用file://协议打开index.html，必须通过HTTP服务器（比如VS Code的Live Server插件、Python的python -m http.server）访问页面，否则浏览器会阻止WebSocket跨域连接。
• 修正xmpp.js配置参数
  • service：正确的Openfire WebSocket地址是ws://127.0.0.1:7070/ws（注意末尾不要多余斜杠，部分版本对斜杠敏感）。
  • domain：必须严格匹配Openfire服务器的「XMPP域名」，可在后台「服务器」→「服务器信息」中查看，比如默认是你的主机名，若手动设置为myDomain，需确保服务器端配置一致。
  • username和password：确认Openfire中已创建该用户，且密码正确、用户未被禁用。

修正后的app.js示例 #

const { client, xml, jid } = window.XMPP;

const xmpp = client({
    service: "ws://127.0.0.1:7070/ws",
    domain: "your-openfire-xmpp-domain", // 替换为实际XMPP域名
    username: "existing-user", // 替换为已创建的用户名
    password: "user-password", // 替换为用户密码
});

xmpp.on("error", (err) => {
    console.error("XMPP错误:", err);
    console.error("错误堆栈:", err.stack); // 打印堆栈方便定位问题
});

xmpp.on("offline", () => {
    console.log("已离线");
});

xmpp.on("status", (status) => {
    console.log("连接状态:", status);
});

xmpp.on("online", async (address) => {
    console.log("已在线，地址:", address.toString());
    // 发送在线状态
    await xmpp.send(xml("presence"));

    // 测试发送消息到另一个已存在的用户
    const message = xml(
        "message",
        { type: "chat", to: "another-user@your-openfire-xmpp-domain" },
        xml("body", {}, "hello from xmpp.js")
    );
    await xmpp.send(message);
});

xmpp.start().catch(err => {
    console.error("启动连接失败:", err);
});

额外排查点 #

• 打开Chrome开发者工具的「网络」标签，筛选「WS」类型，查看WebSocket连接的请求和响应，确认是否有404、CORS错误或其他异常状态码。
• 查看Openfire日志（openfire/logs/debug.log），里面会记录连接失败的详细原因，比如认证失败、域名不匹配等。

内容的提问来源于stack exchange，提问作者Rushi Vaghasiya