diff --git a/_posts/2020-02-10-javascript-live-chat-tutorial-free-alternative-to-firebase.md b/_posts/2020-02-10-javascript-live-chat-tutorial-free-alternative-to-firebase.md new file mode 100644 index 0000000..2a96a72 --- /dev/null +++ b/_posts/2020-02-10-javascript-live-chat-tutorial-free-alternative-to-firebase.md @@ -0,0 +1,103 @@ +--- +layout: post +title: "Javascript live chat tutorial: Free alternative to Firebase" +date: 2020-02-10 13:37:00 +0000 +tags: 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](https://github.com/irislib/iris-lib). + +The chat is offline-first and end-to-end encrypted. It is stored and propagated using the distributed database [gun](https://github.com/amark/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. + +``` + + + +``` + +# 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 + +1. Go to [iris.to](https://iris.to) ([Github mirror](https://irislib.github.io/iris-messenger/src/)). +2. Click "Copy your chat link" +3. 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 + +``` + +
+