Actualmente estoy creando una aplicación en angular. El módulo en el que estoy trabajando le permite unirse o crear una sala.
La interfaz de usuario inicial del módulo de sala: https://gyazo.com/81afe2b5f7119326d00b518fc4e0979f
al hacer clic en el botón "unirse a la sala", accedemos a la interfaz de usuario: https://gyazo.com/0728a182b27a143fcefd9d71d0c33c44
una vez que hago clic en el botón Unirse, aparece un error de:
ERROR DOMException: se intentó usar un objeto que no se puede usar o ya no se puede usar
Sin embargo, una vez que hago clic en el botón Unirse por segunda vez, puedo conectarme al servidor websocket y no tengo problemas.
Creo que tiene algo que ver con el uso de *ngIf y el dom no se carga correctamente, el código principal para el HTML es:
<button *ngIf="isEnterRoomShown" id="createRoomBtn" mat-raised-button (click)="createRoom()">Create Room</button> <button *ngIf="isEnterRoomShown" id="joinSessionBtn" mat-raised-button (click)="joinRoom()">Join room</button> <div [hidden]="isEnterRoomShown"> <button id="join" mat-raised-button (click)="join()">Join</button> </div>y el componente:
createRoom() { const name = this.nameInput.nativeElement.value; this.websocket = this.wsService.initWebsocket(); const wsData = { message: "create-room", name, }; this.rService.username = name; if (this.websocket.readyState === 0) { } this.waitForSocketConnection(this.websocket, () => { this.websocket.send(JSON.stringify(wsData)); }); } joinRoom() { this.isEnterRoomShown = !this.isEnterRoomShown; } join() { if (!this.websocket) { this.websocket = this.wsService.initWebsocket(); } const name = this.nameInput.nativeElement.value; this.rService.username = name; if (this.websocket) { this.websocket.send( JSON.stringify({ message: "join-room", name, id: this.roomId.nativeElement.value, }) ); } this.outRoom = false; this.sessionId = this.roomId.nativeElement.value; }Todavía soy bastante nuevo en stackoverflow y desarrollo angular, avíseme si necesita más aclaraciones sobre algo. He intentado buscar preguntas similares en stackoverflow y no he encontrado respuestas.
Parece que tu código
this.outRoom = false; this.sessionId = this.roomId.nativeElement.value;se ejecuta incluso si su comando "websocket.send" no finaliza porque es asíncrono. No sé cómo hacer esto, pero deberías agregar algo como esto:
if (this.websocket) { this.websocket.send( JSON.stringify({ message: "join-room", name, id: this.roomId.nativeElement.value, }) ).then(() => { this.outRoom = false; this.sessionId = this.roomId.nativeElement.value; }); }Cuando usa ngIf, crea y destruye elementos HTML DOM. Entonces, en este caso, en lugar de usar ngIf, use una directiva oculta
[hidden]="!isEnterRoomShown"
Esto debería evitar que el nodo se destruya.