Wie man einen Proxy mit Web-Sockets und angular CLI

Question

einrichten Ich habe eine einfache Web-App mit dem angularen CLI gebaut. Ich möchte, dass es über Web-Sockets mit einem Backend kommuniziert. Ich habe das Backend bereits geschrieben und habe mit einer einfachen index.html Seite getestet, die der Server an Sockets senden und empfangen kann.

In meinem angular-cli-Projekt habe ich eine Proxy-Konfigurationsdatei eingerichtet, um einen Proxy für das Backend einzurichten.

proxy.conf.json

{ 
    "/sock": { 
    "target": "http://localhost:3000", 
    "changeOrigin": true, 
    "ws": true, 
    "logLevel": "debug" 
    } 
} 

Dann den Server mit dem folgenden starten.

ng serve --proxy-config proxy.conf.json 

Für jetzt habe ich einen Dienst, der einfach versucht, eine Steckdose zu öffnen und eine feste Zeichenfolge senden, die ich erwarte vom Backend angemeldet zu sehen.

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

@Injectable() 
export class ChatService { 

    private socket: any; 

    constructor() { 
    this.socket = io({ 'path': '/sock' }); 
    this.socket.emit('chat message', 'Hello World from browser!'); 
    } 

} 

Hinweis: Ich habe mehrere mit diesem und ohne den/sock Teil der URL gehabt.

Ich starte beide Server. Erhalte keine Konsolenfehler im Browser. Aber im eckigen CLI Web Pack Server bekomme ich folgende Meldungen.

10% building modules 2/2 modules 0 active[HPM] Proxy created: /sock -> http://localhost:3000 
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ] 

[HPM] GET /sockjs-node/530/z1z3teld/websocket -> http://localhost:3000 
[HPM] Upgrading to WebSocket 
[HPM] Error occurred while trying to proxy request /sockjs-node/530/z1z3teld/websocket from localhost:4200 to http://localhost:3000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) 

Werden Web Sockets unterstützt oder habe ich einen dummen Fehler gemacht? Danke

Answer 1

Ich schaffte es, es mit ein bisschen Versuch und Irrtum herauszufinden. Ich schaute auf die Konsole für die grundlegende index.html Seite, die innerhalb des Backend-Projekts funktioniert. Dieses Backend-Projekt ist im Grunde die Chat-Server-Demo-Anwendung auf der Website von socket.io. Ich bemerkte, dass, wenn sie die Web-Socket öffnet sieht die URL wie folgt aus:

http://localhost:3000/socket.io/EIO=3&transport=websocket&sid=wTvdQTclHXJSUmAmAAAA 

Also zurück in die Winkel CLI Projekt, das ich meine Proxy-Konfiguration geändert, um den /socket.io/ Teil aufzunehmen und fügte auch einen Platzhalter .

{ 
    "/sock/*": { 
    "target": "http://localhost:3000/socket.io/", 
    "ws": true, 
    "logLevel": "debug" 
    } 
} 

Bingo! Jetzt, wenn der Dienst aufgebaut ist, öffnet er den Socket und gibt eine Nachricht aus, die ich im Backend protokolliert sehe.