WhatsApp Clone with Meteor CLI and Ionic : 3. Realtime Meteor server

by - April 02, 2017

In this step we are going to add several features to our project:
  • Create a server and initialize some static data in it.
  • Connect the client to the server.
So let’s start by creating some Mongo collections which will be used to store our data.
Mongo collections need to be available in both client and server in order to share data, so we will declare our collections in a folder named lib under the project’s root (lib/collections.js).


2.1 Add meteor collectionslib/collections.js
1
2
3
4

import { Mongo } from 'meteor/mongo';
 
export const Chats = new Mongo.Collection('chats');
export const Messages = new Mongo.Collection('messages');
Now we need to create our server's first file, so let's create a directory named server and create the server's startup file named bootstrap.js (server/bootstrap.js).
This file should be run first because we want to run some initialization code there, so we can use Meteor.startup() to define our logic:
2.2 Create server bootstrapserver/bootstrap.js
1
2
3

Meteor.startup(function() {
 
});
Our next step is to move the static data to the server, so let’s add it in the bootstrap.js file we just created, we also want this code to run only once when there is no data at all inside the collections.
2.3 Add chats collection data stubserver/bootstrap.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

import Moment from 'moment';
import { Meteor } from 'meteor/meteor';
import { Chats, Messages } from '../lib/collections';
 
Meteor.startup(function() {
  if (Chats.find().count() !== 0) return;
 
  Messages.remove({});
 
  const messages = [
    {
      text: 'You on your way?',
      timestamp: Moment().subtract(1, 'hours').toDate()
    },
    {
      text: 'Hey, it\'s me',
      timestamp: Moment().subtract(2, 'hours').toDate()
    },
    {
      text: 'I should buy a boat',
      timestamp: Moment().subtract(1, 'days').toDate()
    },
    {
      text: 'Look at my mukluks!',
      timestamp: Moment().subtract(4, 'days').toDate()
    },
    {
      text: 'This is wicked good ice cream.',
      timestamp: Moment().subtract(2, 'weeks').toDate()
    }
  ];
 
  messages.forEach((m) => {
    Messages.insert(m);
  });
 
  const chats = [
    {
      name: 'Ethan Gonzalez',
      picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg'
    },
    {
      name: 'Bryan Wallace',
      picture: 'https://randomuser.me/api/portraits/thumb/lego/1.jpg'
    },
    {
      name: 'Avery Stewart',
      picture: 'https://randomuser.me/api/portraits/thumb/women/1.jpg'
    },
    {
      name: 'Katie Peterson',
      picture: 'https://randomuser.me/api/portraits/thumb/women/2.jpg'
    },
    {
      name: 'Ray Edwards',
      picture: 'https://randomuser.me/api/portraits/thumb/men/2.jpg'
    }
  ];
 
  chats.forEach((chat) => {
    const message = Messages.findOne({ chatId: { $exists: false } });
    chat.lastMessage = message;
    const chatId = Chats.insert(chat);
    Messages.update(message._id, { $set: { chatId } });
  });
});
Now we need to remove the static data from the client and get it from the server.
So let's use angular-meteor's API for this. We will define a helper named data, and we will return the Mongo collection cursor.
2.4 Add chats collection helper to chats controllerclient/scripts/controllers/chats.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { Controller } from 'angular-ecmascript/module-helpers';
import { Chats } from '../../../lib/collections';
 
export default class ChatsCtrl extends Controller {
  constructor() {
    super(...arguments);
 
    this.helpers({
      data() {
        return Chats.find();
      }
    });
  }
 
  remove(chat) {
Now that the data comes from the server, we need to modify the remove() method in order to use Mongo Collection API that removes the object from both client and server:

2.5 Update delete button logic to use controller helperclient/scripts/controllers/chats.controller.js
13
14
15
16
17
18
19

  }
 
  remove(chat) {
    Chats.remove(chat._id);
  }
}

Share
Tweet
Pin
Share
Tags : , , , , , , , , , , , , , ,

You May Also Like

0 comments