New features of the platform VoxImplant: Instant Messaging and Presence + demo on ReactJS / Flux

Recently, we have been busy working on a major update of VoxImplant, which should make the platform even more flexible and convenient for developers of communication services. The number of new functions is quite large, so we will talk about them in order and start with messaging and presentation. Since the banal description of the functionality is not very interesting to anyone, then we will immediately analyze the example of creating an application for internal corporate communications using the popular ReactJS and Flux. This allows you to quickly make a more or less complex application, and at the same time show how to use VoxImplant with this approach. We also have Presence with some interesting features, about which we will tell in more detail and explain later why this might be necessary.

Messaging and Presence

In order to use these functions, you need to enable their support for your VoxImplant application in the control panel, otherwise they will not be available - it makes no sense to waste platform resources for customers who do not need it. So, what is included in the first release of these functions: 1-on-1 chat (group also appears in the near future), support for contact lists generated either automatically for the entire application (if the number of users does not exceed 1000) or manually users, presence, transfer of additional states (typing, etc.), in general, everything you need to create a decent chat. The features of the present include the mode when the system automatically changes the status of clients during calls or for SIP registrations, but we will write about this separately at the end of the article. XSS protection is separately implemented, it is enabled by default and is relevant specifically for the Web SDK, you can disable it through a special setting in the config.

Architecture

Many are probably already familiar with ReactJS , as well as the Flux approach, both themes are actively promoted by Facebook and React Native has recently appeared. Having studied the examples of colleagues from FB, we decided to make a relatively simple chat application based on the framework, applying Flux at the same time. The purpose of this article is not to explain these terms, for this there are many other articles on Habré and on the Internet. We will only tell you how to make VoxImplant Web SDK friends with this approach to developing web applications using the example of our corporate messenger, and at the same time we will explain everything about the new platform functionality.

Training

First you need to deploy somewhere to deploy our application:

git clone https://github.com/voximplant/messenger.git cd messenger 

The structure of the project will be as follows:

 . ├── build ├── css ├── images ├── scss ├── sounds ├── src | ├── actions | ├── components | ├── constants | ├── dispatcher | ├── stores | ├── utils | └── app.js | ├── gulpfile.js └── index.html 

Then you need to pull all the libraries, including ReactJS and Flux:

 npm install 

Before building with Gulp, you need to create an application in your VoxImplant account and enable IM / presence and Application Roster functionality for it:

And also in the file src / app.js change in line

 <App name="appname.accname.voximplant.com" /> 

appname and accname for your application name and VoxImplant account.
')
Build using Gulp:

 gulp default 

You can open index.html in the browser. Log in under one of the created users and watch the chat with the contact list, presentation and a couple more useful functions:


In Flux, everything revolves around the data stream and event manager, you can find out more on facebook.imtqy.com/flux/docs/overview.html , in this concept our VoxImplant Web SDK is used in the utils VoxImplantAPIUtils.js file, we initialize the SDK, describe event handlers and the interface to the SDK functions. From there, actions are created via the VoxImplantActionCreators.js functions, which we put in the actions folder.

Description of API methods and events for IM / presence

With regard to new events related to message loading, a new VoxImplant.IMEvents list has appeared . Event names speak for themselves, but you can always refer to the documentation for clarification.

This is the first version of our messenger, so there may be some bugs and problems, you can safely tell us about them, fork and fix them. In the near future plans to add support for audio / video calls between users (there is everything on the platform) and group text chat (will be available after the next update of the SDK and the platform). The update of the mobile SDK with support for all messaging functions will appear a little later.

Automatic state change during calls

The Web SDK now has a mode in which when you call, the server automatically sets the status to the user in DND. To do this, use the VoxImplant.LoginOptions class and pass the 3rd parameter to the VoxImplant.Client login method.

 { serverPresenceControl: true } 

After completion of the call, the client will return to the state in which he was before the automatic change of status.

Just in case, once again link to GitHub github.com/voximplant/messenger