saulteafarmer/mmalmi.github.io

mirror of https://github.com/mmalmi/mmalmi.github.io.git synced 2025-05-17 11:45:48 +00:00

Martti Malmi 67c8148826 .

2020-02-10 16:29:26 +02:00

3.3 KiB

Raw Blame History

layout	title	date	tags
post	Javascript live chat tutorial: Free alternative to Firebase	2020-02-10 13:37:00 +0000	tutorial decentralization chat iris

Need a chat box for your website? Want something more independent and affordable than Firebase? In this super simple tutorial, I'll show you how to build a chat using iris.

The chat is offline-first and end-to-end encrypted. It is stored and propagated using the distributed database gun.

No signup of any kind required: just generate a key pair for the chat recipient. Optionally spin up your own free heroku instance to relay messages. Cost $0.

1. Include iris, gun and sea

Sea is gun's cryptography library.

<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
<script src="https://cdn.jsdelivr.net/npm/iris-lib/dist/iris.min.js"></script>

2. Initialize gun

var gun = new Gun({peers: ['https://gun-eu.herokuapp.com/gun']})

You can connect to someone else's gun node, or you can easily spin up one using Heroku or Docker.

3. Create a key for the user (chat initiator)

Generate a new key:

var key = await iris.Key.generate()

Or generate a key and store it in localStorage:

var key = await iris.Key.getDefault()

4. Get the chat recipient's chat link

Go to iris.to (Github mirror).
Click "Copy your chat link"
Paste:

var chatLink = [chat link here]

5. Create chat

var chat = new iris.Chat({gun, key, chatLink})

6. Add chat box to document

Iris library comes with an embeddable chat box.

var box = chat.getChatBox()
document.body.appendChild(box)

It's as simple as that! Chats opened by users will now show up for the key / account you created at iris.to.

Feel free to inspect the element and override the stylesheet to match your site's look and feel.

Full example

<html>
  <head>
    <title>Live Chat Example</title>
    <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/iris-lib/dist/iris.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      iris.Key.getDefault().then(key => {
        var gun = new Gun({peers: ['https://gun-eu.herokuapp.com/gun']});
        // replace chatLink with your own chat link from iris.to
        var chatLink = 'https://iris.to/?chatWith=4JhaYuPVcq4y2Sp6sRAGkbwM5FdhsMih3b4E6tvd5W4.ULpD5dhra5ojHtKFEdcTZ80UZEmZnRl4dfM2JCEzj2M&s=ZaUbkxPsQeSSdSP1ety7y19eTjPq1gHu15s1v8cbGX4&k=26vMMto5xufO';
        var chat = new iris.Chat({gun, key, chatLink});
        var box = chat.getChatBox();
        document.body.appendChild(box);
      });
    </script>
  </body>
</html>

Check it out on Codepen or Github

Technical notes

Chats are persisted in users' browsers. Heroku nodes are ephemeral: their filesystem is reset once in a while. If you want to persist the chats on a server, you can add S3 storage to your heroku gun instance, or run a docker gun node.

3.3 KiB Raw Blame History