如何使用 Web 套接字和 Angular CLI 设置代理 [英] How to setup a proxy using web sockets and angular CLI
问题描述
我有一个使用 angular CLI 构建的简单网络应用程序.我希望它使用网络套接字与后端通信.我已经编写了后端,并且已经使用服务器可以在套接字上发送和接收的简单 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.
我启动了两个服务器.在浏览器中没有控制台错误.但是在 angular 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)
是否支持网络套接字或者我犯了一个愚蠢的错误?谢谢
Are web sockets supported or have I made a silly mistake? Thanks
推荐答案
我通过一些反复试验设法解决了这个问题.我查看了在后端项目中工作的基本 index.html 页面的控制台.这个后端项目基本上是 socket.io 网站上的聊天服务器演示应用程序.我注意到当它打开网络套接字时,网址如下所示:
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
所以回到 angular 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屋!