Easiest way for Openfire + BOSH + Converse.js

Quick notes:

In order to enable BOSH to be able to use converse.js, you need Openfire and another server to handle port 80 requests. BOSH enables Converse to use http to translate the XMPP (not XAMPP) data between the Openfire server and the web browser where Converse.js is being called. There are other guides for Linux machines and Nginx web server. There are also several products like Converse.

Converse alternatives: Strophe or JitsiMeet

XAMPP alternatives: IIS or Nginx

Openfire alternatives: Ejabbered or Prosidy

I have choosen XAMPP, Openfire, and Converse.js because I have played with lotā€™s of different options and have decided that these are the best choices for Windows users (and I have the most tinkering/experience with).

Here are my assumptions (what I am using in my rig):

  • Ubuntu 16.04 x64
  • Openfire 4.1.5
    • Using MySQL connector
  • Apache2
  • Converse 3.1.0
  • 7-Zip (to extract .zip files) [sudo apt install p7zip-full]
  • Basic wireless router with Port Forwarding abilities (Mine, if anyone cares: Netgear Nighthawk R7500)
  • Letā€™s Encrypt Certificate (link)
    Directions:
  1. Download and build Converse.js A) This is the hardest step. Good luck

  2. I donā€™t download and build anymore (because Iā€™m lazy) and they now have a CDN!

A) So, skip this step until laterā€¦ (Step 6C)

  1. Download and install Openfire 4.1.3 (Openfire 4.1.4 and 4.1.5 break websockets and consequently Openfire Meetings! But you can use 4.1.5 if you want to use just chat.)

    A) I installed Openfire to C:\Program Files (x86)\Openfire [now: /usr/share/openfire/]

    B) I set up my server name to my FreeDNS Address.

    C) Make sure BOSH is enabled and at port 7070, now 7443.

  1. Download and install XAMPP.

A) I installed to C:\xampp

B) Add to this file: C:\xampp\apache\conf\extra\httpd-vhosts.conf

i) Where ā€œexample.comā€ is either your IP address or your FreeDNS name.

<VirtualHost *:443>
  ServerName example.com
  #requests sent to /http-bind/ will be redirected to localhost:7443
  ProxyPass /http-bind/ https://example.com:7443/http-bind/
  ProxyPassReverse /http-bind/ https://example.com:7443/http-bind/
</VirtualHost>

C) Stop the XAMPP server. Then start it again.

D) Add a new file to the conf directory of Openfire( C:\Program Files (x86)\Openfire\conf\ OR /usr/share/openfire/conf ) called crossdomain.xml that contains:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <site-control permitted-cross-domain-policies="all"/>
    <allow-access-from domain="*" to-ports="5222,7443" secure="true"/>
</cross-domain-policy>
  1. After you have done all of this, you need to open up some ports on your router.

A) Every router is different but you need to log in to your router (normally at http://192.168.1.1)

B) You need to port forward to your computerā€™s local IP address (something like 192.168.1.101):

i) 80, 443, 3478, 5222, 7443, 9091, 40000-45000 (I use these for Jingle nodes/Media proxy/Jitsi-videobridge, but they are not needed)

  1. Restart both Openfire and XAMPP.

  2. After you have done all this converse is the final step.

A) In your htdocs or equivalent folder you need the converseā€™s index.html and the build, css, and component folderā€™s at a bare minimum (copy the entire contents if need be).

B) Navigate to the index file in your browser. Since I put mine in a folder called ā€œconverseā€ I would use: http://127.0.0.1/converse

i) This will get you started. If you are making your own pageā€¦

A) Make a basic html page.

B) Add this in the head of a html document (calls the required css and js to enable converse chat):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/css/converse.min.css">
<script src="https://cdn.conversejs.org/dist/converse.min.js"></script>

D) And add this after the tag but before the tag:

      i)  Where bosh_service_url is the name of your IP address or FreeDNS name ( ie. [https://127.0.0.1/http-bind/](http://127.0.0.1:7070/http-bind/) )

ii) Play with the converse.initialize options to match what settings you would like to have. Read more about converse.js configuration variables here.

iii) Example log in script:

<script>converse.initialize({bosh_service_url: 'https://example.com/http-bind/',show_controlbox_by_default: true,});</script>

iv) Example anonymous log in script:

