Tet

Create Chat App in Meteor in 40 Minutes

 / June 13, 2016

In the previous post, we have discovered the very basics of Meteor. Now let’s create something interesting like this:

create chat app in meteor
How to create a chat app in Meteor?

It’s a simple real-time chat, with many users. Follow these steps and you’ll finish it in just 40 minutes!

How to Create Chat App in Meteor?

1. Where Do I Begin?

To create a Meteor app, simply open your terminal and run this command:

 meteor create simple-chat

Now try to run your first Meteor app:

cd simple-chat
meteor

Let’s check it out using your web browser: http://localhost:3000/

FURTHER READING:
1. 8 Best AI Chatbot Smartest AI Chatbot in 2022
2. 5 Best AI Chatbot Platforms to Use for 2022
3. What Is a Chatbot And How Does It Work?
4. 9 Open Source Chatbot Frameworks to Use in 2022

You’ve told me that it’s all JavaScript, why does it look so strange?

Every new Meteor app includes Blaze, which is Meteor’s built-in reactive rendering library. Usually, templates are written in Spacebars. These templates are compiled into JavaScript UI components that are rendered by the Blaze library. I’ll continue to explain it later 😀
Now add some folders like this:

files2 chat app

This is the file structure that Meteor recommends to us. You can find out more here. Next, open client/main.html, and replace all the code with this:

<head>
  <title>My Simple Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

We will write the body code in a new file. Let’s add some files to the imports/UI directory:
body.html

