examples/browser/index.html

<html>

<head>
    <title>mam.js Simple Browser Example</title>
</head>

<body>
    <h1>mam.js Simple Browser Example</h1>
    <pre id="console"></pre>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.48/BigInteger.min.js"></script>
    <script src="../../node_modules/@iota/iota.js/dist/cjs/index-browser.js"></script>
    <script src="../../dist/cjs/index-browser.js"></script>
    <script>
        function consoleLog(message, obj) {
            const con = document.getElementById("console");
            con.innerHTML += message + "<br/>";
            if (obj) {
                con.innerHTML += obj + "<br/>";
            }
        }
        function consoleLink(lnk) {
            const con = document.getElementById("console");
            con.innerHTML += `<a href="${lnk}" target="_blank">${lnk}</a><br/>`;
        }

        function generateSeed(length) {
            const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ9';
            let seed = '';
            while (seed.length < length) {
                const arr = new Uint8Array(1);
                crypto.getRandomValues(arr);
                if (arr[0] < 243) {
                    seed += charset.charAt(arr[0] % 27);
                }
            }
            return seed;
        }

        async function run(asciiMessage) {
            // Setup the details for the channel.
            const mode = 'restricted';
            const sideKey = 'MYKEY';
            let channelState;

            // Try and load the channel state from json file
            try {
                const currentState = localStorage.getItem('channelState');
                if (currentState) {
                    channelState = JSON.parse(currentState.toString());
                }
            } catch (e) { }

            // If we couldn't load the details then create a new channel.
            if (!channelState) {
                channelState = Mam.createChannel(generateSeed(81), 2, mode, sideKey)
            }

            // Create a MAM message using the channel state.
            const mamMessage = Mam.createMessage(channelState, Mam.TrytesHelper.fromAscii(asciiMessage));

            // Display the details for the MAM message.
            consoleLog('Seed:', channelState.seed);
            consoleLog('Address:', mamMessage.address);
            consoleLog('Root:', mamMessage.root);
            consoleLog('NextRoot:', channelState.nextRoot);

            // Decode the message using the root and sideKey.
            // The decode is for demonstration purposes, there is no reason to decode at this point.
            const decodedMessage = Mam.parseMessage(mamMessage.payload, mamMessage.root, sideKey);

            // Display the decoded data.
            consoleLog('Decoded NextRoot', decodedMessage.nextRoot);
            consoleLog('Decoded Message', decodedMessage.message);

            // Store the channel state.
            try {
                localStorage.setItem('channelState', JSON.stringify(channelState, undefined, "\t"));
            } catch (e) {
                consoleLog(e)
            }

            // So far we have shown how to create and parse a message
            // but now we actually want to attach the message to the tangle
            const client = new Iota.SingleNodeClient("https://chrysalis-nodes.iota.org");

            // Attach the message.
            consoleLog('Attaching to tangle, please wait...')
            const { messageId } = await Mam.mamAttach(client, mamMessage, "MY9MAM");
            console.log(`Message Id`, messageId);
            consoleLog(`You can view the latest message in the mam channel here`);
            consoleLink(`https://explorer.iota.org/mainnet/streams/0/${mamMessage.root}/${mode}/${sideKey}`);

            // Initial root
            const initialRoot = Mam.channelRoot({
                ...channelState,
                start: 0
            });

            if (initialRoot !== mamMessage.root) {
                consoleLog(`You can view all the messages in the mam channel here`);
                consoleLink(`https://explorer.iota.org/mainnet/streams/0/${initialRoot}/${mode}/${sideKey}`);
            }

            // Try fetching it as well.
            consoleLog('Fetching from tangle, please wait...');
            const fetched = await Mam.mamFetch(client, mamMessage.root, mode, sideKey)
            if (fetched) {
                consoleLog('Fetched', Mam.TrytesHelper.toAscii(fetched.message));
            } else {
                consoleLog('Nothing was fetched from the MAM channel');
            }
        }

        run("Hello MAM World!")
            .then(() => consoleLog("done"))
            .catch((err) => consoleLog(err));

    </script>
</body>

</html>