Я пытаюсь ускорить проксирование веб-сокетов. У меня есть код angular, который я изменил из учебника, который проверяет соединения веб-сокетов с echo.websocket.org. Код работает сам по себе.

<!DOCTYPE html>
<html>
   <meta charset = "utf-8" />
   <title>WebSocket Test</title>

   <script language = "javascript" type = "text/javascript">
      var wsUri = "ws://echo.websocket.org/";
      //var wsUri = "ws://localhost:8015"
      var output;
      var success = 0;
      var failure = 0;

      function init() {

        output = document.getElementById("output");
         output.innerHTML = "";
         testWebSocket();
         writeScore();

      }


      function testWebSocket() {
         websocket = new WebSocket(wsUri);

         websocket.onopen = function(evt) {
            onOpen(evt)
         };

         websocket.onclose = function(evt) {
            onClose(evt)
         };

         websocket.onmessage = function(evt) {
            onMessage(evt)
         };

         websocket.onerror = function(evt) {
            onError(evt)
         };
      }

      function onOpen(evt) {
         writeToScreen("CONNECTED");
         doSend("WebSocket rocks");
         success = success +1;
      }

     function onClose(evt) {
         writeToScreen("DISCONNECTED");
      }

      function onMessage(evt) {
         writeToScreen('<span style = "color: blue;">RESPONSE: ' + 
            evt.data+'</span>'); websocket.close();
      }

      function onError(evt) {
         writeToScreen('<span style = "color: red;">ERROR:</span> '
            + evt.data);
        failure = failure +1;
      } 

      function doSend(message) {
         writeToScreen("SENT: " + message); websocket.send(message);
      }

      function writeToScreen(message) {
         var pre = document.createElement("p"); 
         pre.style.wordWrap = "break-word"; 
         pre.innerHTML = message; 
         output.appendChild(pre);
      }

        function writeScore(){

        var pScore = document.createElement("p");
        pScore.style.wordWrap = "break-word";
        pScore.innerHTML = "Success   "+ success+ "   Failures   "+ failure;
        output.appendChild(pScore);

        }

      window.addEventListener("load", init, false);
   </script>

   <h2>WebSocket Test</h2>
   <div id = "output"></div>

</html>

Следуя инструкциям из https://github.com/nodejitsu/node-http- прокси # proxying-websockets

Я попытался настроить простой прокси двумя разными способами, которые будут перенаправлять запросы websocket страницы angular на одно и то же соединение echo.websocket.org, изменив переменную wsUri в коде angular, чтобы она указывала на один из серверов, созданных в этом коде.

///
// Setup our server to proxy standard HTTP requests
//

var httpProxy = require('http-proxy');
var http = require('http');

var proxy = new httpProxy.createProxyServer({
  target: {
    host: 'echo.websocket.org',
    port: 80
  }
});


var proxyServer = http.createServer(function (req, res) {
  proxy.web(req, res);
});

//
// Listen to the `upgrade` event and proxy the
// WebSocket requests as well.
//
proxyServer.on('upgrade', function (req, socket, head) {
        console.log(socket);
        proxy.ws(req, socket, head);
});


proxyServer.listen(8015);

var test = httpProxy.createServer({
  target: 'ws://echo.websocket.org',
  ws: true
});

test.listen(8014);

К сожалению, прокси-запрос (для обоих серверов, прослушивающих порт 8014 и 8015) запускает обработчик событий angular websocket.onerror, предоставляя мне менее чем полезное сообщение «undefined» для evt.data.

Обновить:

Chrome отображает следующее сообщение об ошибке в инструментах разработчика, когда я пытаюсь открыть веб-страницу с помощью прокси localhost.

index.htm: 29 Соединение WebSocket с 'ws: // localhost: 8015 /' не удалось: ошибка во время рукопожатия WebSocket: неожиданный код ответа: 404

Firefox отображает следующее в своей «Веб-консоли»

Firefox не может установить соединение с сервером по адресу ws: // localhost: 8015 /.

Однако событие обновления запускается, поскольку я вижу, что консоль узла отображает информацию о сокете из строки console.log () кода JS узла. Это наводит меня на мысль, что локальный сервер обнаружен, и возникает вопрос о происхождении ошибки 404. Я не уверен, связано ли это с поиском прокси (который запускает событие обновления http) или цели прокси.

Как мне заставить Node JS проксировать соединение angular websocket, которое отлично работает, когда между браузером и echo.websocket.org нет прокси?

2
Semicolons and Duct Tape 30 Май 2018 в 20:22

1 ответ

Лучший ответ

TL; DR; это связано с настройкой заголовка Host: foo.com перед пересылкой прокси-запроса.

По сути, Error during WebSocket handshake: Unexpected response code: 404 означает, что на самом деле не удалось установить какое-либо соединение с данным wsUri.

Как видно из этой проблемы , changeOrigin предлагается использовать по умолчанию в качестве true.

Однако в нашем случае это false (по умолчанию). Таким образом, перенаправленный запрос недействителен / имеет неправильный формат без правильной настройки заголовка HTTP Host. Вы можете попытаться отладить это дальше, чтобы увидеть настоящие HTTP-атрибуты, заголовки и т. д.

Также,

Атрибут autoRewrite перезаписывает хост / порт местоположения при перенаправлении (201/301/302/307/308) на основе запрошенного хоста / порта.

Попробуйте добавить свойства ниже в качестве аргументов createServer():

autoRewrite: true,
changeOrigin: true,

Итак, это становится:

const test = httpProxy.createServer({
  target: 'ws://echo.websocket.org',
  ws: true,
  autoRewrite: true,
  changeOrigin: true,
});

test.listen(8014);

Надеюсь, это поможет!

4
gokcand 1 Июн 2018 в 20:30