Dec 22, 2014

Build an Awesome Chat App in 5 Minutes with Meteor

Welcome back to Continuous Improvement, the podcast where we explore tools and techniques for enhancing our skills and knowledge in the world of software development. I’m your host, Victor. In today’s episode, we’re going to dive into the world of real-time application development using MeteorJS. So if you’ve ever wanted to create a chat application, this episode is for you.

Before we get started, make sure to check out the live demo and the source code on GitHub. The live demo is available at hrr2demo.meteor.com, and the source code can be found at github.com/victorleungtw/hrr2demo. Feel free to try the demo and fork the repository so you can follow along with the tutorial.

Alright, let’s jump right into it. The first step is to install Meteor on your machine. If you’re on macOS or Linux, simply open your terminal and run the command:

curl install.meteor.com | sh

Once Meteor is successfully installed, we can proceed to create our chat application. Open your terminal and run the following command:

meteor create awesomeChatApp

This will create a new Meteor application with the name “awesomeChatApp”. Change your directory to the app by running:

cd awesomeChatApp

Great! Now let’s try running our app by executing:

meteor

This command will start the Meteor server, and you can see your app in action by opening your browser and visiting localhost:3000.

Now that we have our application set up, let’s move on to organizing our code. We’re going to create three folders - client, server, and both.

In the client folder, we’ll place anything that runs on the client side, which is the user’s browser. In the server folder, we’ll place anything that runs on the server side. And in the both folder, we’ll put code that is used by both the client and server.

Next, we’ll create a model to store our chat messages. Inside the both folder, create a file called “collection.js”. In this file, we’ll define a new Meteor collection called “Messages”. Here’s the code:

Messages = new Meteor.Collection('messages');

Moving on, let’s create the index page where our chat application will be displayed. Inside the client folder, create a file named “index.html”. In this file, we’ll write our HTML code for the homepage view. Here’s an example:

<head>
  <title>chatterbox</title>
</head>
<body>
  {{> loginButtons align="right"}}
  # chatterbox
  {{> input}} {{> messages}}
</body>

As you can see, we’re using the Meteor templating system to include other templates such as the “loginButtons”, “input”, and “messages” templates.

Speaking of the messages template, let’s create it now. Inside the client folder, create a folder called “messages”. Within that folder, create a file named “messages.html”. In this file, we’ll define the structure of our chat messages. Here’s the code:

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

We also need to create some helper functions to loop through each message in the Messages collection and display them. To do this, create a file named “messages.js” inside the messages folder. Here’s an example of the code:

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

Now that our messages template is ready, let’s move on to creating the input template. Inside the client folder, create a folder called “input”. Within that folder, create a file named “input.html”. In this file, we’ll define the HTML structure for the chat input box and submit button. Here’s an example:

<template name="input">
  <form id="send">
    <input id="message" type="text">
    <input type="submit" value="Submit">
  </form>
</template>

We’ll also need to handle the submit event of the form in order to insert a new message into the Messages collection. Create a file named “input.js” inside the input folder. Here’s an example of the code:

Template.input.events({
  'submit form': function(event) {
    event.preventDefault();
    var name = Meteor.user() ? Meteor.user().profile.name : 'Anonymous';
    var message = document.getElementById('message');
    if (message.value !== '') {
      Messages.insert({
        name: name,
        message: message.value,
        time: Date.now()
      });
      message.value = '';
    }
  }
});

Now that our chat application is taking shape, let’s add a login system using the GitHub authentication method. Meteor makes it easy to add user authentication with its packages. We’ll need to add two packages to our application. In your terminal, run the following commands:

meteor add accounts-ui
meteor add accounts-github

With these packages added, the login buttons will automatically appear on our index page, allowing users to authenticate using their GitHub accounts.

Finally, if you want to add some style to your application, create a new folder named “style” inside the client folder. Within the style folder, create a file called “style.css” and add your CSS styles to customize the look and feel of your chat application.

Alright, we’ve covered a lot in this episode. We’ve created a chat application using MeteorJS, organized our code into different folders, implemented a messages template to display the chat messages, added an input template with event handlers for submitting new messages, and even integrated a login system using the GitHub authentication method.

If you’re ready to take your chat application to the next level, don’t forget to deploy it to Meteor’s free server. Simply run the command “meteor deploy yourAppName.meteor.com”, and your application will be accessible online.

That’s it for today’s episode of Continuous Improvement. I hope you found this tutorial helpful in your journey towards becoming a better software developer. As always, keep learning and keep improving. This is Victor signing off!