3

I'm working on a livechat application.

I have a chat-component.ts which is working: It allow 2 users to chat each other using socket.io. Currently I have something like this :

{ path: 'chat/:profile/:profileId/:user/:userId/:timeIdentifier', component: ChatComponent, canActivate: [AuthGuard,RoomGuard] }

When the user join this route, a connection is made to the socket.io and allows him to chat in a specific room depending on the route params.

I also use RouteReuseStrategy, so that users can navigate through the application without leaving the chat. How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2

What I want to do is to allow 1 user to chat with multiples users at the same time, using the same chat-component.ts.

I am not sure how can I manage to do that.

For now, when I'm trying to use chat-component multiples times at the same time, it brings a lot of bugs : multiple instances of the component running at the same time are causing them to conflict with each others, as it seems angular doesn't know that there are different instances (but only one of which is re-running all process).

I was thinking of giving a uniq ID to each component instance, but I don't know how to do that.

I'm not sure I've made myself clear, but thanks for your help anyway

Edit:

chat-component.ts

ngOnInit() : void
{ 
  this.tokenUser = this.userService.getUserFromToken();

  const subs = this.route.params.subscribe(params => {

    this.profile = params['profile'];
    this.profile_id = params['profileId'];
    this.customer = params['user'];
    this.customer_id = params['userId'];
    this.room = this.profile + '/' + this.customer;

    //Storing the joined room in a Room Array
    this.data.addRoomArr(this.router.url);

    //Joining the room (socket.io)
    this.joinRoom(this.room, this.profile_id, this.customer_id);
    this.sendNotification(Action.JOINED);

  });
  this.subs.add(subs);

  [...]
}

What I would like to achieve is to reuse this component multiple times (joining multiples rooms).

But if the component has already been created (meaning the user has joined a room), I can't manage to re-create the component with differents data (differents url params) so that the user can join, at the same time, a second room.

When I try to re-create the component (by hiting the same route but with differents params), Angular actually reuse the same already created component, causing a lot of bugs.

I think that what I need to do is to create a sibling component, totally independent from the first one created.

Lucas Dmnt
  • 251
  • 1
  • 4
  • 15
  • Isn't this about socket.io (server side) topic, is it? Could you explain about the backend implementation with socket-io? In my understanding, Angular uses socket.io-client to achieve such chat application by interacting with socket.io server. – Junji Shimagaki Mar 12 '18 at 22:24
  • @JunjiShimagaki Actually socket.io has not much to do with my problem. I edited my question, hoping it's more understandable – Lucas Dmnt Mar 13 '18 at 10:57
  • Thanks for clarification, now got it, although I have never done such before. Well, if you create multiple instances with param differences from a same component, how `selector` would look like? Definitely it shouldn't dynamically generate `` and ``. I found a similar discussion here, but maybe not sufficient for you: https://stackoverflow.com/questions/34818238/instance-angular-2-component-two-times – Junji Shimagaki Mar 13 '18 at 23:36

0 Answers0