ウェブソケットと角型CLIを使用してプロキシをセットアップする方法

Question

私は、角型CLIを使用して簡単なWebアプリケーションを構築しました。 Webソケットを使ってバックエンドと通信したい。私はバックエンドをすでに書いており、サーバーがソケットで送受信できる単純なindex.htmlページでテストしました。

私のangi-cliプロジェクトでは、バックエンドにプロキシを設定するためのプロキシ設定ファイルをセットアップしました。

proxy.conf.json

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

は、その後、次を使用してサーバーを起動します。今の

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

私は単純にソケットを開いて、私はバックエンドによって記録された参照してください期待してい固定文字列を送信しようとするサービスを提供しています。

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!'); 
    } 

} 

注：私はいくつかは、ととURLの/靴下部分なしで、この時の行く持っていました。

私は両方のサーバーを起動します。ブラウザにコンソールエラーは表示されません。しかし、角度のあるCLI Web Packサーバーでは、次のメッセージが表示されます。

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) 

ウェブソケットがサポートされているのですか、まともに間違っていますか？ ありがとう

Answer 1

私は少しの試行錯誤でそれを理解することができました。バックエンドプロジェクト内で動作する基本的なindex.htmlページのコンソールを見ました。このバックエンドプロジェクトは基本的にsocket.ioウェブサイト上のチャットサーバーデモアプリケーションです。私はそれがウェブソケットを開いたときのURLは以下のように見えることに気づいた：だから戻って、私は/socket.io/の一部が含まれるように、私のプロキシ設定を変更し、角CLIプロジェクトで

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

プラスもワイルドカードを追加しました。

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

ビンゴ！今サービスが構築されると、ソケットを開き、バックエンドに記録されたメッセージを出します。