Build awesome chat app in 5 mins with Meteor

December 22, 2014

In this tutorial, I am going to show you how to write a simple chat application using MeteorJS.

Here is a live demo as our goal: http://hrr2demo.meteor.com/

And the source code on Github: https://github.com/victorleungtw/hrr2demo

Feel free to try the demo and fork the repo before we started.

What is Meteor?

Meteor is an awesome web framework for building realtime application using JavaScript. It is based on NodeJS with MongoDB.

Step 1: Install Meteor

For MaxOS and linux user, run the following command in your terminal:

    > curl [https://install.meteor.com/](https://install.meteor.com/) | sh

Step 2: Create new app

    > meteor create awesomeChatApp

Then change directory to your app**

    > cd awesomeChatApp

Try to run it

    > meteor

And open your brower with address: http://localhost:3000

Step 3: Create folders and file structure

Remove the default files with the command

    > rm awesomeChatApp.*

Create three folders

    > mkdir client server both

By convention, we will put anything run at the client side (i.e. user’s brower) in the client folder. Anything run at the server side in the server folder. Anthing access by both client and server in both or other folders.

Step 4a: Create a collection to store messages

Inside the both folder, we will put our model here.

    > touch collection.js

To create a new messages collection:

    Messages = new Meteor.Collection(‘messages’);

Step 4b: Create the index page:

Inside the client folder, we will put our home page view.

    > touch index.html

With the following html

    <head> <title>chatterbox</title> </head> <body>  {{> loginButtons align=”right”}}

    # chatterbox
     {{> input}} {{> messages}}  </body>

You may notice that, unlike other frameworks, we do not need to worry about putting a lot of script tags inside our head tags. Commonly used library, such as Underscore and jQuery are already included and ready to use.

Meteor use a template system called Handlebar or Spacebar to render templates dynamically. On the line {{> messages}}, it is looking for a template with the name ‘messagess’, which we will be creating it soon in the next step.

Step 4c: Create html template with helpers

To better organize our files, we can create a new folder

    > mkdir messages > cd messages > touch messages.html

Now, we create a template with the name ‘messages’.

    <template name=”messages”>  {{#each messages}} {{name}}:  {{message}}
     {{/each}}  </template>

And we will create a helpers to loop through each messages in the Message collections.

    > touch messages.js Template.messages.helpers({ messages: function(){ return Messages.find({}, {sort: {time: -1}} ); } })

Step 4d: Create html templete with event handlers

Similarily, we will create template for input box and submit button.

    > mkdir input > cd input > touch input.html <template name=”input”> <form id=”send”> <input id=”message” type=”text”> <input type=”submit” value=”Submit”> </form> </template>

Also, we will create a JavaScript file to handle click event of the submit button.

    > touch input.js Template.input.events = { ‘submit form’: function(event){ event.preventDefault(); if (Meteor.user()){ var name = Meteor.user().profile.name; } else { var name = ‘Annoymous’; } var message = document.getElementById(‘message’); if (message.value !== ‘’) { Messages.insert({ name: name, message: message.value, time: Date.now() }) document.getElementById(‘message’).value = ‘’; message.value = ‘’; }; } }

Step 4e: Add accounts package for login using Github account

Meteor is very easy to use. Because there is always a package. We are going to add accounts-ui and accounts-github for simple user login system.

    meteor add accounts-ui meteor add accounts-github

You may find more interesting packages on the Atmosphere website: https://atmospherejs.com/

**Step 4f: Add stylesheets (**optional)

Copy and paste the following stylesheets inside your client folder. Be creative and design the user interface to something that you would like to use.

    > mkdir style > cd style > touch style.css body { background: #eee; text-align: center; padding: 0 25px; font-family: arial, sans-serif; } #main { width: 500px; margin: auto; text-align: left; background: white; padding: 50px 60px; border: solid #ddd; border-width: 0 1px 1px 1px; } #main h1 { margin-top: 0; font-size: 35px; margin-bottom: 5px; padding: 5px; } #main h1 span { font-style:italic; } #main ul { padding-left: 20px; } #main .error { border: 1px solid red; background: #FDEFF0; padding: 20px; } #main .success { margin-top: 25px; } #main .success code { font-size: 12px; color: green; line-height: 13px; } form { padding: 20px; padding-left: 0; margin-bottom: 20px; } form input[type=text] { margin-right: 10px; width: 70%; font-size: 12px; padding: 5px; } .chat { padding: 5px; margin-bottom: 5px; background-color: #eee; } .chat .username { font-weight: 800; } .chat:hover { background-color: #ddd; } .spinner { float: right; height: 46px; margin-bottom: 5px; } .spinner img { padding: 10px; } html { padding: 10px; font-family: Verdana, sans-serif; } .login-buttons-dropdown-align-right { float: right; }

Step 5: Deploy your website to meteor free server

    meteor deploy awesomeChatApp.meteor.com

Done! You may need to deploy to a different address if the address is already be used. Open your brower with the your address: http://awesomeChatApp.meteor.com

You will also need to config the login system as well by following the steps in the page.

Now you have created your chatroom using Meteor JS!

To learn more about Meteor, here are some recommended resources:

Hope you have fun while building this chat app. Send me an email if you have any questions;)

Build awesome chat app in 5 mins with Meteor

About Victor Leung

Happy to connect