Bitrix Framework

  Class $Bitrix.PullClient

Class allows to organize handling Pull client from Bitrix Framework. If your component works not only inside Bitrix24 but also as the external widget (online forms, online chat widget), you need to use this class. In all the rest of cases, use the import import {PULL as Pull} from 'pull.client'.

$Bitrix.PullClient.get

Method for getting current configured Pull client for current application (for external third-party applications).

this.$Bitrix.PullClient.get(): PullClient

Result:

PullClient – configured Pull-client.

$Bitrix.PullClient.set

Method for setting new Pull client into current Vue application.

this.$Bitrix.PullClient.set(instance: PullClient): void

Parameters:

Additionally:

When the method this.$Bitrix.PullClient.set was not called, uses the default Pull client BX.PULL. It won't be suitable for external resources and you need to initialize your own client when initializing Vue application. Example can be the function initPullClient, described in the file /bitrix/modules/imopenlines/install/js/imopenlines/component/widget/src/widget.js.

$Bitrix.PullClient.isCustom

Using this method can get you the information if the standard Pull client.

this.$Bitrix.PullClient.isCustom(): boolean

Event BitrixVue.events.pullClientChange

When you need to react to a Pull client update, you can subscribe to a change event:

import {BitrixVue} from 'ui.vue3';
this.$Bitrix.eventEmitter.subscribe(BitrixVue.events.pullClientChange);

  Examples

Access to functions inside the component is performed in the same manner as to any other variable – via this.. There are, however, nuances of use in the hook beforeCreate. You can find more details in the < a href="/support/training/course/index.php?COURSE_ID=68&CHAPTER_ID=024720#interpolation" target="_blank"> chapter description .

Setting a specialized Pull client

import {BitrixVue} from 'ui.vue3';

class Widget
{
    ...
	attachTemplate()
	{
		const pullClient = this.pullClient;

		this.#application = BitrixVue.createApp({
			components: {
				Component
			},
            beforeCreate()
			{
			...
				this.$bitrix.PullClient.set(pullClient);
			},
			template: '<Component/>'
		}).mount(this.rootNode);
	}
    ...
}

Handling a Pull client

import {BitrixVue} from 'ui.vue3';

const Component = {
	...
    created(): void
	{
		this.#pull = this.$Bitrix.PullClient.get();
	},
	created()
	{
		this.#pull.subscribe({
			moduleId: 'im',
			command: 'messageChat',
			callback: (params, extra, command) => {
				console.warn('Receive message:', params.message.text)
			}
		});
	},
	...
});