Discussion :

[DimKlen]

Bonjour,
J'ai de multiples connexions pour un même utilisateur alors que je devrais en avoir qu'une.
J'ai un serveur node js qui utilise les socket io :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
const express = require('express')
const app = express();
const path = require('path');
 
const http = require('http');
const server = http.Server(app);
 
const socketIO = require('socket.io');
const io = socketIO(server);
 
const port = process.env.PORT || 3000;
 
app.use(express.static(path.join('D:/Did/socketDid/dist/socketDid')));
 
app.get('/', function(req,res) {
	res.sendFile('D:/Did/socketDid/src/index.html');
})
 
io.on('connection', (socket) => {
    console.log('user connected');
    socket.on('disconnect',() => {
    	console.log('user disconnected');
    })
 
server.listen(port, () => {
    console.log(`started on port: ${port}`);
});

J'ai créée un webSocketService dans mon projet angular :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
import { Injectable } from '@angular/core';
import { Observable, Subscriber } from 'rxjs';
import * as io from 'socket.io-client';
 
@Injectable({
  providedIn: 'root'
})
export class WebSocketServiceService {
 
  socket: any;
 
  constructor() { 
    if(null == this.socket) {
      this.socket = io();
    }
  }
 
  listen(eventName: string) {
    return new Observable((Subscriber) => {
      this.socket.on(eventName, (data) => {
        Subscriber.next(data);
      })
    });
  }
 
  emit(eventName: string, data: any) {
    this.socket.emit(eventName,data);
  }
}

et je l'ai rajouté dans le app.module

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

providers: [WebSocketServiceService],

Dans chacun de mes components, je dois utiliser ce service pour utiliser la socket. Voici comment je déclare le service dans un component :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 
@Component({
  selector: 'app-connection-login',
  templateUrl: './connection-login.component.html',
  styleUrls: ['./connection-login.component.css'],
  providers: [WebSocketServiceService]
})
export class ConnectionLoginComponent implements OnInit {
  constructor(private webSocketService: WebSocketServiceService, private router: Router) { }
.....

Le problème est que pour chaque déclaration de ce service dans un component, j'ai une connexion supplémentaire... (je n'ai qu'une fenêtre d'ouverte) et je voudrais éviter ça.
Comment faire pour partager la même socket pour un client donné ?

[dukoid]

Quand tu déclares un service au niveau des composants comme tu l'as fait ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
@Component({
  selector: 'app-connection-login',
  templateUrl: './connection-login.component.html',
  styleUrls: ['./connection-login.component.css'],
  providers: [WebSocketServiceService]
})
export class ConnectionLoginComponent implements OnInit {

la classe WebSocketServiceService est instancié uniquement pour ce composant.
donc pour tous les composants, tu auras à chaque fois une nouvelle instance

Angular propose de déclarer un service au niveau d'un module.
la solution la plus simple est de mettre le service dans providers du module racine: app.module.ts
ainsi ce service sera instancié qu'une seule fois au niveau le plus haut et sera injecté dans tous les composants (DI - injection dépendance) qui le demande (présent dans le constructeur des composants)
(et bien sur, supprimer ce service de tous les providers des composants)


la meilleure pratique serai de paramétrer plus finement en créant un module qui regroupe les composants en question et ce module intégrera le service dans le providers
(au lieu de l’intégrer au plus au niveau, après tout, peut être que tous les composants du projet n'ont pas besoin du service webSocket mais bon c'est du détail....)

[DimKlen]

Merci c'était si simple