← Cloudflare Realtime / realtime / realtimekit / custom-plugins

Vytváření vlastních pluginů

Tento návod vysvětluje, jak pomocí Cloudflare RealtimeKit Core SDK vytvořit vlastní plugin a spustit ho uvnitř schůzky.

Vlastní plugin je DOM element, který zaregistrujete v SDK. Jakmile účastník plugin aktivuje, RealtimeKit ho zpřístupní všem v dané relaci a vykreslí ho v rozložení schůzky.

Tato stránka navazuje na Inicializujte SDK a Pluginy průvodců. Přečtěte si je nejprve.

Příklady předpokládají, že jste již importovali potřebné balíčky a inicializovali SDK.

Plugin se skládá ze dvou částí:

• A komponenta: DOM element (HTMLElement) která obsahuje uživatelské rozhraní a logiku vašeho pluginu.
• A registrace: konfigurační objekt, který předáte SDK, aby mohlo komponentu vypsat, aktivovat a vykreslit.

RealtimeKit synchronizuje stav aktivace v rámci celé relace. Chcete-li sdílet data pluginu mezi účastníky, použijte kolaborativní úložiště.

Komponenta pluginu musí být HTMLElement. Sestavte ji přímo jako vlastní element, nebo vytvořte kontejnerový element a do něj vložte strom komponent svého frameworku.

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);

Zaregistrujte pluginy dostupné v relaci při inicializaci SDK. Předejte pole konfigurací pluginů jako defaults.plugins, pomocí pluginElement kterou jste vytvořili v kroku 1, jako 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,
			},
		],
	},
});

Popis všech konfiguračních polí najdete v Zaregistrujte plugin.

Po registraci se plugin zobrazí v meeting.plugins.all. Aktivujte jej, aby byl aktivní pro všechny účastníky relace.

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 emituje události při změně svého stavu. Použijte je k inicializaci nebo ukončení komponenty při její aktivaci nebo deaktivaci.

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
});

Úplný seznam událostí pluginu najdete v Naslouchejte událostem pluginu.

Každý účastník spouští vlastní kopii komponenty pluginu, proto potřebujete způsob, jak mezi nimi sdílet stav. RealtimeKit nabízí dvě vestavěné možnosti komunikace v reálném čase:

• Kolaborativní úložiště, sdílené úložiště klíč-hodnota, které synchronizuje stav v rámci celé relace.
• Vysílání zpráv, odešle vlastní událost všem účastníkům schůzky.

Pro pluginy s jednoduchými požadavky tato vestavěná API stačí k obsluze vaší kolaborativní logiky.

// 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;
});

Pro bohatší, plnohodnotnou spolupráci můžete svůj plugin spárovat s vyhrazeným frameworkem třetí strany:

• Zkontrolujte Pluginy API pro úplný Plugin a Plugins reference.
• Použijte kolaborativní úložiště a vytvoříte tak bohatší sdílené zážitky.
• Začínáme s Příklad pluginů RealtimeKit ↗ pro funkční implementaci v Reactu.