114 lines
3.9 KiB
Svelte
114 lines
3.9 KiB
Svelte
<script>
|
|
import { Collection } from "pocketbase";
|
|
import ApiClient from "@/utils/ApiClient";
|
|
import CommonHelper from "@/utils/CommonHelper";
|
|
import CodeBlock from "@/components/base/CodeBlock.svelte";
|
|
import SdkTabs from "@/components/collections/docs/SdkTabs.svelte";
|
|
|
|
export let collection = new Collection();
|
|
|
|
$: backendAbsUrl =
|
|
window.location.href.substring(0, window.location.href.indexOf("/_")) || ApiClient.baseUrl;
|
|
</script>
|
|
|
|
<div class="alert">
|
|
<strong class="label label-primary">SSE</strong>
|
|
<div class="content">
|
|
<p>/api/realtime</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content m-b-base">
|
|
<p>Subscribe to realtime changes via Server-Sent Events (SSE).</p>
|
|
<p>
|
|
Events are send for <strong>create</strong>, <strong>update</strong>
|
|
and <strong>delete</strong> record operations (see "Event data format" section below).
|
|
</p>
|
|
<div class="alert alert-info m-t-10">
|
|
<div class="icon">
|
|
<i class="ri-information-line" />
|
|
</div>
|
|
<div class="contet">
|
|
<p>
|
|
<strong>You could subscribe to a single record or to an entire collection.</strong>
|
|
</p>
|
|
<p>
|
|
When you subscribe to a <strong>single record</strong>, the collection's
|
|
<strong>ViewRule</strong> will be used to determine whether the subscriber has access to receive
|
|
the event message.
|
|
</p>
|
|
<p>
|
|
When you subscribe to an <strong>entire collection</strong>, the collection's
|
|
<strong>ListRule</strong> will be used to determine whether the subscriber has access to receive
|
|
the event message.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-title">Client SDKs example</div>
|
|
<SdkTabs
|
|
js={`
|
|
import PocketBase from 'pocketbase';
|
|
|
|
const client = new PocketBase('${backendAbsUrl}');
|
|
|
|
...
|
|
|
|
// (Optionally) authenticate
|
|
client.users.authViaEmail('test@example.com', '123456');
|
|
|
|
// Subscribe to changes in any record from the collection
|
|
client.realtime.subscribe('${collection?.name}', function (e) {
|
|
console.log(e.record);
|
|
});
|
|
|
|
// Subscribe to changes in a single record
|
|
client.realtime.subscribe('${collection?.name}/RECORD_ID', function (e) {
|
|
console.log(e.record);
|
|
});
|
|
|
|
// Unsubscribe
|
|
client.realtime.unsubscribe() // remove all subscriptions
|
|
client.realtime.unsubscribe('${collection?.name}') // remove only the collection subscription
|
|
client.realtime.unsubscribe('${collection?.name}/RECORD_ID') // remove only the record subscription
|
|
`}
|
|
dart={`
|
|
import 'package:pocketbase/pocketbase.dart';
|
|
|
|
final client = PocketBase('${backendAbsUrl}');
|
|
|
|
...
|
|
|
|
// (Optionally) authenticate
|
|
client.users.authViaEmail('test@example.com', '123456');
|
|
|
|
// Subscribe to changes in any record from the collection
|
|
client.realtime.subscribe('${collection?.name}', (e) {
|
|
print(e.record);
|
|
});
|
|
|
|
// Subscribe to changes in a single record
|
|
client.realtime.subscribe('${collection?.name}/RECORD_ID', (e) {
|
|
print(e.record);
|
|
});
|
|
|
|
// Unsubscribe
|
|
client.realtime.unsubscribe() // remove all subscriptions
|
|
client.realtime.unsubscribe('${collection?.name}') // remove only the collection subscription
|
|
client.realtime.unsubscribe('${collection?.name}/RECORD_ID') // remove only the record subscription
|
|
`}
|
|
/>
|
|
|
|
<div class="section-title">Event data format</div>
|
|
<CodeBlock
|
|
content={JSON.stringify(
|
|
{
|
|
action: "create",
|
|
record: CommonHelper.dummyCollectionRecord(collection),
|
|
},
|
|
null,
|
|
2
|
|
).replace('"action": "create"', '"action": "create" // create, update or delete')}
|
|
/>
|