<body>
  <h3>SIMPLE METEOR CHAT</h3>
   <ul>
      {{#each messages}}
        {{> message}}
      {{/each}}
</ul>
</body>
<template name="message">
  <li>{{text}}</li>
</template>

and body.js

import { Template } from 'meteor/templating';
import './body.html';
Template.body.helpers({
  messages: [
    { text: 'Hello,' },
    { text: 'Nice to meet you!' },
    { text: '<3' },
  ],
});

Also, open file client/main.js and replace all the codes with this:

 import '../imports/ui/body.js';
hello

Then you will see something like this:

You can see that Meteor renders the HTML with a head section from <head> tag in main.html, the body section from <body> tag in body.html. Look at the body, you will see this:

 {{#each messages}}
         {{> message}}
 {{/each}}

This is Spacebar syntax. As I’ve explained before, Spacebar is a Meteor template language. It uses statements surrounded by double curly braces such as {{#each}} and {{#if}} to let you add logic and data to your views. (You can read more about Blaze and Spacebar).

So in the code above, each item from the messages collection will be put into a template named message. Template in Meteor is just like a Partial view in ASP.NET, it’s a chunk of HTML that can be safely inserted into an existing DOM. You can define it using this:

 <template name="templateName">
 #put template code here
 </template>

and reference in your JavaScript with Template.templateName. Furthermore, in your JavaScript, the body section can be referenced with Template.body. It’s a special “parent” template including the other child templates.

Now we have 3 messages, created the Template.body.helpers in the body.js. So how can we type the message, send it, and show it in our app? We will figure out how to do it later.

2. Can we style it?

The easiest way is by using Bootstrap. With Meteor, adding Bootstrap can be done in the blink of an eye. Open another terminal tab, go to the simple-chat directory and run this:

 meteor add twbs:bootstrap

Done! Now we can use Bootstrap. Replace your body.html code with this:

 <body>
   <div class="container">
     <div class="row">
       <h3 class="text-center" >SIMPLE METEOR CHAT</h3>
 	   	<!-- text holder -->
       <div class="col-md-12">
 		<!-- login button -->
         <div class="panel panel-info">
           <div class="panel-heading">
             GROUP CHAT
           </div>
           <div class="panel-body">
             <ul class="media-list">
               <!-- message template -->
               {{#each messages}}
                 {{> message}}
               {{/each}}
             </ul>
           </div>
           <!-- message textbox -->
           <form class="new-message">
             <div class="panel-footer">
               <div class="input-group">
                 <input type="text" name="text" class="form-control" placeholder="Enter Message" />
                 <span class="input-group-btn">
                   <button class="btn btn-info send" type="submit">SEND</button>
                 </span>
               </div>
             </div>
           </form>
         </div>
       </div>
     </div>
   </div>
 </body>

Then we will create several files in the imports/ui/ directory to separate each template to a different HTML file and js file.
Create new file message.html:

 <template name="message">
   <li class="media">
     <div class="media-body">
       <div class="media">
         <a class="pull-left" href="#">
         <img class="media-object img-circle img-responsive" src="http://lorempixel.com/60/60/people/" />
         </a>
         <div class="media-body" >
           {{text}}
          <br />
          <!-- user information -->
          <hr />
         </div>
       </div>
     </div>
   </li>
 </template>

Create new file message.js:

 import { Template } from 'meteor/templating';
 import './message.html';

Open body.js and add this after import './body.html':

 import './message.js';
bootstrap

Thank Bootstrap we have such an elegant app:

3. Nice, but it doesn’t work, I can’t send messages! Why oh why?

Don’t be too hurry! :-p. Now we will create a database collection to store the messages. Create a new file messages.js in the imports/api/ directory like this:

 import { Mongo } from 'meteor/mongo';
 export const Messages = new Mongo.Collection('messages');

In MongoDB, this is how we create a collection in JavaScript:

 MyCollection = new Mongo.Collection("my-collection")

On the server, this sets up a MongoDB collection called my-collection; on the client, this creates a cache connected to the server collection. In this demo, to make it easy, assume that the entire database is present on the client.
We also import the messages.js to the server. Open the server/main.js and add this to the second line:

 import '../imports/api/messages.js';

Now we can display a message from the collection by opening body.js and replacing the Template.body.helpers with this:

 import { Messages } from '../api/messages.js';
 Template.body.helpers({
   messages() {
     return Messages.find();
   },
 });

Don’t worry when your chat group is empty. Just a few steps left then you will receive your messages. 😀
As we created the message textbox in the body.html in the previous step, now we will handle the submit event to insert a new message. Add this to the end of the body.js:

 Template.body.events({
   'submit .new-message'(event) {
     // Prevent default browser form submit
     event.preventDefault();
     // Get value from form element
     const target = event.target;
     const text = target.text.value;
     // Insert a message into the collection
     Messages.insert({
       text,
       createdAt: new Date(), // current time
 	 //user information
     });
     // Clear form
     target.text.value = '';
     // scroll to last message
     $('.panel-body').scrollTop($('.media-list').height())
	},
 });
hello-world

Now you can say Hello world!
You can open another browser window and chat with yourself to see if it works in real-time. Awesome, right? 😀

4. This is not a chat. Everyone must have their own accounts and log in, right?

It’s a simple man. If you think we have a lot of things to deal with, then you will be surprised. Just run this command:

meteor add accounts-ui accounts-password

This will enable the Meteor accounts system and a drop-in login user interface with multi-user functionality.
Then open body.html and replace the <!-- text holder --> with this:

 <h5 class="text-center text-muted">Sign in to join!</h5>

and replace the <!-- login button --> with this:

 {{> loginButtons}}

And add this before and after the <form> tag:

 {{#if currentUser}}
 <form…>
 …
 </form>
 {{/if}}

Then we will add a new file accounts-config.js in the imports/startup/ directory to make it easier to sign up:

 import { Accounts } from 'meteor/accounts-base';
 Accounts.ui.config({
   passwordSignupFields: 'USERNAME_ONLY',
 });

And import it by opening client/main.js and inserting this to the first line:

 import '../imports/startup/accounts-config.js';
signup

Then you will see our app now looks like this:

You can simply create an account, sign in… To join our chat!
Let’s add some more fields to your message collection to see who sends it. Open the body.js and replace //user informationinside the function Messages.insert with this:

 owner: Meteor.userId(), username:Meteor.user().username,

And open the message.html, replace the <!-- user information --> with this:

 <small class="text-muted"><strong>{{username}}</strong> | {{createdAt}}</small>

Finally, add this to client/main.css:

 .panel-body{
   overflow-y:scroll;
   height:60vh;
 }

All done! Enjoy your Meteor chat app!

Conclusion

Through this simple app, we’ve discovered something more about Meteor:

  • The file structure in Meteor
  • Blaze – Meteor’s default frontend rendering system
  • Spacebar – Meteor’s template language
  • How to add packages to your Meteor app

Hope you find the way to create a chat app in Meteor useful. Keep practicing every day!

P.s: You can get the all code here.

create chat app in meteor
How to create a chat app in Meteor?

Also published on

Share post on

TABLE OF CONTENTS

CATEGORIES

SUBSCRIBE NOW

If not form, brief us

sales@dgroup.co

Tell us on Skype

@Designveloper

Tell us about your idea

Your personal information
* THIS IS REQUIRED
What's type of your projects?
* THIS IS REQUIRED
Message
* THIS IS REQUIRED

Get in touch

Simply register below to receive our weekly newsletters with the newest blog posts