Fork me on GitHub

WhatsApp Clone with Ionic 2 and Meteor CLI

https://github.com/Urigo/Ionic2-MeteorCLI-WhatsApp

Socially Merge Version (Last Update: 14.02.2017)

Legacy Tutorial

22.11.2016

Socially Merge

14.02.2017
navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial

File Upload & Images

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

In this step, we will be using Ionic 2 to pick up some images from our device's gallery, and we will use them to send pictures, and to set our profile picture.

Image Picker

First, we will a Cordova plug-in which will give us the ability to access the gallery:

$ meteor add cordova:[email protected]

Meteor FS

Up next, would be adding the ability to store some files in our data-base. This requires us to add 2 Meteor packages, called ufs and ufs-gridfs (Which adds support for GridFS operations. See reference), which will take care of FS operations:

$ meteor add jalik:ufs
$ meteor add jalik:ufs-gridfs

Client Side

Before we proceed to the server, we will add the ability to select and upload pictures in the client. All our picture-related operations will be defined in a single service called PictureService; The first bit of this service would be picture-selection. The UploadFS package already supports that feature, but only for the browser, therefore we will be using the Cordova plug-in we've just installed to select some pictures from our mobile device:

12.3 Create PictureService with utils for files client/imports/services/picture.ts 
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { ImagePicker } from 'ionic-native';
import { UploadFS } from 'meteor/jalik:ufs';
 
@Injectable()
export class PictureService {
  constructor(private platform: Platform) {
  }
 
  select(): Promise<Blob> {
    if (!this.platform.is('cordova') || !this.platform.is('mobile')) {
      return new Promise((resolve, reject) => {
        try {
          UploadFS.selectFile((file: File) => {
            resolve(file);
          });
        }
        catch (e) {
          reject(e);
        }
      });
    }
 
    return ImagePicker.getPictures({maximumImagesCount: 1}).then((URL: string) => {
      return this.convertURLtoBlob(URL);
    });
  }
 
  convertURLtoBlob(URL: string): Promise<Blob> {
    return new Promise((resolve, reject) => {
      const image = document.createElement('img');
 
      image.onload = () => {
        try {
          const dataURI = this.convertImageToDataURI(image);
          const blob = this.convertDataURIToBlob(dataURI);
 
          resolve(blob);
        }
        catch (e) {
          reject(e);
        }
      };
 
      image.src = URL;
    });
  }
 
  convertImageToDataURI(image: HTMLImageElement): string {
    // Create an empty canvas element
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
 
    // Copy the image contents to the canvas
    const context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
 
    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check image.src to
    // guess the original format, but be aware the using 'image/jpg'
    // will re-encode the image.
    const dataURL = canvas.toDataURL('image/png');
 
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, '');
  }
 
  convertDataURIToBlob(dataURI): Blob {
    const binary = atob(dataURI);
 
    // Write the bytes of the string to a typed array
    const charCodes = Object.keys(binary)
      .map<number>(Number)
      .map<number>(binary.charCodeAt.bind(binary));
 
    // Build blob with typed array
    return new Blob([new Uint8Array(charCodes)], {type: 'image/jpeg'});
  }
}
Improve this code

In order to use the service we will need to import it in the app's NgModule as a provider:

12.4 Import PictureService client/imports/app/app.module.ts 
13
14
15
16
17
18
19
 
53
54
55
56
57
58
59
60
import { ProfilePage } from '../pages/profile/profile';
import { VerificationPage } from '../pages/verification/verification';
import { PhoneService } from '../services/phone';
import { PictureService } from '../services/picture';
import { MyApp } from './app.component';
 
@NgModule({
...some lines skipped...
  ],
  providers: [
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    PhoneService,
    PictureService
  ]
})
export class AppModule {}
Improve this code

Since now we will be sending pictures, we will need to update the message schema to support picture typed messages:

12.5 Added picture message type imports/models.ts 
9
10
11
12
13
14
15
16
 
export enum MessageType {
  TEXT = <any>'text',
  LOCATION = <any>'location',
  PICTURE = <any>'picture'
}
 
