2

我正在尝试使用角度 CLI 代理 websocket，但这不起作用。

这是我的代理配置 proxy.conf.json

   {
          "/stream/*": {
            "target": "ws://demos.kaazing.com/echo",
            "secure": false,
            "ws": true
          }
   }

我使用下一个参数运行服务器

"serve": {
  "port": 5000,
  "host": "0.0.0.0"
}

html代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Page Title</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>

<body>
    <h1>Hello, world!</h1>
    <script>
    var socket = new WebSocket("ws://localhost:5000/stream/");
    // var socket = new WebSocket("ws://demos.kaazing.com/echo");
    socket.onopen = function() {
        console.log("Соединение установлено.");
    };

    socket.onclose = function(event) {
        if (event.wasClean) {
            console.log('Соединение закрыто чисто');
        } else {
            console.log('Обрыв соединения'); // например, "убит" процесс сервера
        }
        console.log('Код: ' + event.code + ' причина: ' + event.reason);
    };

    socket.onmessage = function(event) {
        console.log("Получены данные " + event.data);
    };

    socket.onerror = function(error) {
        console.log("Ошибка " + error.message);
    };
    </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

我有错误

test.html:16 WebSocket connection to 'ws://localhost:5000/stream/' failed: Connection closed before receiving a handshake response

这个已关闭的问题：Angular CLI: Proxy websocket with proxy.conf.json对我没有帮助。

4

1 回答 1

0

我找到了答案。我在 proxy.conf.json 中添加了 pathRewrite 和 changeOrigin 参数。

{
  "/stream": {
    "target": "ws://demos.kaazing.com/echo",
    "secure": false,
    "ws": true,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/stream": ""
    }
  }
}
于 2018-05-03T13:32:17.633 回答