<script>converse.initialize({
allow_logout:false,
allow_muc_invitations:false,
allow_contact_requests:false,
authentication:'anonymous',
auto_login:true,
auto_join_rooms:['anonymous@conference.example.com',],
notify_all_room_messages:['anonymous@conference.example.com',],
bosh_service_url:'https://example.com/http-bind/',
websockets_url:'',
jid:'example.com',
keepalive:true,
hide_muc_server:true,
play_sounds:true,
show_controlbox_by_default:false,
strict_plugin_dependencies:false,
});</script>
  1. Debugging (the fun part):

NOTE I worked on getting BOSH working for almost a day and a half before I found the right condition to make it work.

Remember It is the struggle that brings such pain and torment to all coders/admins alike, but those who do not experience this struggle will not reap the benfits of figuring it out and have it working. The joy you get when you experience this emotion is so satisfying.

NOTE2 Canā€™t get something to work? Let me know! I will do my best to help you figure it out.

Q1. I can access my Openfire server from a local computer, but cannot from an external IP (outside of the office)

A1. Port forwarding is probably not configured properly. Use this little utility to see if the port is accessible to the outside world.

Q2. I can chat using a Jitsi, Pidgeon, etc. client, but cannot connect to my server using converse.

A2. Your BOSH server probably is not set up properly. Use this bosh_service_url to test that theory: https://conversejs.org/http-bind/

A2. If when using that url, you can log in to your server, the BOSH is not quite set up correctly. Go back over Steps 3 B i, 3 D, and 3 E.

A2. Still having problems? Let me help you! Contact me

  1. I hope this helps someone out there.

  2. PS This is what I get when I access my https://example.com/http-bind/ directly from a web browser (so it should look like this always?):

Very Nice and useful Article.Thanks for sharing.

I setup successfully on local machine with no internet access.

Communicate between agsXMPP (.net lib) and conversejs.

but I am still not clear how BOSH is working is this case

bosh_service_url: ā€˜http://example.com:7070/http-bind/ā€™ or ā€˜http://127.0.0.1/converseā€™

both are not assessable in my system still it works,can you please explain?

and can I change openfire port 5222 to xyz port,if yes is there any changes in conversejs or xmpp configuration?

Very nice article,I have my grail app in which I have configured that converse.js.

I can not access http://192.168.1.18:7070/http-bind/. I have configured Bosh as per you have shown. But I have not installed that XAMPP because there are already like Tomcat/Apacheserver which can handle those port 80 stuff.

The only concern is I can not access that http://192.168.1.18:7070/http-bind/ or http://server.name.com:7070/http-bind/.

Can you help in this?

I am working on converse.js, I dont find builds directory when I download converse from GIT. Please can anyone tell me why I am not getting this directory??

Because you must ā€œbuildā€ it. Please read this for more info: SOURCE

Not really build.

You can use the content of the ā€œDISTā€ folter plus ā€œSRCā€.

But leroy, ā€œConverse.JSā€ aside, itā€™s working preoperly with my openfire when i use their BOSH service.

When i change to ā€œhttp://mypage.mydomain:7070/http-binding/ā€ it doesnā€™t.

I also donā€™t like the idea of using XAMPP since my servir runs on IIS. Canā€™t openfire operate the BOSH itself?

Thanks

Great tutorial. It really helped me get something going but alas I get a error when trying strophe.js.

One thing I did find out which wasnā€™t mention here relates to apache.

I had to allow the following modules in httpd.conf

LoadModule proxy_module modules/mod_proxy.so

LoadModule proxy_http_module modules/mod_proxy_http.so

Not quite sure it wonā€™t allow the connection though

Does anyone know how to change/update the original post? I cannot seem to find the ā€œEditā€ option.

Edit should be under Actions on the right panel. Unless something happened to permissions as this is an older document.

This is what I see. Looks like I should just make a new post anyway to update it?

Can you try now?

1 Like

Thank you wroot.

So Iā€™ve updated it so that it no longer uses port 7070 to http-bind. It will actually proxy all data through port 80/443 so that it then forwards it to the correct port 7070/7443 so it gets around more restrictive firewalls. In my implementation, I have in my apache2 config not my domain name of https://example.com:7443/http-bind/ but https://192.168.1.130:7443/http-bind/ to make it work with my employerā€™s work firewall.

Somewhere in IIS, you should have the ability to forward traffic going to a certain directory to another port. No, I have no idea what this is or what it is called sorry, but try it out.

The purpose of the bind is to ā€œtranslateā€ traffic from port 80 to 7070. That is what the bosh does (I think).