export interface Chat {
Improve this code

In the attachments menu, we will add a new handler for sending pictures, called sendPicture:

12.6 Implement sendPicture method client/imports/pages/messages/messages-attachments.ts 
1
2
3
4
5
6
 
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component } from '@angular/core';
import { AlertController, Platform, ModalController, ViewController } from 'ionic-angular';
import { PictureService } from '../../services/picture';
import { MessageType } from '../../../../imports/models';
import { NewLocationMessageComponent } from './location-message';
import template from './messages-attachments.html';
...some lines skipped...
    private alertCtrl: AlertController,
    private platform: Platform,
    private viewCtrl: ViewController,
    private modelCtrl: ModalController,
    private pictureService: PictureService
  ) {}
 
  sendPicture(): void {
    this.pictureService.select().then((file: File) => {
      this.viewCtrl.dismiss({
        messageType: MessageType.PICTURE,
        selectedPicture: file
      });
    });
  }
 
  sendLocation(): void {
    const locationModal = this.modelCtrl.create(NewLocationMessageComponent);
    locationModal.onDidDismiss((location) => {
Improve this code

And we will bind that handler to the view, so whenever we press the right button, the handler will be invoked with the selected picture:

12.7 Bind click event for sendPicture client/imports/pages/messages/messages-attachments.html 
1
2
3
4
5
6
<ion-content class="messages-attachments-page-content">
  <ion-list class="attachments">
    <button ion-item class="attachment attachment-gallery" (click)="sendPicture()">
      <ion-icon name="images" class="attachment-icon"></ion-icon>
      <div class="attachment-name">Gallery</div>
    </button>
Improve this code

Now we will be extending the MessagesPage, by adding a method which will send the picture selected in the attachments menu:

12.8 Implement the actual send of picture message client/imports/pages/messages/messages.ts 
6
7
8
9
10
11
12
 
30
31
32
33
34
35
36
37
 
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
import { Observable, Subscription, Subscriber } from 'rxjs';
import { Messages } from '../../../../imports/collections';
import { Chat, Message, MessageType, Location } from '../../../../imports/models';
import { PictureService } from '../../services/picture';
import { MessagesAttachmentsComponent } from './messages-attachments';
import { MessagesOptionsComponent } from './messages-options';
import template from './messages.html';
...some lines skipped...
  constructor(
    navParams: NavParams,
    private el: ElementRef,
    private popoverCtrl: PopoverController,
    private pictureService: PictureService
  ) {
    this.selectedChat = <Chat>navParams.get('chat');
    this.title = this.selectedChat.title;
...some lines skipped...
          const location = params.selectedLocation;
          this.sendLocationMessage(location);
        }
        else if (params.messageType === MessageType.PICTURE) {
          const blob: Blob = params.selectedPicture;
          this.sendPictureMessage(blob);
        }
      }
    });
 
    popover.present();
  }
 
  sendPictureMessage(blob: Blob): void {
    this.pictureService.upload(blob).then((picture) => {
      MeteorObservable.call('addMessage', MessageType.PICTURE,
        this.selectedChat._id,
        picture.url
      ).zone().subscribe();
    });
  }
 
  getLocation(locationString: string): Location {
    const splitted = locationString.split(',').map(Number);
Improve this code

For now, we will add a stub for the upload method in the PictureService and we will get back to it once we finish implementing the necessary logic in the server for storing a picture:

12.9 Create stub method for upload method client/imports/services/picture.ts 
27
28
29
30
31
32
33
34
35
36
    });
  }
 
  upload(blob: Blob): Promise<any> {
    return Promise.resolve();
  }
 
  convertURLtoBlob(URL: string): Promise<Blob> {
    return new Promise((resolve, reject) => {
      const image = document.createElement('img');
Improve this code

Server Side

So as we said, need to handle storage of pictures that were sent by the client. First, we will create a Picture model so the compiler can recognize a picture object:

12.10 Create Picture model imports/models.ts 
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
  lng: number;
  zoom: number;
}
 
export interface Picture {
  _id?: string;
  complete?: boolean;
  extension?: string;
  name?: string;
  progress?: number;
  size?: number;
  store?: string;
  token?: string;
  type?: string;
  uploadedAt?: Date;
  uploading?: boolean;
  url?: string;
  userId?: string;
}
Improve this code

If you're familiar with Whatsapp, you'll know that sent pictures are compressed. That's so the data-base can store more pictures, and the traffic in the network will be faster. To compress the sent pictures, we will be using an NPM package called sharp, which is a utility library which will help us perform transformations on pictures:

$ meteor npm install --save sharp

Now we will create a picture store which will compress pictures using sharp right before they are inserted into the data-base:

12.12 Create pictures store imports/collections/pictures.ts 
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
import { MongoObservable } from 'meteor-rxjs';
import { UploadFS } from 'meteor/jalik:ufs';
import { Meteor } from 'meteor/meteor';
import { Picture, DEFAULT_PICTURE_URL } from '../models';
 
export interface PicturesCollection<T> extends MongoObservable.Collection<T> {
  getPictureUrl(selector?: Object | string): string;
}
 
export const Pictures =
  new MongoObservable.Collection<Picture>('pictures') as PicturesCollection<Picture>;
 
export const PicturesStore = new UploadFS.store.GridFS({
  collection: Pictures.collection,
  name: 'pictures',
  filter: new UploadFS.Filter({
    contentTypes: ['image/*']
  }),
  permissions: new UploadFS.StorePermissions({
    insert: picturesPermissions,
    update: picturesPermissions,
    remove: picturesPermissions
  }),
  transformWrite(from, to) {
    // The transformation function will only be invoked on the server. Accordingly,
    // the 'sharp' library is a server-only library which will cause an error to be
    // thrown when loaded on the global scope
    const Sharp = Npm.require('sharp');
    // Compress picture to 75% from its original quality
    const transform = Sharp().png({ quality: 75 });
    from.pipe(transform).pipe(to);
  }
});
 
// Gets picture's url by a given selector
Pictures.getPictureUrl = function (selector) {
  const picture = this.findOne(selector) || {};
  return picture.url || DEFAULT_PICTURE_URL;
};
 
function picturesPermissions(userId: string): boolean {
  return Meteor.isServer || !!userId;
}
Improve this code

You can look at a store as some sort of a wrapper for a collection, which will run different kind of a operations before it mutates it or fetches data from it. Note that we used GridFS because this way an uploaded file is split into multiple packets, which is more efficient for storage. We also defined a small utility function on that store which will retrieve a profile picture. If the ID was not found, it will return a link for the default picture. To make things convenient, we will also export the store from the index file:

12.13 Export pictures collection imports/collections/index.ts 
1
2
3
4
export * from './chats';
export * from './messages';
export * from './pictures';
export * from './users';
Improve this code

Now that we have the pictures store, and the server knows how to handle uploaded pictures, we will implement the upload stub in the PictureService:

12.14 Implement upload method client/imports/services/picture.ts 
2
3
4
5
6
7
8
9
10
 
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { Platform } from 'ionic-angular';
import { ImagePicker } from 'ionic-native';
import { UploadFS } from 'meteor/jalik:ufs';
import { _ } from 'meteor/underscore';
import { PicturesStore } from '../../../imports/collections';
import { DEFAULT_PICTURE_URL } from '../../../imports/models';
 
@Injectable()
export class PictureService {
...some lines skipped...
  }
 
  upload(blob: Blob): Promise<any> {
    return new Promise((resolve, reject) => {
      const metadata = _.pick(blob, 'name', 'type', 'size');
 
      if (!metadata.name) {
        metadata.name = DEFAULT_PICTURE_URL;
      }
 
      const upload = new UploadFS.Uploader({
        data: blob,
        file: metadata,
        store: PicturesStore,
        onComplete: resolve,
        onError: reject
      });
 
      upload.start();
    });
  }
 
  convertURLtoBlob(URL: string): Promise<Blob> {
Improve this code

View Picture Messages

We will now add the support for picture typed messages in the MessagesPage, so whenever we send a picture, we will be able to see them in the messages list like any other message:

12.15 Added view for picture message client/imports/pages/messages/messages.html 
24
25
26
27
28
29
30
              <sebm-google-map-marker [latitude]="getLocation(message.content).lat" [longitude]="getLocation(message.content).lng"></sebm-google-map-marker>
            </sebm-google-map>
          </div>
          <img *ngIf="message.type == 'picture'" (click)="showPicture($event)" class="message-content message-content-picture" [src]="message.content">
 
          <span class="message-timestamp">{{ message.createdAt | amDateFormat: 'HH:mm' }}</span>
        </div>
Improve this code

As you can see, we also bound the picture message to the click event, which means that whenever we click on it, a picture viewer should be opened with the clicked picture. Let's create the component for that picture viewer:

12.16 Create show picture component client/imports/pages/messages/show-picture.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Component } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';
import template from './show-picture.html';
 
@Component({
  template
})
export class ShowPictureComponent {
  pictureSrc: string;
 
  constructor(private navParams: NavParams, private viewCtrl: ViewController) {
    this.pictureSrc = navParams.get('pictureSrc');
  }
}
Improve this code
12.17 Create show picture template client/imports/pages/messages/show-picture.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
<ion-header>
  <ion-toolbar color="whatsapp">
    <ion-title>Show Picture</ion-title>
 
    <ion-buttons left>
      <button ion-button class="dismiss-button" (click)="viewCtrl.dismiss()"><ion-icon name="close"></ion-icon></button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
 
<ion-content class="show-picture">
  <img class="picture" [src]="pictureSrc">
</ion-content>
Improve this code
12.18 Create show pictuer component styles client/imports/pages/messages/show-picture.scss 
1
2
3
4
5
6
7
8
9
10
.show-picture {
  background-color: black;
 
  .picture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
Improve this code
12.19 Import ShowPictureComponent client/imports/app/app.module.ts 
10
11
12
13
14
15
16
 
29
30
31
32
33
34
35
36
 
51
52
53
54
55
56
57
58
import { MessagesAttachmentsComponent } from '../pages/messages/messages-attachments';
import { MessagesOptionsComponent } from '../pages/messages/messages-options';
import { NewLocationMessageComponent } from '../pages/messages/location-message';
import { ShowPictureComponent } from '../pages/messages/show-picture';
import { ProfilePage } from '../pages/profile/profile';
import { VerificationPage } from '../pages/verification/verification';
import { PhoneService } from '../services/phone';
...some lines skipped...
    NewChatComponent,
    MessagesOptionsComponent,
    MessagesAttachmentsComponent,
    NewLocationMessageComponent,
    ShowPictureComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp),
...some lines skipped...
    NewChatComponent,
    MessagesOptionsComponent,
    MessagesAttachmentsComponent,
    NewLocationMessageComponent,
    ShowPictureComponent
  ],
  providers: [
    { provide: ErrorHandler, useClass: IonicErrorHandler },
Improve this code

And now that we have that component ready, we will implement the showPicture method in the MessagesPage component, which will create a new instance of the ShowPictureComponent:

12.20 Implement showPicture method client/imports/pages/messages/messages.ts 
1
2
3
4
5
 
9
10
11
12
13
14
15
 
32
33
34
35
36
37
38
39
 
268
269
270
271
272
273
274
275
276
277
278
279
import { Component, OnDestroy, OnInit, ElementRef } from '@angular/core';
import { NavParams, PopoverController, ModalController } from 'ionic-angular';
import { MeteorObservable } from 'meteor-rxjs';
import { _ } from 'meteor/underscore';
import * as Moment from 'moment';
...some lines skipped...
import { PictureService } from '../../services/picture';
import { MessagesAttachmentsComponent } from './messages-attachments';
import { MessagesOptionsComponent } from './messages-options';
import { ShowPictureComponent } from './show-picture';
import template from './messages.html';
 
@Component({
...some lines skipped...
    navParams: NavParams,
    private el: ElementRef,
    private popoverCtrl: PopoverController,
    private pictureService: PictureService,
    private modalCtrl: ModalController
  ) {
    this.selectedChat = <Chat>navParams.get('chat');
    this.title = this.selectedChat.title;
...some lines skipped...
      zoom: Math.min(splitted[2] || 0, 19)
    };
  }
 
  showPicture({ target }: Event) {
    const modal = this.modalCtrl.create(ShowPictureComponent, {
      pictureSrc: (<HTMLImageElement>target).src
    });
 
    modal.present();
  }
}
Improve this code

Profile Picture

We have the ability to send picture messages. Now we will add the ability to change the user's profile picture using the infrastructure we've just created. To begin with, we will define a new property to our User model called pictureId, which will be used to determine the belonging profile picture of the current user:

12.21 Add pictureId property to Profile imports/models.ts 
5
6
7
8
9
10
11
export interface Profile {
  name?: string;
  picture?: string;
  pictureId?: string;
}
 
export enum MessageType {
Improve this code

We will bind the editing button in the profile selection page into an event handler:

12.22 Add event for changing profile picture client/imports/pages/profile/profile.html 
11
12
13
14
15
16
17
<ion-content class="profile-page-content">
  <div class="profile-picture">
    <img *ngIf="picture" [src]="picture">
    <ion-icon name="create" (click)="selectProfilePicture()"></ion-icon>
  </div>
 
  <ion-item class="profile-name">
Improve this code

And we will add all the missing logic in the component, so the pictureId will be transformed into and actual reference, and so we can have the ability to select a picture from our gallery and upload it:

12.23 Implement pick, update and set of profile image client/imports/pages/profile/profile.ts 
1
2
3
4
5
6
7
8
9
 
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
import { Component, OnInit } from '@angular/core';
import { AlertController, NavController } from 'ionic-angular';
import { MeteorObservable } from 'meteor-rxjs';
import { Pictures } from '../../../../imports/collections';
import { Profile } from '../../../../imports/models';
import { PictureService } from '../../services/picture';
import { ChatsPage } from '../chats/chats';
import template from './profile.html';
 
...some lines skipped...
 
  constructor(
    private alertCtrl: AlertController,
    private navCtrl: NavController,
    private pictureService: PictureService
  ) {}
 
  ngOnInit(): void {
    this.profile = Meteor.user().profile || {
      name: ''
    };
 
    MeteorObservable.subscribe('user').subscribe(() => {
      this.picture = Pictures.getPictureUrl(this.profile.pictureId);
    });
  }
 
  selectProfilePicture(): void {
    this.pictureService.select().then((blob) => {
      this.uploadProfilePicture(blob);
    })
      .catch((e) => {
        this.handleError(e);
      });
  }
 
  uploadProfilePicture(blob: Blob): void {
    this.pictureService.upload(blob).then((picture) => {
      this.profile.pictureId = picture._id;
      this.picture = picture.url;
    })
      .catch((e) => {
        this.handleError(e);
      });
  }
 
  updateProfile(): void {
Improve this code

We will also define a new hook in the Meteor.users collection so whenever we update the profile picture, the previous one will be removed from the data-base. This way we won't have some unnecessary data in our data-base, which will save us some precious storage:

12.24 Add after hook for user modification imports/collections/users.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { MongoObservable } from 'meteor-rxjs';
import { Meteor } from 'meteor/meteor';
import { User } from '../models';
import { Pictures } from './pictures';
 
export const Users = MongoObservable.fromExisting<User>(Meteor.users);
 
// Dispose unused profile pictures
Meteor.users.after.update(function (userId, doc, fieldNames, modifier, options) {
  if (!doc.profile) return;
  if (!this.previous.profile) return;
  if (doc.profile.pictureId == this.previous.profile.pictureId) return;
 
  Pictures.collection.remove({ _id: doc.profile.pictureId });
}, { fetchPrevious: true });
Improve this code

Collection hooks are not part of Meteor's official API and are added through a third-party package called matb33:collection-hooks. This requires us to install the necessary type definition:

$ npm install --save-dev @types/meteor-collection-hooks

Now we need to import the type definition we've just installed in the tsconfig.json file:

12.26 Import @types/meteor-collection-hooks tsconfig.json 
20
21
22
23
24
25
26
27
      "meteor-typings",
      "@types/underscore",
      "@types/meteor-accounts-phone",
      "@types/meteor-publish-composite",
      "@types/meteor-collection-hooks"
    ]
  },
  "include": [
Improve this code

We now add a user publication which should be subscribed whenever we initialize the ProfilePage. This subscription should fetch some data from other collections which is related to the user which is currently logged in; And to be more specific, the document associated with the profileId defined in the User model:

12.27 Add user publication server/publications.ts 
1
2
3
4
5
6
 
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { Chats, Messages, Pictures, Users } from '../imports/collections';
import { Chat, Message, User } from '../imports/models';
 
Meteor.publishComposite('users', function(
...some lines skipped...
      }
    ]
  };
});
 
