Код Socket.Io, который находится в ловушке жизненного цикла ngOninit, не работает, когда я перемещаюсь через маршрутизатор в угловом режиме - PullRequest
Новая
       26

Код Socket.Io, который находится в ловушке жизненного цикла ngOninit, не работает, когда я перемещаюсь через маршрутизатор в угловом режиме

0 голосов
/ 07 мая 2019

Я создаю приложение чата в реальном времени с Angular и socket.Io. У меня есть два компонента Присоединиться и Чат. Присоединение компонента передачи параметров запроса к компоненту чата.

Когда я перехожу к компоненту Чат из компонента соединения через маршрутизатор. Метод навигация, только код, связанный с socket.io, который находится в ловушке ngOnInit lifeCycle, не работает. Но когда я сильно обновляюсь, тогда это работает.

В прошлом я пытался создать новый сервис, и вся логика, связанная с сокетами, передавалась этому сервису, и я вызывал компонент чата, но он не работает

Join.component.ts 

export class JoinComponent implements OnInit {

  name = '';
  room = '';

  constructor(private router: Router) { }

  ngOnInit() {
  }

  join() {
    this.router.navigate(['/chat'], {queryParams: {
      name: this.name,
      room: this.room
    }});
  }

}

chat.component.ts 

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

import * as io from 'socket.io-client';
import * as moment from 'moment';
import { Message } from '../models/message.model';
import { ActivatedRoute, Router, Params } from '@angular/router';

export const socket = io('https://mangapotichat.herokuapp.com');

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  message = '';
  messages: Array<Message> = [];
  sendLocationDisabled = false;
  name: string;
  room: string;

  constructor(
    private changeDetection: ChangeDetectorRef,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    // route params retrieve

    this.route.queryParams.subscribe(params => {
      this.name = params.name;
      this.room = params.room;
    });
    console.log(this.name, this.room);
    // socket connection
    socket.on('connect', () => {
      console.log(`server is connected`);
      const params = {
        name: this.name,
        room: this.room
      };

      socket.emit('join', params, err => {
        if (err) {
          alert('Please provide valid room and name');
          this.router.navigateByUrl('/');
        } else {
          console.log('no err');
        }
      });
    });
    socket.on('disconnect', () => console.log(`server is disconnected`));

    socket.on('newMessage', (msg: Message) => {
      msg.createdAt = moment(msg.createdAt).format('h:mm a');
      this.messages.push(msg);
      this.changeDetection.detectChanges();
    });

    socket.on('newLocationMessage', (msg: Message) => {
      msg.createdAt = moment(msg.createdAt).format('h:mm a');
      this.messages.push(msg);
      this.changeDetection.detectChanges();
    });
  }

  submit() {
    socket.emit(
      'createMessage',
      {
        from: this.name,
        text: this.message
      },
      data => {
        this.message = '';
      }
    );
  }

  sendLocation() {
    if (!navigator.geolocation) {
      return alert('geolocation is not supported');
    }
    this.sendLocationDisabled = true;
    navigator.geolocation.getCurrentPosition(
      (position: Position) => {
        this.sendLocationDisabled = false;
        socket.emit('createGeoLocation', {
          name: this.name,
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        });
      },
      (positionError: PositionError) => {
        alert(positionError.message);
        this.sendLocationDisabled = false;
      }
    );
  }
}

Я ожидаю, что при переходе к компоненту чата должен выполняться весь код, связанный с сокетом.

для всего проекта вы можете клонировать этот репозиторий git. Ссылка приведена ниже. https://github.com/vijhhh2/socetio-practice.git

...