How to properly connect strophe.js client with Prosody server using XMPP protocol
I have installed and configured the Prosody server. It listens to the standard localhost: 5222. Added an administrator in the config file - user1@example.com. Each request to the server ended with an error:
<stream:stream xmlns:stream="http://etherx.jabber.org/streams" xmlns="jabber:client" id="" version="1.0">
<stream:error>
<not-well-formed xmlns="urn:ietf:params:xml:ns:xmpp-streams"/>
</stream:error>
</stream:stream>
As a client, I would like to use strophe.js. I am only sending the presence string ($ pres). Here is my code.
'use strict';
angular.module('xmppTestApp')
.controller('ChatCtrl', function () {
var vm = this;
var url = "http://localhost:5222";
var connection = null;
var output = document.getElementById("output");
function log(message) {
var line = document.createElement("div");
line.textContent = message;
output.appendChild(line);
}
function connectHandler(cond) {
if (cond == Strophe.Status.CONNECTED) {
log("connected");
connection.send($pres());
}
else {
log("not connected");
}
}
vm.connectB = function() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.info(url);
console.info(username);
console.info(password);
connection = new Strophe.Connection(url);
connection.connect(username, password, connectHandler);
}
});
I see an error in the console:
XMLHttpRequest cannot load http://localhost:5222/. No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:9000' is therefore not allowed access.
How can I add the Access-Control-Allow-Origin 'header to my request?
When I try to send a request to localhost: 5222 (no http) I get:
XMLHttpRequest cannot load localhost:5222. Cross origin requests are only supported for HTTP.
And when I send it via websocket I get:
WebSocket connection to 'ws://localhost:5222/' failed: Error during WebSocket handshake: Unexpected response code: 200
Fiddler provides a protocol violation report:
The server didn't return properly-formatted HTTP Headers. Maybe missing altogether
(e.g. HTTP/0.9), maybe only \r\r instead of \r\n\r\n?
source to share
First of all, it looks like you are trying to connect directly to port 5222 (usually used for XMPP), but in order to use Strophe from a client webpage, you have to use an HTTP binding (aka BOSH).
XMPP vs BOSH
Strophe says XMPP, but it's unique in that it doesn't actually transmit data using the XMPP protocol, instead, it uses BOSH to do this (i.e. bi-directional streams over synchronous HTTP). This is because the XMPP protocol is designed to keep the client and server connected all the time, and we all know that this is not how HTTP works. Simply put, BOSH allows your HTTP client to receive data asynchronously without explicitly requesting it. If you have any more questions about BOSH, let me know and I'll try my best to explain what it does and why you need it.
You must enable this feature in prosody before connecting to Strophe, check this link to get the setting.
Once you configure BOSH, you will need to change the client side code to use a different address. You probably set the path + port for BOSH to something like :5280/http-bind/
. At this point, you need to make sure Strophe is using this URL instead of the actual XMPP port 5222.
Finally, CORS is required for any resource outside your domain and your website port. In your example, your client has to make a request to a URL that runs on a different port + domain as the page itself (the connection between Strophe and Prosody). The good news is that Prosody already supports CORS and makes it really easy. All of this is explained in more detail on the page I linked to earlier.
Hope it helps!
source to share