Meteor.publish('user', function () {
  if (!this.userId) {
    return;
  }
 
  const profile = Users.findOne(this.userId).profile || {};
 
  return Pictures.collection.find({
    _id: profile.pictureId
  });
});
Improve this code

We will also modify the users and chats publication, so each user will contain its corresponding picture document as well:

12.28 Added images to users publication server/publications.ts 
1
2
3
4
5
6
7
 
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { Chats, Messages, Pictures, Users } from '../imports/collections';
import { Chat, Message, Picture, User } from '../imports/models';
 
Meteor.publishComposite('users', function(
  pattern: string
...some lines skipped...
        fields: { profile: 1 },
        limit: 15
      });
    },
 
    children: [
      <PublishCompositeConfig1<User, Picture>> {
        find: (user) => {
          return Pictures.collection.find(user.profile.pictureId, {
            fields: { url: 1 }
          });
        }
      }
    ]
  };
});
Improve this code
12.29 Add images to chats publication server/publications.ts 
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
          }, {
            fields: { profile: 1 }
          });
        },
        children: [
          <PublishCompositeConfig2<Chat, User, Picture>> {
            find: (user, chat) => {
              return Pictures.collection.find(user.profile.pictureId, {
                fields: { url: 1 }
              });
            }
          }
        ]
      }
    ]
  };
