You can use it the same as you do with other yjs providers, but you have to pass it a socket which can be created with someting like this:
// set the peer id
const peerId = window.localStorage.getItem('peerId') ?? (await Encryption.createId())
window.localStorage.setItem('peerId', peerId)
// set the signing keys
const keySeed = window.localStorage.getItem('keySeed') ?? createId()
| 'use client' | |
| import { useEffect } from 'react' | |
| export function ServiceWorkers(): JSX.Element { | |
| useEffect(() => { | |
| if (typeof window === 'undefined') { | |
| return | |
| } | |
| if ('serviceWorker' in navigator) { |
| import { signal, effect } from "@preact/signals-core"; | |
| interface CustomStorage { | |
| getItem(key: string): void; | |
| setItem(key: string, value: string | null): void; | |
| } | |
| /** | |
| * A version of signal() that persists and recalls its value in localStorage. | |
| * |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Service-worker demo</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script> | |
| if ( "serviceWorker" in navigator ) { |
| import { Peer } from 'socket:peer' | |
| import process from 'socket:process' | |
| import Buffer from 'socket:buffer' | |
| import fs from 'socket:fs' | |
| window.onload = async () => { | |
| const clusterId = '14ecd42...' // truncated, make your own clusterId | |
| const publicKeyHex = 'c43c1ddd...' // truncated, make your own hex encoded key | |
| const privateKeyHex = '46adc2f8e9077c72...' // truncated, make your own hex encoded key |
| import { useSignal, signal, effect } from '@preact/signals'; | |
| import { useLayoutEffect, useMemo, useRef } from 'preact/hooks'; | |
| /** @template T @typedef {T extends (infer U)[] ? U : never} Items */ | |
| /** @param {{ v, k?, f }} props */ | |
| const Item = ({ v, k, f }) => f(v, k); | |
| /** | |
| * Like signal.value.map(fn), but doesn't re-render. |
| // Tested on Hyperswarm V4, corestore V6, Hypercore V10 | |
| // Server | |
| const Hyperswarm = require('hyperswarm') | |
| const Corestore = require("corestore") | |
| const ram = require("random-access-memory") | |
| async function runServer(){ | |
| const corestore = new Corestore(ram) |
⚠️ Note 2023-01-21
Some things have changed since I originally wrote this in 2016. I have updated a few minor details, and the advice is still broadly the same, but there are some new Cloudflare features you can (and should) take advantage of. In particular, pay attention to Trevor Stevens' comment here from 22 January 2022, and Matt Stenson's useful caching advice. In addition, Backblaze, with whom Cloudflare are a Bandwidth Alliance partner, have published their own guide detailing how to use Cloudflare's Web Workers to cache content from B2 private buckets. That is worth reading,
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Service-worker demo</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script> | |
| if ( "serviceWorker" in navigator ) { |