向套接字添加代理，以便稍后可以部署应用程序

Question

我在应用程序中实现了套接字，但我希望能够部署应用程序，并希望使用代理。

我正在使用React Js和websocket。

下面是我的App.js websocket实现：

import { w3cwebsocket as W3CWebSocket } from "websocket";

componentDidMount = () => {
        QueryHandler.setConfigurations([]);
        this._initialize();
        const client = new W3CWebSocket("ws://localhost:9000/ws-notification");
       client.onopen = () => {
           console.log("open"+client.readyState)
       }
       client.onclose = () => {
           console.log("closed")
       }
       client.onerror = (error) => {
           console.log(client.url+"clientReadyState"+client.readyState)
           console.log("error2222",error)
       }
       client.onmessage = (message) => {
           console.log(message.data)
       }
    }

这在本地运行得很好。但我希望是这样的：

const client = new W3CWebSocket("/ws-notification");

在我的" WebpackDevServer.config.js“中，我想添加websocket，例如这是我的WebpackDevServer.config.js文件：

'use strict';

const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const paths = require('./paths');
const fs = require('fs');

const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';

module.exports = function (proxy, allowedHost) {
    return {
        disableHostCheck:
            !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
        compress: true,
        clientLogLevel: 'none',
        contentBase: paths.appPublic,
        watchContentBase: true,
        hot: true,
        publicPath: '/',
        quiet: true,
        watchOptions: {
            ignored: ignoredFiles(paths.appSrc),
        },
        https: protocol === 'https',
        host,
        overlay: false,
        historyApiFallback: {
            disableDotRule: true,
        },
        public: allowedHost,
        proxy: {
            },
            "/login": {
                "target": "http://localhost:9001"
            },
            "/ws-notification": {
                "target": "ws://localhost:9000"
            }
        },
        before(app, server) {
            if (fs.existsSync(paths.proxySetup)) {
                require(paths.proxySetup)(app);
            }
            app.use(evalSourceMapMiddleware(server));
            app.use(errorOverlayMiddleware());
            app.use(noopServiceWorkerMiddleware());
        },
    };
};

但是这是不起作用的，我得到了错误：

通知:未能构造“”WebSocket“”：URL“”/ws-SyntaxError“”无效。“”

当我尝试使用nginx运行应用程序时，也会遇到同样的错误

这是我的nginx.conf文件：

worker_processes 1;

load_module modules/ngx_http_perl_module.so;

env PROMO_HOST;
env SECURITY_HOST;

events { worker_connections 1024; }

http {

    perl_set $promo_host 'sub { return $ENV{"PROMO_HOST"}; }';
    perl_set $security_host 'sub { return $ENV{"SECURITY_HOST"}; }';

    server {
        listen 80;
        server_name frontend.cognira.com;
        root   /usr/share/nginx/html;

        location / {
            try_files $uri $uri/ /index.html;
            include /etc/nginx/mime.types;
        }

        location /login {
            #When planning to deploy on kubernetes, uncomment the next line and comment the following line
            #resolver kube-dns.kube-system.svc.cluster.local;
            resolver 127.0.0.11;
            proxy_pass http://${security_host}:9001;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_read_timeout 2m;
            proxy_connect_timeout 2m;
            proxy_redirect off;
        }

        location /ws-notification {
            #When planning to deploy on kubernetes, uncomment the next line and comment the following line
            #resolver kube-dns.kube-system.svc.cluster.local;
            resolver 127.0.0.11;
            proxy_pass http://${promo_host}:9000/ws-notification;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }
}

Answer 1

对于webSocket

location /notifications {
    #When planning to deploy on kubernetes, uncomment the next line and comment the following line
    #resolver kube-dns.kube-system.svc.cluster.local;
    resolver 127.0.0.11;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://${promo_host}:9000/notifications;
    proxy_redirect off;
    proxy_read_timeout 86400;
    # enables WS support
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    # prevents 502 bad gateway error
    proxy_buffers 8 32k;
    proxy_buffer_size 64k;
    reset_timedout_connection on;
    error_log /var/log/nginx/oro_wss_error.log;
    access_log /var/log/nginx/oro_wss_access.log;
}