Improve this code

Since we already set up some collection hooks on the users collection, we can take it a step further by defining collection hooks on the chat collection, so whenever a chat is being removed, all its corresponding messages will be removed as well:

12.30 Add hook for removing unused messages imports/collections/chats.ts 
1
2
3
4
5
6
7
8
9
10
import { MongoObservable } from 'meteor-rxjs';
import { Chat } from '../models';
import { Messages } from './messages';
 
export const Chats = new MongoObservable.Collection<Chat>('chats');
 
// Dispose unused messages
Chats.collection.after.remove(function (userId, doc) {
  Messages.collection.remove({ chatId: doc._id });
});
Improve this code

We will now update the updateProfile method in the server to accept pictureId, so whenever we pick up a new profile picture the server won't reject it:

12.31 Allow updating pictureId server/methods.ts 
61
62
63
64
65
66
67
68
      'User must be logged-in to create a new chat');
 
    check(profile, {
      name: nonEmptyString,
      pictureId: Match.Maybe(nonEmptyString)
    });
 
    Meteor.users.update(this.userId, {
Improve this code

Now we will update the users fabrication in our server's initialization, so instead of using hard-coded URLs, we will insert them as new documents to the PicturesCollection:

12.32 Update creation of users stubs server/main.ts 
1
2
3
4
5
6
7
 
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { Accounts } from 'meteor/accounts-base';
import { Meteor } from 'meteor/meteor';
import { Chats, Messages, Users } from '../imports/collections';
import { MessageType, Picture } from '../imports/models';
 
Meteor.startup(() => {
  if (Meteor.settings) {
...some lines skipped...
    return;
  }
 
  let picture = importPictureFromUrl({
    name: 'man1.jpg',
    url: 'https://randomuser.me/api/portraits/men/1.jpg'
  });
 
  Accounts.createUserWithPhone({
    phone: '+972540000001',
    profile: {
      name: 'Ethan Gonzalez',
      pictureId: picture._id
    }
  });
 
  picture = importPictureFromUrl({
    name: 'lego1.jpg',
    url: 'https://randomuser.me/api/portraits/lego/1.jpg'
  });
 
  Accounts.createUserWithPhone({
    phone: '+972540000002',
    profile: {
      name: 'Bryan Wallace',
      pictureId: picture._id
    }
  });
 
  picture = importPictureFromUrl({
    name: 'woman1.jpg',
    url: 'https://randomuser.me/api/portraits/women/1.jpg'
  });
 
  Accounts.createUserWithPhone({
    phone: '+972540000003',
    profile: {
      name: 'Avery Stewart',
      pictureId: picture._id
    }
  });
 
  picture = importPictureFromUrl({
    name: 'woman2.jpg',
    url: 'https://randomuser.me/api/portraits/women/2.jpg'
  });
 
  Accounts.createUserWithPhone({
    phone: '+972540000004',
    profile: {
      name: 'Katie Peterson',
      pictureId: picture._id
    }
  });
 
  picture = importPictureFromUrl({
    name: 'man2.jpg',
    url: 'https://randomuser.me/api/portraits/men/2.jpg'
  });
 
  Accounts.createUserWithPhone({
    phone: '+972540000005',
    profile: {
      name: 'Ray Edwards',
      pictureId: picture._id
    }
  });
});
 
function importPictureFromUrl(options: { name: string, url: string }): Picture {
  const description = { name: options.name };
 
  return Meteor.call('ufsImportURL', options.url, description, 'pictures');
}
Improve this code

To avoid some unexpected behaviors, we will reset our data-base so our server can re-fabricate the data:

$ meteor reset

We will now update the ChatsPage to add the belonging picture for each chat during transformation:

12.33 Fetch user image from server client/imports/pages/chats/chats.ts 
3
4
5
6
7
8
9
10
 
50
51
52
53
54
55
56
import { MeteorObservable } from 'meteor-rxjs';
import * as Moment from 'moment';
import { Observable, Subscriber } from 'rxjs';
import { Chats, Messages, Users, Pictures } from '../../../../imports/collections';
import { Chat, Message } from '../../../../imports/models';
import { ChatsOptionsComponent } from './chats-options';
import { MessagesPage } from '../messages/messages';
import template from './chats.html';
...some lines skipped...
 
        if (receiver) {
          chat.title = receiver.profile.name;
          chat.picture = Pictures.getPictureUrl(receiver.profile.pictureId);
        }
 
        // This will make the last message reactive
Improve this code

And we will do the same in the NewChatComponent:

12.34 Use the new pictureId field for new chat modal client/imports/pages/chats/new-chat.html 
26
27
28
29
30
31
32
<ion-content class="new-chat">
  <ion-list class="users">
    <button ion-item *ngFor="let user of users | async" class="user" (click)="addChat(user)">
      <img class="user-picture" [src]="getPic(user.profile.pictureId)">
      <h2 class="user-name">{{user.profile.name}}</h2>
    </button>
  </ion-list>
Improve this code
12.35 Implement getPic client/imports/pages/chats/new-chat.ts 
3
4
5
6
7
8
9
 
107
108
109
110
111
112
113
114
import { MeteorObservable } from 'meteor-rxjs';
import { _ } from 'meteor/underscore';
import { Observable, Subscription, BehaviorSubject } from 'rxjs';
import { Chats, Pictures, Users } from '../../../../imports/collections';
import { User } from '../../../../imports/models';
import template from './new-chat.html';
 
...some lines skipped...
 
    alert.present();
  }
 
  getPic(pictureId): string {
    return Pictures.getPictureUrl(pictureId);
  }
}
Improve this code

{{{nav_step prev_ref="https://angular-meteor.com/tutorials/whatsapp2/meteor/google-maps" next_ref="https://angular-meteor.com/tutorials/whatsapp2/meteor/native-mobile"}}}

navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial