Skip to content

Home

Jump to bottom
Sergey Vladimirov edited this page Aug 30, 2017 · 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

Что нужно для работы Xabber web?

Клиент Xabber web работает в браузере и взаимодействует с другими сервисами только по протоколу HTTP. Поэтому прямое взаимодействие клиента с XMPP сервером невозможно: необходимо наличие промежуточного звена. В качестве него можно использовать BOSH Connection manager, встроенный в большинство XMPP серверов. Но в этом случае Xabber web сможет работать только с данным XMPP сервером.

Мы предлагаем использовать Xabber websocket server - standalone веб-сервер, позволяющий веб-клиенту устанавливать соеденение с любым XMPP сервером.

  1. Установка и настройка Xabber websocket server

You need GNU make and git in your PATH. Также в системе должен быть предустановлен erlang (для Ubuntu - erlang или esl-erlang).

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

git clone https://github.com/redsolution/xabber-websocket.git
cd xabber-websocket
make run
  1. Запуск 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

Установка и настройка Xabber web for production.

  1. Clone main repository.
git clone https://github.com/redsolution/xabber-web
cd xabber-web
  1. 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.

The only required parameter is CONNECTION_URL.

Configuration example:


    <script>
        require(["xabber"], function (xabber) {
            xabber.configure({
                CONNECTION_URL: 'wss://web.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>
  1. Запустите любой веб-сервер для отдачи статикой текущего каталога.

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

  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 build js/css for production (files dist/xabber.min.js and dist/xabber.min.css) run make minify

Clone this wiki locally