Converse tutorial

Now that we can jot down our thoughts in a To-Do app, let us add something ambitious to it. To-Do: Build a realtime chat app! Which is exactly what we are going to do in this tutorial. It is the next natural step, we can track our thoughts - but now we want to have conversations about them with others to refine our ideas.

So what are the requirements? The ability to write a message, send a message, and receive messages. We will also need a space to keep these messages in, and a web page to access the chat through. Let's start with making a copy of our code from the To-Do app! You can edit the code below, which will update the live preview.

... loading editor and preview ...

The first thing we need to do is update the HTML.

  1. Change the text in the h1 tag to "Chat".
  2. Move the ul tags up to be above the form tag.
  3. Add an opening closing textarea tag inbetween the input and button.
  4. Make the button say "send" instead of "Add".
  5. Now we want to model what the HTML for our message will look like. Copy the following into the editor to be above the first script tag:

What is happening?

Before we get started with writing any javascript, we need to clean up some code that no longer applies! Go ahead and remove the following 3 lines of code from the bottom of our script tag:

Wonderful! Now we want to change the name of the data so we do not get our previous app's data. Additionally, if we want this data to be shared and updated in realtime with other people, we have to connect to them directly or a server that does this for us. Modify the line where we initialize gun (hint: it is the very first line) with this:

What does this do?

Oops, our current code is handling the data incorrectly. We need to fix that, adjust the commented line in the editor to this:


We still have breaking changes, we need to revamp the inside of the val function with the following:

What does this do?

Now we need to make sure that the data we save matches the same format as the messages we receive.

Replace everything inside of the form on submit function with the following:

What is happening?

Wow! Our chat is fully functioning! You can pat yourself on the back and be done now if you want. But there are lots of little things we can do to polish up the experience.

We will not be doing any design, as that exceeds the scope of what this tutorial teaches. So prepare for your app to look pretty ugly, you can try to make things pretty on your own. What then, is left?

Tutorial Unfinished, Sad Face. We're Working On It Though!

Check out the github in the meanwhile for more documentation.

Congratulations! You have built a realtime chat app! That is quite the accomplishment, you should go celebrate by eating a sandwhich.

Now that we can converse with people, we might want to know who they are. In the next tutorial we will create a contact app with some basic social network features and learn a little bit about security.

Coming Later!

Check out the github in the meanwhile for more documentation.