2016-12-07 45 views
2

我有一個使用角度CLI構建的簡單Web應用程序。我希望它使用網絡套接字與後端進行通信。我已經編寫了後端,並使用服務器可以在套接字上發送和接收的簡單index.html頁面進行測試。如何使用Web套接字和角度CLI設置代理

在我的angular-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!'); 
    } 

} 

注意:我已經有幾次去這個網站的/ sock部分。

我啓動了兩臺服務器。在瀏覽器中無控制檯錯誤。但在角度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看起來如下:

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

所以早在角CLI項目我修改了我的代理配置爲包括/socket.io/部分加還增加了一個通配符。

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

賓果!現在,當構建服務時,它會打開套接字併發出一條消息,我可以在後端看到該消息。