2

I created two service send-message.service.ts

import { Injectable } from "@angular/core";
import * as io from 'socket.io-client';

@Injectable()
export class SendMessageService {

  private url = 'http://localhost:4000';
  private socket = io(this.url);

  saveUser(user) {
    this.socket.emit('joining-to-chat', user);
  }

  sendMessage(data) {
    this.socket.emit('send-message', data);
  }

}

and receive-message.service.ts

import { Injectable } from "@angular/core";
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';

@Injectable()
export class ReceiveMessageService {

  private url = 'http://localhost:4000';
  private socket = io(this.url);

  getMessage() {
    let observable = new Observable(observer => {
      this.socket.on('getMessage', (data) => {
        observer.next(data);
      });
      return () => {
        this.socket.disconnect();
      };
    })
    return observable;
  }
}

And my server code is look like following: 

export default (io) => {

  io.on('connect', (socket) => {

    var users = [];

    socket.on('send-message', (data) => {
       io.sockets.in(data.message_to).emit('getMessage', {
        text: data.message,
        from: data.message_from
      })
    })

    socket.on('joining-to-chat', (data) => {
      socket.join(data.username);
      users.push(data.username);
      io.emit('new-user', users)
    })

    socket.on('disconnect', () => {
      console.log('a user disconnected');
    })

  })

}

When send-message and getMessage event in same service server code and client code everything work perfectly as my expectation. But if these to event placed in different service I can't emit event two specific client. Only io.emit('getMessage', 'msg') and socket.emit('getMessage', 'msg') work correctly. I am using:

Angula2 v4.3.1 

"@types/socket.io-client": "1.4.30", 
"socket.io-client": "2.0.3", 
"socket.io": "2.0.3",

I want to know how to use socket.io-client in angular2 and what is the best structure of socket.io-client when my app contain lots of different independent module and services?

Shamim Hossain
  • 650
  • 8
  • 21

1 Answers1

0

The server side code for socket joining and emitting event to specific user is pretty well. But in client side there have two different instance of socket in two different service. First instance of socket which has been created in SendMessageService that joined with socket and another new socket instance in ReceiveMessageService are not same. So it would not broadcast event as expected. To make it workable two socket in

getMessage() {
    let observable = new Observable(observer => {
      this.socket.on('getMessage', (data) => {
        observer.next(data);
      });
      return () => {
        this.socket.disconnect();
      };
    })
    return observable;
  }

and 

saveUser(user) {
   this.socket.emit('joining-to-chat', user);
  }

should be same instance of socket.Though the angular component or module are different those will use getMessage and saveUser service methods should be use a common service or a global service.

To create a global service follow the link Making global service

Shamim Hossain
  • 650
  • 8
  • 21