如何使用 Web 套接字和 Angular CLI 设置代理

Posted 2023-03-07

【中文标题】如何使用 Web 套接字和 Angular CLI 设置代理

【英文标题】：How to setup a proxy using web sockets and angular CLI

【发布时间】：2017-04-21 18:55:39

【问题描述】：

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

在我的 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 部分的 url。

我启动两台服务器。在浏览器中没有控制台错误。但在 angular 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)

是否支持网络套接字或者我犯了一个愚蠢的错误？ 谢谢

【参考方案1】：

我设法通过一些试验和错误来解决这个问题。我查看了后台项目中工作的基本 index.html 页面的控制台。这个后端项目基本上是 socket.io 网站上的聊天服务器演示应用程序。我注意到当它打开网络套接字时，网址如下所示：

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

所以回到 angular CLI 项目中，我修改了我的代理配置以包含 /socket.io/ 部分，还添加了一个通配符。

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

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

【讨论】：

这太棒了，就我而言，我使用的是 NestJS，默认实现需要我执行以下操作。 "/socket.io/*": "target": "http://localhost:3333/socket.io", "ws": true