Create a meteor chat app in 30 minutes

Create a Meteor chat app in 30 minutes
In the previous post, we’ve discovered the very basic of Meteor (https://blog.designveloper.com/2016/06/11/get-started-with-meteor/). Now let’s create something interesting like this:
J A V A S C R I P T ( H T T P S : / / B L O G . D E S I G N V E L O P E R . C O M / C A T E G O R Y / J A V A S C R I P T / ) , M E T E O R ( H T T P S : / / B L O G . D E S I G N V E L O P E R . C O M / C A T E G O R Y / M E T E O R / ) , P R O G R A M M I N G L A N G U A G E
( H T T P S : / / B L O G . D E S I G N V E L O P E R . C O M / C A T E G O R Y / P R O G R A M M I N G - L A N G U A G E / )
B y L i n h Vu ( h t t p s : // b l o g . d e s i g n v e l o p e r. c o m / a u t h o r / l i n h v n / ) o n J u n e 1 3 , 2 0 1 6

It’s a simple real-time chat, with many users. Follow these steps and you’ll nish it in just 30 minutes!
W h ere do I b egin ?
To create a Meteor app, simply open your terminal and run this command:
meteor create simple-chat
Now try to run your rst Meteor app:
cd simple-chat
meteor
Let’s check it out using your web browser: http://localhost:3000/ (http://localhost:3000/)
You ’ve told t h at it ’s all J avaS crip t , wh y does it look s o s t ran ge?
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:
This is the le structure that Meteor recommends us. You can nd out more here (http://guide.meteor.com/structure.html#javascript-structure).
Next, open client/main.html, 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 le. Let’s add some les 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 le client/main.js and replace all the codes with this:

import '../imports/ui/body.js';
Then you will see something like this:
You can see that Meteor renders the HTML with head section from <head> tag in main.html, body section from <body> tag in body.html. Look at the body, you will see this:
{{#each messages}}
{{> message}}
{{/each}}
This is Spacebar syntax. Like 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 (http://guide.meteor.com/blaze.html) and Spacebar (http://meteorcapture.com/spacebars/)).
So in the code above, each item from the messages collection will be put into template named message. Template in Meteor is just like Partial view in ASP.NET, it’s a chunk of HTML that can be safely inserted into an existing
DOM. You can de ne 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 by the Template.body.helpers in the body.js. So how can we can type message, send it and show in our app? We will gure out how to do it later.
C an we s t y le it ?
The easiest way is 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>

     <div class="col-md-12">

       <div class="panel panel-info">
         <div class="panel-heading">
           GROUP CHAT
         </div>
         <div class="panel-body">
           <ul class="media-list">
             
             {{#each messages}}
               {{> message}}
             {{/each}}
           </ul>
         </div>
         
         <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 les in the imports/ui/ directory to separate each template to a different html le and js le.
Create new le 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="https://lorempixel.com/60/60/people/" />
       </a>
       <div class="media-body" >
         {{text}}
       </div>
     </div>
   </div>
</li>
</template>
Create new le message.js:
import { Template } from 'meteor/templating';
import './message.html';

Open body.js and add this after import './body.html' :
import './message.js';
Thank to Bootstrap we have such an elegant app:
N ice, b u t it does n’t work, I can’t s en d mes s age! W h y oh wh y ?
Don’t be too hurry! :-p . Now we will create a database collection to store the messages. Create a new le 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 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({
tasks() {
return Tasks.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 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())
},
});
Now you can say Hello world!
You can open another browser window and chat to yourself to see if it works real-time. Awesome, right?
Th is is n ot a ch at . Ever yon e mu s t h ave t h eir own accou n t s an d log in , righ t ?
It’s 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 Meteor accounts system and a drop-in login user interface with multi-user functionality.
Then open body.html and replace the  with this:
<h5 class="text-center text-muted">Sign in to join!</h5>
and replace the  with this:
{{> loginButtons}}
And add this before and after the <form> tag:

{{#if currentUser}}
<form…>
…
</form>
{{/if}}
Then we will add a new le accounts-con g.js in the imports/startup/ directory to make 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 rst line:
import '../imports/startup/accounts-config.js';
Then you will see our app now looks like this:
You can simply create account, sign in… To join our chat!
Let’s add some more elds to your messages collection to see who sends it. Open the body.js and replace //user information inside the function Messages.insert with this:
owner: Meteor.userId(), username:Meteor.user().username,
And open the message.html, replace the  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!

C on clu s ion
Through this simple app, we’ve discovered something more about Meteor:
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 nd it useful. Keep practising everyday!
P.s : You can get the all code here (https://github.com/31131021883/simple-chat/).
(https://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fblog.designveloper.com%2F2016%2F06%2F13%2Fcreate-
a-
meteor-
chat-
app-in-
30-
minutes%2F)
(http://twitter.com/intent/tweet?
source=Designveloper
Software
agency
-
Meteor
prime
partner&text=https%3A%2F%2Fblog.designveloper.com%2F2016%2F06%2F13%2Fcreate-
a-
meteor-
chat-
app-in-
30-
minutes%2F)
(https://plus.google.com/share?
url=https%3A%2F%2Fblog.designveloper.com%2F2016%2F06%2F13%2Fcreate-
a-
meteor-
chat-
app-in-
30-
minutes%2F)
(http://www.linkedin.com/shareArticle?
mini=true&url=https%3A%2F%2Fblog.designveloper.com%2F2016%2F06%2F13%2Fcreate-
a-
meteor-
chat-
app-in-
30-
minutes%2F&title=Create%20a%20Meteor%20chat%20app%20in%2030%20minutes&summary=In%20the%20previous%20post%2C%20we%26%23821
time%20chat%2C%20with%20many%20users.%20Follow%20these%20steps%20and%20you%26%238217%3Bll%20 nish%20it%20in%20just%2030%20m
Software
agency
-
Meteor
prime
partner)
(http://www.tumblr.com/share/link?
url=https%3A%2F%2Fblog.designveloper.com%2F2016%2F06%2F13%2Fcreate-
a-
meteor-
chat-
app-in-
30-
minutes%2F&name=Create%20a%20Meteor%20chat%20app%20in%2030%20minutes&description=In%20the%20previous%20post%2C%20w
time%20chat%2C%20with%20many%20users.%20Follow%20these%20steps%20and%20you%26%238217%3Bll%20 nish%20it%20in%20just%
Chat app JavaScript Meteor Real-time
Get started with Meteor (https://blog.designveloper.com/2016/06/11/get-started-with-meteor/)

Create a meteor chat app in 30 minutes

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Create a meteor chat app in 30 minutes

Similar to Create a meteor chat app in 30 minutes (20)

More from Designveloper

More from Designveloper (20)

Recently uploaded

Recently uploaded (20)

Create a meteor chat app in 30 minutes