469 |
487 |
470 |
477 |
486 |
478 |
480 | In previous tutorial we created a simple chat application, in this tutorial we are going to add support for MongoDb database to store messages, users and rooms.
479 |
481 |
485 |
482 | 
483 |
484 |
483 |
488 |
1022 | Nest Application
489 |
490 |
1021 |
491 |
660 | Database Setup
492 |
493 |
495 | In this tutorial we are going to use MongoDb as database however you could use another database with some little tweaks. We are going to explore two ways to add MongoDb locally.
494 |
496 |
497 |
513 |
514 | | 499 | 500 | | 501 |
502 |
503 |
505 | Before continue with this part, in the console go to
506 |
510 |
507 |
509 | |
511 |
515 |
587 | Brew Installation
516 | 519 |
520 |
524 |
521 |
523 | brew install mongodb
525 |
527 | then you could just start it running
526 |
528 |
532 |
529 |
531 | brew services start mongo
533 |
535 | Then start the mongo shell pointing to the chat database:
536 |
540 |
537 |
539 | mongo chat
541 |
543 | After you start the mongo-shell you need to add user chat-admin, set password password123 and add the role dbAdmin for chat database. so run next commands in the console:
544 |
548 |
545 |
547 | db.createUser({user: 'chat-admin', pwd: 'password123', roles: [{role: 'dbAdmin', db: 'chat'}]})
549 |
551 | then you are going to get something like next:
550 |
552 |
564 |
553 |
563 | Successfully added user: {
554 | "user" : "chat-admin",
555 | "roles" : [
556 | {
557 | "role" : "dbAdmin",
558 | "db" : "chat"
559 | }
560 | ]
561 | }
565 |
567 | then just press combination ctrl + C to stop mongo shell.
568 |
569 |
585 |
586 | | 571 | 572 | | 573 |
574 |
575 |
577 | If you want to start another instance of mongodb in the same port, for example with
578 |
582 |
579 |
581 | |
583 |
588 |
659 | Docker Compose Setup
589 |
590 |
592 | The second way is to use docker and docker-compose. To do that, we need to create a docker-compose.yaml file and add next code:
593 |
606 |
594 |
605 | version: '3.0'
595 | services:
596 | mongo:
597 | image: mongo
598 | ports:
599 | - 27017:27017 (1)
600 | volumes:
601 | - ./docker-compose-files:/docker-entrypoint-initdb.d (2)
602 | environment:
603 | MONGO_INITDB_DATABASE: chat (3)
607 |
608 |
621 |
622 | | 1 | 610 |whenever we run docker-compose up mongo the database will run and listen on port 27017. |
611 |
| 2 | 614 |We create a virtual volume from docker-compose-files folder created in the host machine and share it inside the container as docker-entrypoint-initdb.d. In this folder we will put initialization scripts to start the database with preloaded data. |
615 |
| 3 | 618 |We set the default database that will be used by the application | 619 |
623 |
625 | As you can see in the previous file docker-compose needs initialization files to start the database, so we will create file docker-compose-files/initdbs.js which will contain the initialization script. Then add next code to it:
626 |
634 |
627 |
633 | db.createUser({
628 | user: 'chat-admin',
629 | pwd: 'password123',
630 | roles: [{role: 'dbAdmin', db: 'chat'}]
631 | }); (1)
635 |
636 |
641 |
642 | | 1 | 638 |creates a new user chat-admin, sets password password123 and add the role dbAdmin for chat database. |
639 |
643 |
645 | There are several advantages of using docker-compose over local brew installation:
646 |
658 | -
647 |
-
648 |
We can create a new MongoDB database for every project without affecting others.
649 |
650 | -
651 |
We could destroy the database data just running:
652 |docker-compose down -vand restart it runningdocker-compose up mongo. This is very important for integration testing.
653 | -
654 |
We can specify NodeJs and MongoDB version we are working, so others just need to run
655 |docker-compose up mongoto have the same environment as us.
656 |
661 |
812 | Nestjs/Mongoose
662 |
663 |
665 | In order to add support for mongodb database, Nest comes with the ready to use @nestjs/mongoose package. This is one of the most mature available so far. Since it’s written in TypeScript, it works pretty well with the Nest framework.
666 |
668 | Firstly, we need to install all of the required dependencies:
667 |
669 |
673 |
670 |
672 | npm i -s @nestjs/mongoose mongoose
674 |
676 | Once the installation process is completed, we can import the MongooseModule into the root ApplicationModule.
677 |
707 |
678 |
706 | import { Module } from '@nestjs/common';
679 | import { AppController } from './app.controller';
680 | import { AppService } from './app.service';
681 | import { MessagesGateway } from './gateways/messages/messages.gateway';
682 | import { RoomsController } from './controllers/rooms/rooms.controller';
683 | import { MongooseModule } from "@nestjs/mongoose"; (1)
684 | import { Message, MessageSchema } from './models/message.model';
685 | import { Room, RoomSchema } from './models/room.model';
686 | import { User, UserSchema } from './models/user.model';
687 |
688 | @Module({
689 | imports: [
690 | MongooseModule.forRoot('mongodb://chat-admin:password123@localhost/chat', {}), (2)
691 | MongooseModule.forFeature([
692 | {name: Message.name, schema: MessageSchema},
693 | {name: Room.name, schema: RoomSchema},
694 | {name: User.name, schema: UserSchema}
695 | ]), (3)
696 | ],
697 | controllers: [
698 | AppController,
699 | RoomsController,
700 | ],
701 | providers: [AppService, MessagesGateway],
702 | })
703 | export class AppModule {
704 | }
708 |
709 |
722 |
723 | | 1 | 711 |Import MongooseModule from @nestjs/mongoose package |
712 |
| 2 | 715 |Add MongooseModule configurations for mongo database connection |
716 |
| 3 | 719 |Add models to MongooseModule so they can be injected later in the application components |
720 |
724 |
726 | Now we need to create three models Message, Room, and User.
727 |
756 | src/models/message.model.ts
728 |
729 |
755 | import {User} from './user.model';
730 | import {Room} from './room.model';
731 | import {ObjectID} from 'bson';
732 | import {Prop, Schema, SchemaFactory} from "@nestjs/mongoose";
733 | import {Types} from "mongoose";
734 |
735 | @Schema()
736 | export class Message {
737 |
738 | _id: ObjectID | string;
739 |
740 | @Prop({required: true})
741 | text: string;
742 |
743 | @Prop({required: true})
744 | created: Date;
745 |
746 | @Prop({required: true, ref: 'User', type: Types.ObjectId})
747 | owner: User;
748 |
749 | @Prop({required: true, ref: 'Room', type: Types.ObjectId})
750 | room: Room | string;
751 | }
752 |
753 | export const MessageSchema = SchemaFactory.createForClass(Message)
757 |
782 | src/models/room.model.ts
758 |
759 |
781 | import {Message} from './message.model';
760 | import {User} from './user.model';
761 | import {ObjectID} from 'bson';
762 | import {Prop, Schema, SchemaFactory} from "@nestjs/mongoose";
763 | import {Types} from "mongoose";
764 |
765 | @Schema()
766 | export class Room {
767 | _id: ObjectID | string;
768 |
769 | @Prop({required: true, maxlength: 20, minlength: 5})
770 | name: string;
771 |
772 | @Prop({type: [{type: Types.ObjectId, ref: 'Message'}]})
773 | messages: Message[];
774 |
775 | @Prop({type: [{type: Types.ObjectId, ref: 'User'}]})
776 | connectedUsers: User[];
777 | }
778 |
779 | export const RoomSchema = SchemaFactory.createForClass(Room)
783 |
811 | src/models/user.model.ts
784 |
785 |
810 | import {Message} from './message.model';
786 | import {Room} from './room.model';
787 | import {ObjectID} from 'bson';
788 | import {Types} from "mongoose";
789 | import {Prop, Schema, SchemaFactory} from "@nestjs/mongoose";
790 |
791 | @Schema()
792 | export class User {
793 | _id?: ObjectID | string;
794 |
795 | @Prop({required: true, maxlength: 20, minlength: 5})
796 | nickname: string;
797 |
798 | @Prop({required: true})
799 | clientId: string;
800 |
801 | @Prop({type: [{type: Types.ObjectId, ref: 'Message'}]})
802 | messages?: Message[];
803 |
804 | @Prop({type: [{type: Types.ObjectId, ref: 'Room'}]})
805 | joinedRooms?: Room[];
806 | }
807 |
808 | export const UserSchema = SchemaFactory.createForClass(User)
813 |
1020 | Modify Gateways and Controllers
814 |
815 |
817 | After that we need to modify messages.gateway.ts, so we inject each db model:
818 |
879 |
819 |
878 | import {OnGatewayDisconnect, SubscribeMessage, WebSocketGateway, WebSocketServer} from '@nestjs/websockets';
820 | import { Socket } from 'socket.io';
821 | import { Message } from '../../models/message.model';
822 | import { User } from '../../models/user.model';
823 | import { Room } from '../../models/room.model';
824 | import {InjectModel} from "@nestjs/mongoose";
825 | import {Model} from "mongoose";
826 | import {Server} from "socket.io";
827 |
828 | @WebSocketGateway({cors: '*:*'})
829 | export class MessagesGateway implements OnGatewayDisconnect {
830 |
831 | constructor(@InjectModel(Message.name) private readonly messagesModel: Model<Message>,
832 | @InjectModel(Room.name) private readonly roomsModel: Model<Room>,
833 | @InjectModel(User.name) private readonly usersModel: Model<User>) { (1)
834 | }
835 |
836 | @WebSocketServer()
837 | server: Server;
838 |
839 | async handleDisconnect(client: Socket) { (2)
840 | const user = await this.usersModel.findOne({clientId: client.id});
841 | if (user) {
842 | this.server.emit('users-changed', {user: user.nickname, event: 'left'});
843 | user.clientId = null;
844 | await this.usersModel.findByIdAndUpdate(user._id, user);
845 | }
846 | }
847 |
848 | @SubscribeMessage('enter-chat-room') (3)
849 | async enterChatRoom(client: Socket, data: { nickname: string, roomId: string }) {
850 | let user = await this.usersModel.findOne({nickname: data.nickname});
851 | if (!user) {
852 | user = await this.usersModel.create({nickname: data.nickname, clientId: client.id});
853 | } else {
854 | user.clientId = client.id;
855 | user = await this.usersModel.findByIdAndUpdate(user._id, user, {new: true});
856 | }
857 | client.join(data.roomId);
858 | client.broadcast.to(data.roomId)
859 | .emit('users-changed', {user: user.nickname, event: 'joined'}); (3)
860 | }
861 |
862 | @SubscribeMessage('leave-chat-room') (4)
863 | async leaveChatRoom(client: Socket, data: { nickname: string, roomId: string }) {
864 | const user = await this.usersModel.findOne({nickname: data.nickname});
865 | client.broadcast.to(data.roomId).emit('users-changed', {user: user.nickname, event: 'left'}); (3)
866 | client.leave(data.roomId);
867 | }
868 |
869 | @SubscribeMessage('add-message') (5)
870 | async addMessage(client: Socket, message: Message) {
871 | message.owner = await this.usersModel.findOne({clientId: client.id});
872 | message.created = new Date();
873 | message = await this.messagesModel.create(message);
874 | this.server.in(message.room as string).emit('message', message);
875 | }
876 | }
880 |
881 |
902 |
903 | | 1 | 883 |Inject mongoose models for: Message, Room, and User. |
884 |
| 2 | 887 |Handles user disconnection, it sends an event that the user is disconnected. | 888 |
| 3 | 891 |Handles subscription to enter-chat-room event, which is in charge of adding user to a chat room, if the user doesn’t exist then create a new one. |
892 |
| 4 | 895 |Handles subscription to leave-chat-room event, which remove user from the chat room and emits users-changed event to all users of the chat-room |
896 |
| 5 | 899 |Handles subscription to add-message event, which is in charge of adding messages coming from users in the chat room |
900 |
904 |
906 | Then we need to modify rooms.controller.ts, so we inject Room model into it:
907 |
937 |
908 |
936 | import { Body, Controller, Get, Param, Post, Query } from '@nestjs/common';
909 | import { Room } from '../../models/room.model';
910 | import {Model} from "mongoose";
911 | import {InjectModel} from "@nestjs/mongoose";
912 |
913 | @Controller('api/rooms')
914 | export class RoomsController {
915 | constructor(@InjectModel(Room.name) private readonly model: Model<Room>) {} (1)
916 |
917 | @Get()
918 | find(@Query('q') q) { (2)
919 | if (q) return this.model.find({name: {$regex: new RegExp(`.*${q}.*`)}});
920 | else return this.model.find();
921 | }
922 |
923 | @Get('/:id')
924 | findById(@Param('id') id: string) { (3)
925 | return this.model.findById(id);
926 | }
927 |
928 | @Post()
929 | save(@Body() item: Room) { (4)
930 | return item._id
931 | ? this.model.findByIdAndUpdate(item._id, item, {new: true})
932 | : this.model.create(item);
933 | }
934 | }
938 |
939 |
956 |
957 | | 1 | 941 |Inject Room mongoose model |
942 |
| 2 | 945 |Handles GET request for api/rooms. This request could contains a query parameter called q. This could contain a partial room.name value so users can query to the database with values that matches the partial value. If the query parameter is not present then it will return the full list of rooms. |
946 |
| 3 | 949 |Handles GET request for api/rooms/:id. Finds and returns the full information of the room matching that id. |
950 |
| 4 | 953 |Handles the POST request for api/rooms. If the item contains an _id value, it updates any previous created room. if not, it creates a new room with the passed values. Finally, it returns the saved value to the client. |
954 |
958 |
960 | Finally we need to add messages.controller.ts. To do that you should run:
961 |
965 |
962 |
964 | nest g co controllers/messages
966 |
968 | Then modify messages.controller.ts with next code:
969 |
987 |
970 |
986 | import { Controller, Get, Query } from '@nestjs/common';
971 | import { Message } from '../../models/message.model';
972 | import {Model} from "mongoose";
973 | import {InjectModel} from "@nestjs/mongoose";
974 |
975 | @Controller('api/messages')
976 | export class MessagesController {
977 | constructor(@InjectModel(Message.name) private readonly model: Model<Message>) {} (1)
978 |
979 | @Get()
980 | find(@Query('where') where) { (2)
981 | where = JSON.parse(where || '{}');
982 | return this.model.find(where).populate('owner').exec();
983 | }
984 | }
988 |
989 |
998 |
999 | | 1 | 991 |Inject Message model |
992 |
| 2 | 995 |Handles GET request for api/messages. This request could contains a query parameter called where. This could contain any query so users can query to the database with values that matches it, for example {owner: {_id: '123'}}. If the where query parameter is not present then it will return the full list of rooms. |
996 |
1000 |
1001 |
1018 |
1019 | | 1003 | 1004 | | 1005 |
1006 |
1007 |
1009 | At the moment queries of controllers does not have any validation so it’s pretty dangerous to use it like that. 1008 |
1010 |
1012 | Also Gateway and Controllers need an authentication and permission system so only users with needed permissions can access and modify data. 1011 |
1013 |
1015 | In next tutorials I will add a better handling of it. 1014 | |
1016 |
1023 |
1537 | Ionic Application
1024 |
1025 |
1536 |
1026 |
1028 | In the previous tutorial inside our Ionic chat app we created 2 screens: On the first screen we picked a name and join the chat, on the second screen we show the actual chatroom with messages. In this tutorial we are going to modify the first screen, so after setting the nickname we go to another page where we select the chat room from a list, and then in the last screen we will only show messages for that specified chat room.
1027 |
1029 |
1030 |
1046 |
1047 | | 1032 | 1033 | | 1034 |
1035 |
1036 |
1038 | Before continue with this part, in the console go to
1039 |
1043 |
1040 |
1042 | |
1044 |
1048 |
1111 | Adding Models
1049 |
1050 |
1052 | Before continue it is good idea to add the models to our app, so create next files:
1051 |
1053 |
1066 | src/app/models/message.ts
1054 |
1055 |
1065 | import { User } from './user';
1056 | import { Room } from './room';
1057 |
1058 | export interface Message {
1059 | _id?: string;
1060 | text?: string;
1061 | owner?: User | string;
1062 | room?: Room | string;
1063 | }
1067 |
1080 | src/app/models/room.ts
1068 |
1069 |
1079 | import { Message } from './message';
1070 | import { User } from './user';
1071 |
1072 | export interface Room {
1073 | _id?: string;
1074 | name?: string;
1075 | messages?: Message[];
1076 | connectedUsers?: User[];
1077 | }
1081 |
1095 | src/app/models/user.ts
1082 |
1083 |
1094 | import { Message } from './message';
1084 | import { Room } from './room';
1085 |
1086 | export interface User {
1087 | _id?: string;
1088 | nickname?: string;
1089 | clientId?: string;
1090 | messages?: Message[];
1091 | joinedRooms?: Room[];
1092 | }
1096 |
1098 | As you can see those files are only interfaces that have the same attributes as the server entities.
1097 |
1099 |
1100 |
1109 |
1110 | | 1102 | 1103 | | 1104 |1105 | Even though there is a way to put this models in a separate library and share this library between the server and client we are not going to do it in this tutorial. 1106 | | 1107 |
1112 |
1173 | Joining a Chatroom
1113 |
1114 |
1116 | So now we need to add a way to select the chat room after setting the nickname. To do that we should modify the file src/app/pages/home/home.ts with the next code:
1117 |
1138 |
1118 |
1137 | import { Component } from '@angular/core';
1119 | import { NavController } from '@ionic/angular';
1120 |
1121 | @Component({
1122 | selector: 'app-home',
1123 | templateUrl: 'home.page.html',
1124 | styleUrls: ['home.page.scss'],
1125 | })
1126 | export class HomePage {
1127 | nickname = '';
1128 |
1129 | constructor(private navController: NavController) { }
1130 |
1131 | joinChat() {
1132 | sessionStorage.setItem('nickname', this.nickname); (1)
1133 | this.navController.navigateRoot(`select-room`); (2)
1134 | }
1135 | }
1139 |
1140 |
1149 |
1150 | | 1 | 1142 |instead setting the nickname in the url-path we save it into the local storage variable so we can use it later. | 1143 |
| 2 | 1146 |we redirect the user to the select-room page |
1147 |
1151 |
1153 | The template file will be the same, so you can keep the next code:
1152 |
1154 |
1172 |
1155 |
1171 | <ion-header>
1156 | <ion-toolbar>
1157 | <ion-title>
1158 | Home
1159 | </ion-title>
1160 | </ion-toolbar>
1161 | </ion-header>
1162 |
1163 | <ion-content padding>
1164 | <ion-item>
1165 | <ion-label stacked>Set Nickname</ion-label>
1166 | <ion-input type="text" [(ngModel)]="nickname" placeholder="Nickname"></ion-input>
1167 | </ion-item>
1168 | <ion-button full (click)="joinChat()" [disabled]="!nickname">Join Chat as {{ nickname }}</ion-button>
1169 | </ion-content>
1174 |
1314 | Building the Room Selection Functionality
1175 |
1176 |
1178 | In this page the user will select the chat room he will join, so we need a selection list and a filter box. The first step will be to create the page running next command:
1177 |
1179 |
1183 |
1180 |
1182 | ionic g page pages/select-room
1184 |
1186 | then we modify select-room.page.html to contain next code:
1187 |
1216 |
1188 |
1215 | <ion-header>
1189 | <ion-toolbar>
1190 | <ion-back-button slot="start" defaultHref="/home"></ion-back-button>
1191 | <ion-title>Select Room</ion-title>
1192 | </ion-toolbar>
1193 | <ion-toolbar primary>
1194 | <ion-searchbar ngModel (ngModelChange)="searchRoom($event)" autocorrect="off"></ion-searchbar> (1)
1195 | </ion-toolbar>
1196 | </ion-header>
1197 |
1198 | <ion-content padding>
1199 | <ion-list>
1200 | <ion-item *ngFor="let room of rooms" (click)="joinRoom(room)"> (2)
1201 | <ion-label>{{room.name}}</ion-label>
1202 | </ion-item>
1203 | </ion-list>
1204 | </ion-content>
1205 |
1206 | <ion-footer>
1207 | <ion-item>
1208 | <ion-input type="text" placeholder="Add Room" [(ngModel)]="roomName" name="roomName"></ion-input> (3)
1209 | <ion-button (click)="addRoom()" [disabled]="!roomName" fill="clear" size="large" slot="end">
1210 | <ion-icon name="add"></ion-icon>
1211 | </ion-button>
1212 | </ion-item>
1213 | </ion-footer>
1217 |
1218 |
1231 |
1232 | | 1 | 1220 |In the header we show the title and a search-box which executes the method searchRoom whenever user types-in and the debounce time has elapsed. |
1221 |
| 2 | 1224 |The content shows the list of rooms filtered by the search box. Whenever the user clicks on any of the items of the list, it will be redirected to the chat-room page. |
1225 |
| 3 | 1228 |The footer contains a text-box that receive the name of a new chat-room and a plus button which executes the method addRoom. |
1229 |
1233 |
1235 | Before modifying the select-room.page.ts file, it will be needed to add the debounce-decorator-ts package. To do it, run next command at the root directory of chat-client app:
1236 |
1240 |
1237 |
1239 | npm i -s debounce-decorator-ts
1241 |
1243 | then we modify select-room.page.ts to contain next code:
1244 |
1289 |
1245 |
1288 | import { Component, OnInit } from '@angular/core';
1246 | import { Room } from '../../models/room';
1247 | import { RoomsService } from '../../services/rooms.service';
1248 | import { debounceFn } from 'debounce-decorator-ts';
1249 | import { NavController } from '@ionic/angular';
1250 |
1251 | @Component({
1252 | selector: 'app-select-room',
1253 | templateUrl: './select-room.page.html',
1254 | styleUrls: ['./select-room.page.scss'],
1255 | })
1256 | export class SelectRoomPage implements OnInit {
1257 |
1258 | rooms: Room[];
1259 |
1260 | roomName: string;
1261 |
1262 | constructor(private roomsService: RoomsService,
1263 | private navController: NavController) { } (1)
1264 |
1265 | ngOnInit() {
1266 | this.searchRoom(''); (2)
1267 | }
1268 |
1269 | @debounceFn(500)
1270 | searchRoom(q: string) { (3)
1271 | const params: any = {};
1272 | if (q) { params.q = q; }
1273 | this.roomsService.find(params).subscribe(rooms => this.rooms = rooms);
1274 | }
1275 |
1276 | joinRoom(room: Room) { (4)
1277 | this.navController.navigateRoot('chat-room/' + room._id);
1278 | }
1279 |
1280 | addRoom() { (5)
1281 | this.roomsService.save({name: this.roomName}).subscribe(room => {
1282 | this.roomName = '';
1283 | this.rooms.push(room);
1284 | });
1285 | }
1286 | }
1290 |
1291 |
1312 |
1313 | | 1 | 1293 |In the constructor we inject |
1294 |
| 2 | 1297 |In the ngOnInit method we search for all the rooms |
1298 |
| 3 | 1301 |The searchRoom method is in charge of searching for rooms in dependence of the parameter q. This method calls roomsService.find method passing parameter q to it. After receiving the rooms list, it fills a local public array to be used by the html template. |
1302 |
| 4 | 1305 |The joinRoom method navigates to chat-room/:id. That id parameter is later used in the chat-room page. |
1306 |
| 5 | 1309 |The addRoom method calls roomsService.save method which sends the information of the new room to the server. After saving the value, it receives the new value and adds it to the rooms local public variable. |
1310 |
1315 |
1535 | Modifying the Chat Functionality
1316 |
1317 |
1319 | To receive new chat messages inside the room we have to listen for message socket event which receive the messages from the server.
1320 |
1322 | Whenever we get such a message we simply push the new message to an array of messages. Remember, since now we have a database to save historic data, we are going to load it.
1321 |
1323 |
1325 | Sending a new message is almost the same as before, we simply emit our event to the server with the right type.
1324 |
1326 |
1328 | Finally, we also listen to the events of users joining and leaving the room and display a little toast whenever someone comes in or leaves the room. It’s the same logic again, with the socket.on() we can listen to all the events broadcasted from our server!
1329 |
1331 | Go ahead and modify chat-room.ts:
1332 |
1411 |
1333 |
1410 | import { Component, OnDestroy, OnInit } from '@angular/core';
1334 | import { ActivatedRoute } from '@angular/router';
1335 | import { Socket } from 'ngx-socket-io';
1336 | import { ToastController } from '@ionic/angular';
1337 | import { Subscription } from 'rxjs';
1338 | import { MessagesService } from '../../services/messages.service'; (1)
1339 | import { RoomsService } from '../../services/rooms.service';
1340 | import { Room } from '../../models/room';
1341 | import { Message } from '../../models/message';
1342 |
1343 | @Component({
1344 | selector: 'app-chat-room',
1345 | templateUrl: './chat-room.page.html',
1346 | styleUrls: ['./chat-room.page.scss'],
1347 | })
1348 | export class ChatRoomPage implements OnInit, OnDestroy {
1349 | messages: Message[] = [];
1350 | nickname = '';
1351 | message = '';
1352 | room: Room = {};
1353 |
1354 | subscription: Subscription;
1355 |
1356 | constructor(private route: ActivatedRoute,
1357 | private socket: Socket,
1358 | private toastCtrl: ToastController,
1359 | private messagesService: MessagesService,
1360 | private roomsService: RoomsService) { } (2)
1361 |
1362 | ngOnInit() {
1363 | this.nickname = sessionStorage.getItem('nickname'); (3)
1364 |
1365 | this.subscription = this.route.params.subscribe(params => {
1366 | const roomId = params.roomId; (4)
1367 | this.socket.emit('enter-chat-room', {roomId, nickname: this.nickname}); (5)
1368 | this.roomsService.findById(roomId).subscribe(room => { (6)
1369 | this.room = room; (7)
1370 | this.messagesService.find({where: JSON.stringify({room: this.room._id})}).subscribe(messages => { (8)
1371 | this.messages = messages; (9)
1372 | });
1373 | });
1374 | });
1375 |
1376 | this.socket.on('message', message => this.messages.push(message));
1377 |
1378 | this.socket.on('users-changed', data => {
1379 | const user = data.user;
1380 | if (data['event'] === 'left') {
1381 | this.showToast('User left: ' + user);
1382 | } else {
1383 | this.showToast('User joined: ' + user);
1384 | }
1385 | });
1386 |
1387 | }
1388 |
1389 | ngOnDestroy() { (10)
1390 | this.subscription.unsubscribe();
1391 | this.socket.removeAllListeners('message');
1392 | this.socket.removeAllListeners('users-changed');
1393 | this.socket.emit('leave-chat-room', {roomId: this.room._id, nickname: this.nickname});
1394 | }
1395 |
1396 | sendMessage() {
1397 | this.socket.emit('add-message', {text: this.message, room: this.room._id}); (11)
1398 | this.message = '';
1399 | }
1400 |
1401 | async showToast(msg) {
1402 | const toast = await this.toastCtrl.create({
1403 | message: msg,
1404 | duration: 2000
1405 | });
1406 | toast.present();
1407 | }
1408 | }
1412 |
1413 |
1458 |
1459 | | 1 | 1415 |We import models and services | 1416 |
| 2 | 1419 |We inject services MessagesService and RoomsService in the constructor |
1420 |
| 3 | 1423 |Instead getting nickname from url, we now get it from sessionStorage. |
1424 |
| 4 | 1427 |We get the roomId from the value coming from the route path param. | 1428 |
| 5 | 1431 |We emit that the user has entered to the chat-room. | 1432 |
| 6 | 1435 |Then we get the full information of the chat-room using roomsService.findById method. |
1436 |
| 7 | 1439 |After receiving the full chat-room info, we set it in a local public variable to be accessible to the html template. | 1440 |
| 8 | 1443 |Then we find all the messages of the chat-room using query: {where: JSON.stringify({room: this.room._id})} |
1444 |
| 9 | 1447 |After getting all the messages of the chat-room, we set them in a local public array to be accessible to the html template. | 1448 |
| 10 | 1451 |In the ngOnDestroy method we need to unsubscribe all the subscriptions, remove listeners for socket.io events, and emit leave-chat-room event so the server can know when a user has left the room. This method is always call whenever the user goes back using the back button. |
1452 |
| 11 | 1455 |We emit the add-message event with the message text and the room id. |
1456 |
1460 |
1462 | And also chat-room.html:
1463 |
1512 |
1464 |
1511 | <ion-header>
1465 | <ion-toolbar>
1466 | <ion-back-button slot="start" defaultHref="/select-room"></ion-back-button> (1)
1467 | <ion-title>
1468 | Room: {{room.name}} (2)
1469 | </ion-title>
1470 | </ion-toolbar>
1471 | </ion-header>
1472 |
1473 | <ion-content>
1474 | <ion-grid>
1475 | <ion-row *ngFor="let message of messages">
1476 |
1477 | <ion-col size="9" *ngIf="message.owner.nickname !== nickname" class="message"
1478 | [ngClass]="{
1479 | 'my_message': message.owner.nickname === nickname,
1480 | 'other_message': message.owner.nickname !== nickname
1481 | }"> (3)
1482 | <span class="user_name">{{ message.owner.nickname }}:</span><br>
1483 | <span>{{ message.text }}</span>
1484 | <div class="time">{{message.created | date:'dd.MM hh:MM'}}</div>
1485 | </ion-col>
1486 |
1487 | <ion-col offset="3" size="9" *ngIf="message.owner.nickname === nickname" class="message"
1488 | [ngClass]="{
1489 | 'my_message': message.owner.nickname === nickname,
1490 | 'other_message': message.owner.nickname !== nickname
1491 | }">
1492 | <span class="user_name">{{ message.owner.nickname }}:</span><br>
1493 | <span>{{ message.text }}</span>
1494 | <div class="time">{{message.created | date:'dd.MM hh:mm'}}</div>
1495 | </ion-col>
1496 |
1497 | </ion-row>
1498 | </ion-grid>
1499 |
1500 | </ion-content>
1501 |
1502 | <ion-footer>
1503 | <ion-item>
1504 | <ion-input type="text" placeholder="Message..." [(ngModel)]="message"></ion-input>
1505 | <ion-button fill="clear" color="primary" slot="end" (click)="sendMessage()" [disabled]="!message" size="large">
1506 | <ion-icon name="send"></ion-icon>
1507 | </ion-button>
1508 | </ion-item>
1509 | </ion-footer>
1513 |
1514 |
1527 |
1528 | | 1 | 1516 |we have to go back to select-room page instead home page |
1517 |
| 2 | 1520 |Instead of just showing Chat in the header, we now show Room: <room-name>. |
1521 |
| 3 | 1524 |now we compare message.owner.nickname instead comparing message.from |
1525 |
1529 |
1531 | Now launch your app and make sure your backend is up and running!
1530 |
1532 |
1534 | For testing, you can open a browser and another incognito browser like in my example at the top to chat with yourself.
1533 |
1538 |
1551 | Conclusion
1539 |
1540 |
1550 |
1541 |
1543 | As you can see adding MongoDB to our project was relatively simple. Furthermore, @nestjs/mongoose give us the huge ability to connect and handle the database without writing too much code.
1544 |
1546 | Now this application looks more real since we can store all the messages, rooms, and users in our database. This leads to the fact that now we can create different chat-rooms with separate conversations.
1545 |
1547 |
1549 | To finish I just want to point that we need to add some sort of authentication and authorization system. So that, only users with required permissions can access rooms and messages. We will do that in next tutorials.
1548 |
1552 |
1571 | Comments
1553 |
1554 |
1555 |
1568 |
1569 |
1570 |