WebSocket代理与Node.js和Angular出现错误,意外的响应代码:404应该怎么解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (404)

试图加快代理websocket的速度。有一些angular代码,修改了一个教程,测试web.ocket连接到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>

试图设置一个简单的代理2种不同的方式,通过改变Angular中的wsUri变量来指向这个代码中创建的服务器之一,将Angular页面的websocket请求转发到相同的echo.websocket.org连接。

///
// 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事件处理程序,为evt.data提供了一个不明确的未定义消息。

Chrome尝试使用本地主机代理打开网页时,Chrome在开发人员工具中显示以下错误消息。

index.htm:29 WebSocket connection to 'ws://localhost:8015/' failed: Error during WebSocket handshake: Unexpected response code: 404

Firefox在其“Web控制台”中显示以下内容

Firefox can’t establish a connection to the server at ws://localhost:8015/.

升级事件正在触发,因为我看到Node的控制台显示来自Node JS代码的console.log()行的套接字信息。使我相信本地主机服务器正在被找到,乞求404错误的起源的问题。不确定它是否与代理(它正在触发它的http升级事件)或代理的目标相关。

如何获取Node JS来代理角色websocket连接,在浏览器和echo.websocket.org之间没有代理的情况下工作正常?

提问于
用户回答回答于

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);

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问5 回答
  • 无聊至极

    4 粉丝504 提问5 回答
  • 嗨喽你好

    7 粉丝480 提问4 回答
  • Richel

    8 粉丝0 提问3 回答

扫码关注云+社区

领取腾讯云代金券