Socket.io

Socket.io enable real-time bidirectional event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.

Example

A complete example is available here.

Installation

Before using the Socket.io, we need to install the Socket.io module.

npm install --save socket.io @types/socket.io
1

Then add the following configuration in your ServerLoader:

import {ServerLoader, ServerSettings} from "@tsed/common";
import "@tsed/socketio"; // import socketio Ts.ED module

@ServerSettings({
  rootDir: __dirname,
  socketIO: {
    // ... see configuration
  }
})
export class Server extends ServerLoader {

}
1
2
3
4
5
6
7
8
9
10
11
12

Configuration

For more information see Socket.io documentation

Socket Service

Socket.IO allows you to “namespace” your sockets, which essentially means assigning different endpoints or paths. This is a useful feature to minimize the number of resources (TCP connections) and at the same time separate concerns within your application by introducing separation between communication channels. See namespace documentation.

All Socket service work under a namespace and you can create one Socket service per namespace.

Example:

import {IO, Nsp, Socket, SocketService, SocketSession} from "@tsed/socketio";
import * as SocketIO from "socket.io";

@SocketService("/my-namespace")
export class MySocketService {

  @Nsp nsp: SocketIO.Namespace;

  @Nsp("/my-other-namespace")
  nspOther: SocketIO.Namespace; // communication between two namespace


  constructor(@IO private io: SocketIO.Server) {
  }

  /**
   * Triggered the namespace is created
   */
  $onNamespaceInit(nsp: SocketIO.Namespace) {

  }

  /**
   * Triggered when a new client connects to the Namespace.
   */
  $onConnection(@Socket socket: SocketIO.Socket, @SocketSession session: SocketSession) {

  }

  /**
   * Triggered when a client disconnects from the Namespace.
   */
  $onDisconnect(@Socket socket: SocketIO.Socket) {

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

@@SocketService@@ inherit from @@Service@@ decorator. That means, a SocketService can be injected to another Service, Controller or Middleware.

Example:

import {Namespace, SocketService} from "@tsed/socketio";

@SocketService()
export class MySocketService {
  @Namespace nsp: Namespace;

  helloAll() {
    this.nsp.emit("hi", "everyone!");
  }
}
1
2
3
4
5
6
7
8
9
10

Then, you can inject your socket service into another Service, Controller, etc... as following:

import {Controller, Get} from "@tsed/common";
import {MySocketService} from "../services/MySocketService";

@Controller("/")
export class MyCtrl {

  constructor(private mySocketService: MySocketService) {

  }

  @Get("/allo")
  allo() {
    this.mySocketService.helloAll();

    return "is sent";
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Declaring an Input Event

@@Input@@ decorator declare a method as a new handler for a specific event.

import {Args, Input, Namespace, Socket, SocketService} from "@tsed/socketio";

@SocketService("/my-namespace")
export class MySocketService {
  @Input("eventName")
  myMethod(@Args(0) userName: string, @Socket socket: Socket, @Namespace nsp: Namespace) {
    console.log(userName);
  }
}
1
2
3
4
5
6
7
8
9

Send a response

You have a many choice to send a response to your client. Ts.ED offer some decorators to send a response:

socketio

Example:

import {Args, Emit, Input, Socket, SocketService} from "@tsed/socketio";

@SocketService("/my-namespace")
export class MySocketService {
  @Input("eventName")
  @Emit("responseEventName") // or Broadcast or BroadcastOthers
  async myMethod(@Args(0) userName: string, @Socket socket: Socket) {
    return "Message " + userName;
  }
}
1
2
3
4
5
6
7
8
9
10

The method accept a promise as returned value.

::: warning Return value is only possible when the method is decorated by @@Emit@@, @@Broadcast@@ and @@BroadcastOthers@@. :::

Socket Session

Ts.ED create a new session for each socket.

import {Args, Emit, Input, SocketService, SocketSession} from "@tsed/socketio";

@SocketService("/my-namespace")
export class MySocketService {
  @Input("eventName")
  @Emit("responseEventName") // or Broadcast or BroadcastOthers
  async myMethod(@Args(0) userName: string, @SocketSession session: SocketSession) {

    const user = session.get("user") || {};
    user.name = userName;

    session.set("user", user);

    return user;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Middlewares

A middleware can be also used on a @@SocketService@@ either on a class or on a method.

Here an example of a middleware:

import {ConverterService} from "@tsed/common";
import {Args, SocketMiddleware} from "@tsed/socketio";
import {User} from "../models/User";

@SocketMiddleware()
export class UserConverterSocketMiddleware {
  constructor(private converterService: ConverterService) {
  }

  async use(@Args() args: any[]) {

    let [user] = args;
    // update Arguments
    user = this.converterService.deserialize(user, User);

    return [user];
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

::: tip The user instance will be forwarded to the next middleware and to your decorated method. :::

You can also declare a middleware to handle an error with @@SocketMiddlewareError@@. Here an example:

import {Socket, SocketErr, SocketEventName, SocketMiddlewareError} from "@tsed/socketio";

@SocketMiddlewareError()
export class ErrorHandlerSocketMiddleware {
  async use(@SocketEventName eventName: string, @SocketErr err: any, @Socket socket: Socket) {
    console.error(err);
    socket.emit("error", {message: "An error has occured"});
  }
}
1
2
3
4
5
6
7
8
9

Two decorators are provided to attach your middleware on the right place:

Both decorators can be used as a class decorator or as a method decorator. The call sequences is the following for each event request:

Middlewares chain use the Promise to run it. If one of this middlewares/method emit an error, the first middleware error will be called.

import {SocketService, SocketUseAfter, SocketUseBefore, Emit, Input, Args} from "@tsed/socketio";
import {UserConverterSocketMiddleware, ErrorHandlerSocketMiddleware} from "../middlewares";
import {User} from "../models/User";

@SocketService("/my-namespace")
@SocketUseBefore(UserConverterSocketMiddleware) // global version
@SocketUseAfter(ErrorHandlerSocketMiddleware)
export class MySocketService {

  @Input("eventName")
  @Emit("responseEventName") // or Broadcast or BroadcastOthers
  @SocketUseBefore(UserConverterSocketMiddleware)
  @SocketUseAfter(ErrorHandlerSocketMiddleware)
  async myMethod(@Args(0) user: User) {

    console.log(user);

    return user;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Decorators