2016-12-07 1 views
2

각진 CLI를 사용하여 간단한 웹 응용 프로그램을 만들었습니다. 웹 소켓을 사용하여 백엔드와 통신하고 싶습니다. 백엔드가 이미 작성되었으며 서버가 소켓에서 보내고받을 수있는 간단한 index.html 페이지로 테스트했습니다.웹 소켓 및 각진 CLI를 사용하여 프록시를 설정하는 방법

내 각형 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 웹 팩 서버에서 다음 메시지가 표시됩니다.

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) 

웹 소켓이 지원되거나 바보 같은 실수를 저 지르지 않았습니까? 감사합니다.

답변

2

나는 약간의 시행 착오로 그것을 알아낼 수있었습니다. 백엔드 프로젝트에서 작동하는 기본 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" 
    } 
} 

빙고! 이제 서비스가 구성되면 소켓을 열고 백엔드에 로그인 한 메시지를 내 보냅니다.

관련 문제