How to Separate REST API URL and WebSocket URL in Webix Chat Widget?

Webix JS
1

Hi Webix team,

I’m integrating the Webix Chat widget into my application, and I need to use a different URL for the initial REST API endpoint (config.url) than the one used for the WebSocket connection (websocket:true).

Right now, the chat widget seems to use the same URL for both HTTP requests and the WebSocket connection, which causes issues in my backend setup since the WebSocket and HTTP endpoints are handled separately.

Is there a built-in way to define a separate WebSocket URL in the chat configuration? If not, is there a recommended workaround to achieve this?

Thanks in advance!

2

Hello Evoxdev_Apps

The Chat widget, as well as most of our complex widgets (except Kanban and Spreadsheet) is built as a modularized app on Webix Jet, and the user can customize existing modules or add new ones. Modules are implemented as JetViews (ES6 classes) where any UI element, data-related service, or feature can be customized by the same rules.

By default, the Webix Chat widget uses the same URL defined in app.config.url for both HTTP requests and the WebSocket connection. If you want to use two separate endpoints, you will need to customize some of the methods in the Chat’s Backend service.

I recommend reviewing the source code located at /sources/models/Backend.js , especially the sections that utilize app.config.url . This will give you insight into how the current implementation works and where to make the necessary adjustments.

One straightforward approach is:

  • to leave app.config.url for websockets and rewrite URL for all methods using REST API endpoint
  • to add another url for all methods that send regular requests
    Please check the example: Code Snippet

The second approach is to override the ready method to establish a custom WebSocket connection while still using the original REST API URL for other methods:

ready() {

    this._ready = /* a custom Websocket connection via RPC client, should support the same   features */;

    return this._ready;
}

Here you can find example of structures that are returned by Backend Service methods (for all methods - some of them use REST API, some utilize websocklets)
Here is Remote procedure call client which is initialized in the constructor and always uses app.config.url.
Here is the backend example tha is used by default.