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.
Change the text in the h1 tag to "Chat".
Move the ul tags up to be above the form tag.
Add an opening closing textarea tag inbetween the input and button.
Make the button say "send" instead of "Add".
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?
We do not actually have any messages yet, so we do not want an empty chat message displaying on the screen.
There are a bunch of other HTML tags out there, let us do a quick review of the new ones we added.
The textarea tag is like an input tag except longer content.
A div tag is a generic HTML tag to put anything else inside of.
The italicize tag stylizes your text as so.
The bold tag does similarly.
And a span tag is a generic HTML tag to put text inside of.
It turns out that HTML allows you to add extra data to your page, let us go over them.
One of these attributes is a class which lets you categorize your HTML.
The other one is a style attribute, which lets you style your HTML with CSS.
To keep our models hidden, we wrap them inside of div container, and then tell the computer not to display it.
When we receive a message, we will make a copy of the "message" model and fill it up with the data using javascript.
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?
The URL 'https://gunjs.herokuapp.com/gun' happens to be a gun peer.
This particular peer is a testing server, please do not use it outside these tutorials - it is not very fast or reliable, as we regularly delete data from it.
The 'tutorial/chat/app' is the name of our shared data, it acts as a key to help us find it.
Oops, our current code is handling the data incorrectly. We need to fix that, adjust the commented line in the editor to this:
Why?
Because we do not expect messages to change, therefore we just get the value instead of reacting on updates.
We also swap the order, placing map in front because we want to get each message item in the set (or that will be in the set) once rather than every item in the set every time it changes. Kinda confusing, but just reread that a couple of times and think about it.
We still have breaking changes, we need to revamp the inside of the val function with the following:
What does this do?
Because this is a live app that everybody is coding, if we get bad data we need to cancel by returning.
As before, if the list item already exists, use it.
|| or find a model message, clone it, set its id so we can reuse it later, and append it to the list.
Then fill in the model with the specific pieces of data from our message.
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?
We still want to prevent the default behavior of the browser, which would be to reload the page.
Then we want to create a javascript object using {} curly braces, which allows us to describe complex data.
Our data will be composed of three parts, who sent the message, what the message is, and when it was written.
We then add this message to a set of messages in the chat, which will get mapped over.
Finally we want to clear out the textarea we wrote our message in, so that way we can type another.
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?
The message's sent time is not human friendly, we will need to convert it.
Messages currently may be shown out of order, so we need to order them correctly.
Every time a message comes in you have to scroll down to read it, we should automate that.
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.
