Build awesome chat app in 5 mins with Meteor
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 a realtime application using JavaScript. It is based on NodeJS with MongoDB.
Step 1: Install Meteor
For macOS and Linux user, run the following command in your terminal:
> curl [https://install.meteor.com/](https://install.meteor.com/) | sh
Step 2: Create a new app
> meteor create awesomeChatApp
Then change directory to your app**
> cd awesomeChatApp
Try to run it
> meteor
And open your browser 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 browser) in the client folder. Anything run at the server-side in the server folder. Anything access by both client and server in both or other folders.
Step 4a: Create a collection to store messages
Inside both folders, 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> <div id=”main”> {{> loginButtons align=”right”}}<br> <h1>chatterbox</h1> {{> input}} {{> messages}} </div> </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 uses a template system called Handlebar or Spacebar to render templates dynamically. On the line {{> messages}}, it is looking for a template with the name ‘messages’, which we will be creating it soon in the next step.
Step 4c: Create a 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”> <div id=”chats” class=”chat”> {{#each messages}} <span class=”username”>{{name}}: </span> {{message}} <br> {{/each}} </div> </template>
And we will create a helper to loop through each message in the Message collections.
> touch messages.js Template.messages.helpers({ messages: function(){ return Messages.find({}, {sort: {time: -1}} ); } })
Step 4d: Create HTML template with event handlers
Similarly, we will create a 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 a 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 browser with 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;)
Originally published at victorleungtw.com on November 13, 2014.