Dev Ionic, problem with private Chat (new dev be cool)

Ionic Native
1

Hello,

I have a project to create a chat who allow me to speak in public group and in private.

I did create the public chat and it WORKS !
But like right now im locked on the private chat. I search more and more but i didn’t find the solution to my problem. I dont have any error on my code. But my private chat didn’t work and i didn’t find the solution after more than 24h our of constant search… I would like to have your help if you could help me a bit to be better on Ionic and end my project !

Server : Socket.io
Front : Ionic

My project => https://github.com/Sam91590/SockChaat

I phink my error is on the private-room pages =>

The .html

<ion-header>
    <ion-navbar>
        <ion-title>
          Chat Privé
      </ion-title>
      <ion-col col-3>
        </ion-col>
    </ion-navbar>
    
  </ion-header>
  
  <ion-content>
  <ion-grid>
    <ion-row *ngFor="let message of messages">      
      <ion-col col-9 *ngIf="message.from !== mynickname" class="message" [ngClass]="{'my_message': message.from === mynickname, 'other_message': message.from !== mynickname}">
        <span class="user_name">{{ mynickname }}:</span><br>
        <span>{{ message.text }}</span>
        <div class="time">{{message.created | date:'dd.MM hh:MM'}}</div>
      </ion-col>
  
      <ion-col offset-3 col-9 *ngIf="message.from === mynickname" class="message" [ngClass]="{'my_message': message.from === mynickname, 'other_message': message.from !== mynickname}">
        <span class="user_name">{{ message.from }}:</span><br>
        <span>{{ message.text }}</span>
        <div class="time">{{message.created | date:'dd.MM hh:MM'}}</div>
      </ion-col>
  
    </ion-row>
  </ion-grid>
  
  </ion-content>
  
  <ion-footer>
  <ion-toolbar>
    <ion-row class="message_row">
      <ion-col col-9>
        <ion-item no-lines>
          <ion-input type="text" placeholder="Message" [(ngModel)]="message"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col col-3>
          <button ion-button clear color="primary" (click)="sendMessage()" [disabled]="message === ''">
          Send
        </button>
        </ion-col>
    </ion-row>
  </ion-toolbar>
  </ion-footer>

The .ts

import { Component } from '@angular/core';
import { NavController, IonicPage, NavParams, ToastController } from 'ionic-angular';
import { Socket } from 'ng-socket-io';
import { Observable } from 'rxjs/Observable';
 
@IonicPage()
@Component({
  selector: 'page-private-room',
  templateUrl: 'private-room.html',
})
export class PrivateRoomPage {
  mynickname: string;
  nickname: string;
  messages = [];
  message: string;


constructor(private navCtrl: NavController, private navParams: NavParams, private socket: Socket, private toastCtrl: ToastController) {
  this.mynickname=navParams.get('mynickname');
  this.nickname=navParams.get('nickname');

  this.getMessages().subscribe(message => {
    console.log(message);
    this.messages.push(message);
  });

  this.getUsers().subscribe(data => {
    let user = this.nickname;
    console.log(data['user']);
    if (data['event'] === 'left') {
      this.showToast('User left: ' + user);

    } else {
      this.showToast('User joined: ' + user);

    }
  });
}

sendMessage() {
  this.socket.emit('private-message', { text: this.message, id_dest: this.nickname, id:this.mynickname});
  console.log(this.message, this.nickname, this.mynickname);
  this.message = '';
}
getMessages() {
  let observable = new Observable(observer => {
    this.socket.on('Pmessage', (data) => {
      observer.next(data);
    });
  })

  return observable;
}
getUsers() {

  let observable = new Observable(observer => {
    this.socket.on('users-changed', (data) => {
      observer.next(data);
    });
  });
  console.log(observable);
  return observable;
}
showToast(msg) {
  let toast = this.toastCtrl.create({
    message: msg,
    duration: 2000
  });
  toast.present();
}

}

Hop you can help me ;(
Have a nice day :slight_smile:

(not English btw, making my best ^^)