Skip to content

Commit

Permalink
add examples for sendUpdate, setUpdateListener
Browse files Browse the repository at this point in the history
Closes #60

Some might say that the setUpdateListener example is too convoluted,
but you can't really showcase the usage of `serial`
without this much code.
Plus, a briefer example is already shown in `sendUpdate()` docs.
  • Loading branch information
WofWca committed Jul 13, 2024
1 parent afcea51 commit 40ac2ef
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 0 deletions.
15 changes: 15 additions & 0 deletions src-docs/spec/sendUpdate.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,21 @@ Send an update to all peers.
- `descr`: short, human-readable description what this update is about.
this is shown e.g. as a fallback text in an e-mail program.

Example:

```js
window.webxdc.sendUpdate(
{ payload: "Hello from Alice" },
"A 'hello' message"
);

// Peers can receive messages as such:
window.webxdc.setUpdateListener((update) => {
console.log(update.payload);
});
// 'Hello from Alice' is printed in the console
```

All peers, including the sending one,
will receive the update by the callback given to [`setUpdateListener()`](./setUpdateListener.html).

Expand Down
50 changes: 50 additions & 0 deletions src-docs/spec/setUpdateListener.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,56 @@ Each `update` which is passed to the callback comes with the following propertie

- `update.summary`: optional, short text, shown beside icon (see [`sendUpdate()`])

Example:

```js
let myDocumentState = localStorage.getItem("myDocumentState") ?? "";

let initialPendingUpdatesHandled = false;
const initialPendingUpdatesHandledPromise = window.webxdc.setUpdateListener(
(update) => {
// Remember that the listener is invoked for
// your own `window.webxdc.sendUpdate()` calls as well!

applyDocumentUpdate(update.payload);
localStorage.setItem("myDocumentState", myDocumentState);
localStorage.setItem("lastHandledUpdateSerial", update.serial);

const areMoreUpdatesPending = update.serial !== update.max_serial;
if (
!areMoreUpdatesPending &&
// We'll make the initial render when the promise resolves,
// because if there are no pending updates,
// the listener will not be invoked.
initialPendingUpdatesHandled
) {
renderDocument();
}
},
parseInt(localStorage.getItem("lastHandledUpdateSerial") ?? "0")
);

initialPendingUpdatesHandledPromise.then(() => {
initialPendingUpdatesHandled = true;
renderDocument();
});

function applyDocumentUpdate(myDocumentUpdate) {
// Dummy `applyDocumentUpdate` logic.
// Yours might be more complex,
// such as applying a chess move to the board.
myDocumentState = myDocumentUpdate;
};
// Let's only call this when there are no pending updates.
function renderDocument() {
document.body.innerText = myDocumentState;
};

// ...
// Other peers, or you:
window.webxdc.sendUpdate({ payload: "Knight d3" }, "Bob made a move!");
```
Calling `setUpdateListener()` multiple times is undefined behavior: in current implementations only the last invocation works.
[`sendUpdate()`]: ./sendUpdate.html

0 comments on commit 40ac2ef

Please sign in to comment.