← Cloudflare Realtime / realtime / realtimekit / custom-plugins

Создание собственных плагинов

Это руководство объясняет, как создать пользовательский плагин и запустить его во встрече с помощью Cloudflare RealtimeKit Core SDK.

Пользовательский плагин представляет собой DOM-элемент, который регистрируется в SDK. Когда участник активирует плагин, RealtimeKit делает его активным для всех в сессии и отображает в разметке встречи.

Эта страница опирается на Инициализируйте SDK и Плагины руководства. Сначала прочитайте их.

Примеры предполагают, что вы уже импортировали необходимые пакеты и инициализировали SDK.

Плагин состоит из двух частей:

• A компонент: DOM-элемент (HTMLElement) который содержит UI и логику вашего плагина.
• A регистрация: объект конфигурации, который вы передаёте в SDK, чтобы он мог перечислить, активировать и отрисовать компонент.

RealtimeKit синхронизирует состояние активации в рамках сессии. Чтобы обмениваться данными плагина между участниками, используйте коллаборативные хранилища.

Компонент плагина должен быть HTMLElement. Создайте его напрямую как пользовательский элемент либо создайте контейнер и смонтируйте в него дерево компонентов вашего фреймворка.

class MyCounterPlugin extends HTMLElement {
	connectedCallback() {
		this.innerHTML = `
			<div class="counter">
				<button id="increment">This is a counter plugin</button>
				<span id="value">0</span>
			</div>
		`;
	}
}

customElements.define("my-counter-plugin", MyCounterPlugin);

const pluginElement = document.createElement("my-counter-plugin");

import { createRoot } from "react-dom/client";

function CounterPlugin() {
	return <div className="counter">This is a counter plugin</div>;
}

const pluginElement = document.createElement("div");
createRoot(pluginElement).render(<CounterPlugin />);

import {
	createComponent,
	ApplicationRef,
	EnvironmentInjector,
} from "@angular/core";
import { CounterPluginComponent } from "./counter-plugin.component";

const pluginElement = document.createElement("div");

const componentRef = createComponent(CounterPluginComponent, {
	environmentInjector: this.injector,
	hostElement: pluginElement,
});

this.appRef.attachView(componentRef.hostView);

Зарегистрируйте плагины, доступные в сессии, при инициализации SDK. Передайте массив конфигураций плагинов как defaults.plugins, с помощью pluginElement который вы создали на шаге 1, в качестве component.

RealtimeKitClient.init({
	authToken: "<auth_token>",
	defaults: {
		plugins: [
			{
				id: "counter",
				name: "Counter",
				icon: "https://example.com/counter.png",
				permissions: {
					canActivate: true,
					canDeactivate: true,
				},
				component: pluginElement,
			},
		],
	},
});

Описание всех полей конфигурации см. в Зарегистрируйте плагин.

После регистрации плагин появляется в meeting.plugins.all. Активируйте его, чтобы он стал активным для всех участников сессии.

const plugin = meeting.plugins.all.get(pluginId);
await plugin.activate();

const plugins = useRealtimeKitSelector((m) => m.plugins);
const plugin = plugins.all.get(pluginId);
await plugin.activate();

A Plugin объект генерирует события при изменении своего состояния. Используйте их, чтобы инициализировать или удалять компонент при его активации или деактивации.

const plugin = meeting.plugins.all.get(pluginId);

plugin.on("enabled", () => {
	// The plugin became active for the local participant
});

plugin.on("closed", () => {
	// The plugin was deactivated for the local participant
});

Полный список событий плагина см. в Прослушивайте события плагина.

Каждый участник запускает собственную копию компонента плагина, поэтому вам нужен способ обмена состоянием между ними. RealtimeKit предлагает два встроенных варианта коммуникации в реальном времени:

• Совместные хранилища, общее хранилище ключ-значение, которое синхронизирует состояние в рамках сессии.
• Рассылка сообщений, отправляйте пользовательские события всем участникам встречи.

Для плагинов с простыми требованиями этих встроенных API достаточно для реализации логики совместной работы.

// Create or get a store for your plugin
const store = meeting.stores.create("counter");

// Update a value for all participants
await store.set("value", 1);

// React to updates from any participant
store.subscribe("value", ({ value }) => {
	document.querySelector("#value").textContent = value;
});

Для более полной и функциональной совместной работы можно использовать плагин вместе со специализированным сторонним фреймворком:

• Просмотрите Плагины API для получения полного Plugin и Plugins справочник.
• Используйте коллаборативные хранилища для создания более насыщенного совместного опыта.
• Начало работы с Пример плагинов RealtimeKit ↗ для рабочей реализации на React.