How to use .of(namespace)?

[joschne]

Hi! i was trying to use .of(namespace) but I could not figure out how to use it.

When I injected Socket in my Angular Service and called .of('myNamespace') on the WrappedSocket instance I got the error:

ERROR TypeError: this.ioSocket.of is not a function at WrappedSocket.push../node_modules/ngx-socket-io/src/socket-io.service.js.WrappedSocket.of (socket-io.service.js:21)

It would be great to have a little documentation / an example about how to use this function.

Thank you!

[etherealyn]

I also couldn't figure out how to use it.

However, e.g., if chat is your namespace, then you need to supply it in the url of configuration like this:

const config: SocketIoConfig = {url: 'http://localhost:8080/chat', options: {}};

Be aware that this would restrict you to chat namespace globally for each socket. To avoid that, I would suggest using something like this:

import { Injectable, NgModule } from '@angular/core';
import { Socket } from 'ngx-socket-io';

@Injectable()
export class ChatSocket extends Socket {
  constructor() {
    super({url: 'http://localhost:8080/chat', options: {}});
  }
}

@NgModule({
  declarations: [
    //components
  ],
  imports: [
    SocketIoModule,
    //...
  ],
  providers: [ChatSocket],
  bootstrap: [/** AppComponent **/]
})
export class AppModule { }

[lincond]

I have the same error when trying to use .of(). Any updates on this?

[seba-salavilla]

In socketservices you can use this.socket.ioSocket.nsp = "/mynamespace" only if you have a manually connection.

[FaisalAbid]

Any update?

[atao60]

"of" is meaningless on the client side. See Socket.io doc: Restricting yourself to a namespace. The @etherealyn's answer above is almost right. Just remplace: { url: 'http://localhost:8080/chat', options: { } } with: { url: 'http://localhost:8080', options: { path: /chat'' } };

[mat-codehaus]

I had to use { url: 'http://localhost:8080/chat', options: { } }

[Kuppusamy-R]

Hi there,

I've achieved namespace like below ,

import { Socket, SocketIoConfig } from 'ngx-socket-io';

export class SocketNameSpace extends Socket{
  constructor(socketConfig: SocketIoConfig){
    super(socketConfig);
  }
}


@Component(........) // metadata goes here
export class MyComponent{
    chat: SocketNameSpace;
    news: SocketNameSpace;

    constructor(private socket: Socket){
        // this.socket is for root
        this.chat  = new SocketNameSpace({url: 'http://localhost:3000/chat',options: {} });
        this.news  = new SocketNameSpace({url: 'http://localhost:3000/news',options: {} });
   }
}

It works fine and awesome!!!

[ctfrancia]

I am going to close this as it has been over a year, if you still need to please open up a new ticket

[johaven]

I prefer to reimplement of like this

of(namespace: string) {
        const socketInstance = new Socket({url: `${window.location.origin}/${namespace}`})
        this.ioSocketsNameSpaced.push(socketInstance)
        return socketInstance
    }

Because if you don't store all sockets in same service, you have to disconnect independently all of them. An example:

disconnect(close?: any) {
        for (const nsp of this.ioSocketsNameSpaced) {
            nsp.disconnect()
        }
        return this.ioSocket.disconnect.apply(this.ioSocket, arguments)
    }

[eddietal2]

Hi there,

I've achieved namespace like below ,

import { Socket, SocketIoConfig } from 'ngx-socket-io';

export class SocketNameSpace extends Socket{
  constructor(socketConfig: SocketIoConfig){
    super(socketConfig);
  }
}


@Component(........) // metadata goes here
export class MyComponent{
    chat: SocketNameSpace;
    news: SocketNameSpace;

    constructor(private socket: Socket){
        // this.socket is for root
        this.chat  = new SocketNameSpace({url: 'http://localhost:3000/chat',options: {} });
        this.news  = new SocketNameSpace({url: 'http://localhost:3000/news',options: {} });
   }
}

It works fine and awesome!!!

This solution worked for me. For anyone reading this, don't forget to import SocketIoModule and SocketIoConfig to your app.module.ts, as well as SocketIoModule.forRoot(config) in the imports. After that, you can just create the SocketNameSpace class in whatever component is needed (App.component for me).

[yiqu]

Above solution works great. It should be in the documentation.

[Helveg]

I can look into writing docs for this but I'm not up to date with namespaces in socket.io;

• Could someone concisely explain to me the issue and proposed community solution in this thread?
• Are there any actionable points for changes to the code to facilitate the proposed solution, or will just documentation suffice?

[sucotronic]

@Helveg I think putting the code example as doc would do the trick.

[Helveg]

Ok, so then .of("namespace") should just be done on the client-side by creating a socket that connects to baseUrl + '/namespace' if I understand correctly?

[sucotronic]

@Helveg yep, it's something that's user configurable throught the socket options, as noted in https://github.com/rodgc/ngx-socket-io/issues/25#issuecomment-609040721 We can just put mention in the README something like "to use namespaces (link to https://socket.io/docs/v4/namespaces/#Client-initialization) just pass the namespace in the path like the following:".

[QuentinFarizon]

I used the solution from https://github.com/rodgc/ngx-socket-io/issues/25#issuecomment-479936465, here is the complete example

import { Socket } from 'ngx-socket-io'

export class ChatRoomPage implements OnInit {
  constructor () {
    this.chatSocket = new Socket({
      url: <my-server-url>,
      options: {
        path: '<my-socket-io-base-path>'
      }
    })
    this.chatSocket.ioSocket.nsp = '/chats'
  }

[PiotrSik]

Someone managed to use socket.of ({url: '', options: {}})?