PERL.eco
Published in

PERL.eco

Build A Decentralized Chat Using JavaScript & Rust (WebAssembly)

Create and deploy your own decentralized chat in just a hundred lines of code using Wavelet.

Well, let’s create a decentralized chat :).

What We’re Going To Be Building

Like any great tutorial, it would be nice to see a live demo of what exactly you’re going to be building ahead of time.

This is what we’re going to be building.

The Backend

To start off, we need to have a place to store our chat messages. In a normal app you’d just host up a MySQL/Postgres/MongoDB database and make a NodeJS server to collect chat messages and stuff them in your database.

Bob made a chat service using MySQL and NodeJS. Bob’s chat got DDoSed by hackers. Bob is sad.
❯ rustup target add wasm32-unknown-unknown
❯ cargo new --lib chat; cd chat
❯ cargo build --release --target wasm32-unknown-unknown

Deploying The Backend

We need access to a Wavelet blockchain network to deploy our chat smart contract to.

Generate a new private key, save your private key, load a previously-saved private key; then proceed to login.
Congrats! You just registered your first Wavelet wallet/account.
$claim [your public key/wallet address here]
After clicking the ‘75%’ button after attaining 500,000 PERLs from Discord.
Make sure to jot down your smart contract ID.

The Frontend

I won’t recommend any particular frameworks like React or Vue or Svelte or teach you how to style your app; it’s entirely up to you. In this section, I’ll go over the core knowledge you need to hook up your website design to Wavelet.

  1. connect to the Wavelet network,
  2. load our wallet by giving our private key so that we may pay for the fees to use our smart contract, and
  3. construct a Contract instance which provides methods to help us with interacting with our smart contract.

Calling get_messages()

Before continuing any further, one thing to note is that out of the two smart contract methods we defined:

  1. only one of them modifies the blockchain to push a new chat log, while
  2. the other only simply queries the blockchain to retrieve all chat logs made thus far.

The only smart contract methods which you have to pay nodes PERLs for to execute are ones that modify the blockchain.

So, as an example, the get_messages() function can be called without incurring any cost of PERLs to your account. You can call it like so:

  1. download your smart contracts latest memory from the node you are connected to,
  2. load the smart contracts code and memory into your browsers virtual machine, and
  3. locally executes the get_messages() function and returns all printed logs and results.

Calling send_message(msg: String)

Now, let’s talk about calling the send_message(msg: String) function. As you might guess, calling this function modifies the blockchain by putting your desired message on the blockchain, and thus costs PERLs.

{type: "string", value: "Your chat message here!"}

Listening for changes to the blockchain

The one final bit perhaps that would be great to have is to automatically refresh the chat logs when new chat logs are appended to the blockchain.

Conclusion

So with all of these different components, you now have a full-fledged decentralized chat app with a splendid backend and (hopefully splendid) frontend.

Enter your chat smasrt contracts ID into you made into UI we made for you to chat with your friends at https://perlin-network.github.io/decentralized-chat :).

Congratulations, you just made your very first, scalable, secure Wavelet Dapp!

Zero configuration, zero API keys, zero deployment headaches, zero devops, and zero worries on having to manage a scalable, expensive, resilient data layer.

Footnotes

To leave off with some notes, what I personally find the most exciting is that in spite of this decentralized chat we made being incredibly simple, it holds useful and meaningful implications given the numerous political agendas present in our world today.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store