Skip to content

Home

Jump to bottom
Valeria Titova edited this page Apr 15, 2021 · 41 revisions

General information

Xabber for Web - web XMPP client written in JavaScript. It is intended to be run in browser, and is a one page application.

Main repository is located at https://github.com/redsolution/xabber-web

Repository of Xabber websocket server is located at https://github.com/redsolution/xabber-websocket

Requirements

Xabber for Web works in a browser and can interact with other services only with HTTP protocol. Because of this client requires a proxy service. Xabber for Web can work with BOSH Connection manager included with most XMPP servers. However, in this case Xabber for Web won't be able to work with other XMPP servers.

To circumvent this constraint we've developed Xabber Websocket Server - standalone web-server that allows web client to establish connection with any XMPP server.

1. Install and setup Xabber Websocket server

You need GNU make and git in your PATH. Also you should install erlang package (or esl-erlang), maybe different for your system.

To build and run the app, use the following command:

git clone https://github.com/redsolution/xabber-websocket.git
cd xabber-websocket
make run

2. Run Xabber Websocket Server

If make is successful, archive xabber_ws-NN.tar.gz with an application will be created in the _rel/xabber_ws/ directory

Copy the archive to your server and use the following command:

mkdir xabber_ws
tar -xvf xabber_ws-NN.tar.gz -C xabber_ws
cd xabber_ws
bin/xabber_ws start

Connection URL for web applications like Xabber web: ws://yourserver:8080/websocket

Install and setup Xabber for Web

1. Clone main repository

git clone https://github.com/redsolution/xabber-web
cd xabber-web

2. Configure client

Create index.html (or choose any other *.html name) file in target directory, configure client parameters. Use this template file.

Configuration parameters are to be provided as arguments to xabber.configure() function.

  • CONNECTION_URL - URL of running Xabber websocket server. This is a required parameter.
  • LOG_LEVEL - determines amount of data to be shown in browser console log. Default value is 'ERROR'.
    • 'NONE' - do not log anything;
    • 'ERROR' - log only serious errors (recommended for production);
    • 'WARN' - log warnings and errors;
    • 'INFO' - log verbose data (recommended for development);
    • 'DEBUG' - log all data.
  • DEBUG - true/false. If set to true, xabber object would be accessible from browser console. It is a main object of a client. Some dependent modules (constants, templates, utils and others) would also be available. Default value is false.
  • XABBER_ACCOUNT_URL - URL of main page of Xabber Account. Default value: 'https://www.xabber.com/account'
  • API_SERVICE_URL - URL API for authorisation in Xabber Account and for settings synchronisation. Default value is 'https://api.xabber.com/api/v1'
  • USE_SOCIAL_AUTH - true/false, if set to true, Social Authorisation to Xabber Account is available. Default value is true.
  • DEFAULT_LOGIN_SCREEN - 'xabber' or 'xmpp', which auth type would be displayed first on welcome screen. Default value is 'xabber'.
  • STORAGE_NAME_ENDING - used only for development. String value that allows running several tabs with web client in one browser. Every tab would have independent localStorage database. Value must be unique. Default value is empty string.
  • TURN_SERVERS_LIST - [{url: 'url', credential: 'credential', username: 'username'}], list of TURN servers used for connecting a WebRTC session. Default value is [{url: 'turn:numb.viagenie.ca', credential: 'muazkh', username: '[email protected]'}, {urls: 'turn:192.158.29.39:3478?transport=udp', credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=', username: '28224511:1379330808'}, {urls: 'turn:192.158.29.39:3478?transport=tcp', credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=', username: '28224511:1379330808'}].
  • DISABLE_LOOKUP_WS - true/false. Disable WebSocket endpoint detection for a server using host metadata (see RFC: Discovering the WebSocket Connection Method). Default value is false.
  • REGISTER_XMPP_ACCOUNT - true/false. Enable XMPP account registration in login screen. Default value is true.
  • REGISTER_XMPP_ACCOUNT_URL - URL for XMPP account registration. Default value is 'https://www.xabber.com/account/auth/signup/'
  • REGISTER_XMPP_ACCOUNT_TEXT - text for button of XMPP account registration. Default value is "register XMPP account".
  • MAIN_COLOR - main client color. It will apply to some buttons, hovering icons and etc. The value must be one of ["red", "green", "blue", "deep-purple", "orange", "lime", "pink", "purple", "indigo", "light-blue", "cyan", "teal", "light-green", "amber", "deep-orange", "brown", "blue-grey"]. Default value is 'red'.
  • CLIENT_NAME - "Xabber for Web". Full client name which used in some texts.
  • SHORT_CLIENT_NAME - "Xabber". Short client name which used in some texts.
  • CLIENT_LOGO - URL of client logo wich used on login screen, main settings screen, about screen. Default is 'images/xabber-logo-96.png'
  • TOOLBAR_LOGO - URL of client logo wich used in toolbar after login. Default is 'images/xabber-logo.png'.
  • ENABLE_XABBER_ACCOUNT - true/false. Enable connecting to Xabber account and rendering Xabber account interface. Default is true.
  • SCREEN_ABOUT - true/false. If set to true, screen "About" would be rendered. Default is true.

The only required parameter is CONNECTION_URL.

Configuration example:


    <script>
        require(["xabber"], function (xabber) {
            xabber.configure({
                CONNECTION_URL: 'wss://ws.xabber.com/websocket',
                LOG_LEVEL: 'WARN',
                DEBUG: true,
                XABBER_ACCOUNT_URL: 'http://localhost:9000/account',
                API_SERVICE_URL: 'http://localhost:9001/api/v1',
                STORAGE_NAME_ENDING: 'mydev1'
            });
            xabber.start();
        });
    </script>

3. Run web server

Run any web-server to serve static content from that catalogue.

Setting up developer environment

  1. Make sure that you have installed node.js and npm.
  2. Install dependencies:

make deps-install - install

make deps-flush - delete

Probably you will need run sudo ln -s /usr/bin/nodejs /usr/bin/node before.

  1. Create dev.html (or any *.html) file and configure it as described above. Use this template file.
  2. Launch development web-server: make httpserver Web client would be accessible at http://localhost:8000/<file_name>.html URL

To download translations run node translations/loadTranslations.js "<crowdin personal access token>" (you must generate the personal access token by going to Crowdin Account Settings > API & SSO > New Token).

To build translations (convert it from xml to JSON) run node translations/convertTranslations.js

To build js/css for production (files dist/xabber.min.js and dist/xabber.min.css) run make minify

Clone this wiki locally