如何使用Web套接字和angular CLI设置代理 [英] How to setup a proxy using web sockets and angular CLI

问题描述

我有一个使用angular CLI构建的简单Web应用程序.我希望它使用Web套接字与后端通信.我已经编写了后端，并且已经使用服务器可以在套接字上发送和接收的简单index.html页面进行了测试.

I have a simple web app built using the angular CLI. I want it to communicate with a backend using web sockets. I have the backend already written and have tested with a simple index.html page that the server can send and receive on sockets.

在我的angular-cli项目中，我设置了一个代理配置文件以设置到后端的代理.

In my angular-cli project I have setup a proxy config file to setup a proxy to the backend.

proxy.conf.json

proxy.conf.json

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

然后使用以下命令启动服务器.

Then start the server with the following.

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

目前，我有一项服务，只是尝试打开一个套接字并发送一个固定的字符串，我希望该字符串被后端记录.

For now I have a service that simply attempts to open a socket and send a fixed string which I'm expecting to see logged by the backend.

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的/sock部分，我都可以这样做.

Note: I've had several go's at this with and without the /sock part of the url.

我同时启动两个服务器.在浏览器中没有任何控制台错误.但是在有角度的CLI Web Pack服务器中，我收到以下消息.

I start both servers. Get no console errors in the browser. But in the angular CLI web pack server I get the following messages.

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)

是否支持Web套接字，或者我犯了一个愚蠢的错误? 谢谢

Are web sockets supported or have I made a silly mistake? Thanks

推荐答案

我通过反复试验设法弄清了这一点.我在控制台中查看了可在后端项目中使用的基本index.html页面.这个后端项目基本上是socket.io网站上的聊天服务器演示应用程序.我注意到，当它打开Web套接字时，URL如下所示:

I managed to figure it out with a bit of trial and error. I looked at the console for the basic index.html page that works within the backend project. This backend project is basically the chat server demo application on the socket.io website. I noticed that when it opens up the web socket the url looks like the following:

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

因此，在有角度的CLI项目中，我修改了代理配置，使其包含/socket.io/部分，并且还添加了通配符.

So back in the angular CLI project I modified my proxy config to include the /socket.io/ part plus also added a wildcard.

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

宾果！现在，在构建服务时，它会打开套接字并发出一条消息，我可以在后端看到该消息.

Bingo! Now when the service is constructed it opens the socket and emits a message which I can see logged in the backend.

这篇关于如何使用Web套接字和angular CLI设置代理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！