example/browser-example.html

<html>

<head>
    <title>HotPocket browser example</title>

    <script src="https://cdn.jsdelivr.net/npm/hotpocket-js-client@0.5.5/browser.min.js"></script>

    <!--HotPocket client library requires libsodium js for cryptographic operations.-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/libsodium-wrappers/0.5.4/sodium.min.js"
        integrity="sha512-oRfU7aik4u7f0dPAKgOyA4+bb/YRGfAaD5RA4Z3Mb2ycPcGDs+k8qAnDNd7ouruoqlIHSuGVaTTlEs91Gvd37A=="
        crossorigin="anonymous"></script>

    <script>
        async function testFunc() {

            const hpServer = "wss://localhost:8081";

            const keys = await HotPocket.generateKeys(); // Can provide existing hex private key as parameter as well.

            // Simple connection to single server without any validations.
            const hpc = await HotPocket.createClient([hpServer], keys);

            // Maintain multiple connections with contract id/version and trusted server key validation.
            // const hpc = await HotPocket.createClient(
            //     [
            //         "wss://localhost:8081",
            //         "wss://localhost:8082",
            //         "wss://localhost:8083"
            //     ],
            //     keys,
            //     {
            //         contractId: "3c349abe-4d70-4f50-9fa6-018f1f2530ab",
            //         contractVersion: "1.0",
            //         trustedServerKeys: [
            //             "ed5597c207bbd251997b7133d5d83a2c6ab9600810edf0bdb43f4004852b8c9e17",
            //             "ed0b2ffd75b67c3979d3c362d8350ec190f053fa27d3dfcb2eced426efd1d3affc",
            //             "edd2e1a817387d68adf8adb1d0b339e3f04868c3c81bf6a7472647f10657e31aa1"
            //         ],
            //         protocol: HotPocket.protocols.json,
            //         requiredConnectionCount: 2,
            //         connectionTimeoutMs: 5000
            //     });

            // We'll register for HotPocket events before connecting.

            // This will get fired if HP server disconnects unexpectedly.
            hpc.on(HotPocket.events.disconnect, () => {
                console.log('Disconnected');
            })

            // This will get fired as servers connects/disconnects.
            hpc.on(HotPocket.events.connectionChange, (server, action) => {
                console.log(server + " " + action);
            })

            // This will get fired when contract sends an output.
            hpc.on(HotPocket.events.contractOutput, (r) => {
                r.outputs.forEach(o => console.log(`Output (ledger:${r.ledgerSeqNo})>> ${o}`));
            })

            // This will get fired when the unl public key list changes.
            hpc.on(HotPocket.events.unlChange, (unl) => {
                console.log("New unl received:");
                console.log(unl); // unl is an array of public keys.
            })

            // This will get fired when any ledger event occurs (ledger created, sync status change).
            hpc.on(HotPocket.events.ledgerEvent, (ev) => {
                console.log(ev);
            })

            // Establish HotPocket connection.
            if (!await hpc.connect()) {
                console.log('Connection failed.');
                return;
            }
            console.log('HotPocket Connected.');

            // After connecting, we can subscribe to events from the HotPocket node.
            // await hpc.subscribe(HotPocket.notificationChannels.unlChange);
            // await hpc.subscribe(HotPocket.notificationChannels.ledgerEvent);

            const stat = await hpc.getStatus();
            console.log(stat);

            const response = await hpc.submitContractReadRequest("My read request");
            console.log(response);

            const input = await hpc.submitContractInput("My input");
            console.log(input.hash);
            const submissionResult = await input.submissionStatus;
            console.log(submissionResult);

            await hpc.close();
        }
        testFunc();
    </script>
</head>

<body>
    HotPocket browser client example page. Use developer tools to see activity.
    <br />
    (Add the server address to browser exceptions if the HotPocket server is using a self signed certificate.)
</body>

</html>