Android 上的 Ionic 和 WebSocket

Question

我有一个在端口 3000 上运行的流星应用程序。
然后我有一个为简单客户端提供服务的离子应用程序。
我想在离子应用程序中查看流星应用程序中的数据。
我创建了一个服务：

(function () {
angular.module('myApp').factory('myApi', ['$q', '$rootScope', myApi]);
function myApi($q, $rootScope) {
    var options = {
        endpoint: "ws://localhost:3000/websocket",
        SocketConstructor: WebSocket
    };
    var ddp = new DDP(options);
    ddp.on("connected", function () {
        console.log("Connected");
        ddp.sub("allHistory");
    });

    function on(callback) {
        ddp.on("added", function (data) {
            console.log("on added", data.fields.value);
            var item = { value: data.fields.value, date: data.fields.date };
            callback(item);
        });
    };
    return {
        on: on,
    };
}
})();

控制器：

angular.module('myApp').controller('MyController',
function EventController($scope, myApi) {
   myApi.on(function (data) {
        $scope.history.push(data);
    });
    $scope.history = [];
}
);

一个视图：

 <div ng-controller="MyController" style="padding-left:20px; padding-right:20px">
    <ul class="thumbnails">
        <li ng-repeat="item in history">
            <div class="row span9">
               <span>Date: {{item.date}}</span>
               <span>Value: {{item.value}}</span>
            </div>
        </li>
    </ul>
</div>

一切都使用 Web 客户端运行：我可以在运行命令 ionic serve 的 Web 客户端上从流星应用程序（使用带有 ddp.js 实现的 DDP 协议）获取数据。
当我尝试 ionic emulate android 时，我看不到 AVD 中的数据，并且在 LogCat 面板中出现“ReferenceError：未定义 WebSocket”。
我尝试安装“cordova 插件添加 https://github.com/knowledgecode/WebSocket-for-Android.git”但没有成功。如何在具有 andorid 目标的 ionic 应用程序中使用 websocket？

Answer 1

出于安全原因，Android 阻止通过套接字发送纯文本。如果您使用 chrome://inspect 调试代码，您会看到它会引发 ERR_CLEARTEXT_NOT_PERMITTED 错误。您可以建立与 SSL 的连接或告诉 android 允许明文流量。为此，请在声明下方写入 ...resources\android\xml\network_security_config.xml 文件。 （192.168.1.3和192.168.2.3是socket服务器ip）

    <?xml version="1.0" encoding="utf-8"?>
    <network-security-config>
        <domain-config cleartextTrafficPermitted="true">
            <domain includeSubdomains="true">localhost</domain>
            <domain includeSubdomains="true">192.168.1.3</domain>
            <domain includeSubdomains="true">192.168.2.3</domain>
        </domain-config>
    </network-security-config>

Answer 2

在浏览器中工作的最可能原因是您的服务器和浏览器位于同一主机上。尝试通过浏览器使用来自不同主机的服务。你会得到同样的错误。 您需要允许服务器端的标头修复“访问控制...”的东西

Answer 3

好的，所以，我终于让它为我工作了，使用SockJS，它需要安装在服务器和客户端上，而不是使用这个代码：

var options = {
    endpoint: "ws://localhost:3000/websocket",
    SocketConstructor: WebSocket
};
var ddp = new DDP(options);
ddp.on("connected", function () {
    console.log("Connected");
});

我使用了这个代码：

  var options = {
      endpoint: "https://localhost:3000/echo", // echo is the prefix i set on server-side
      SocketConstructor: SockJS
  };
  var ddp = new DDP(options);
  ddp.on("connected", function () {
      console.log("Connected");
  });

所以，现在它连接了。但是当我将它部署到移动设备时，我现在得到一个“Access-Control-Allow-Origin”未设置的东西，在浏览器上它工作得很好，但在Android设备上它给了我这个错误......我无法评论关于问题，还没有足够的声誉，所以我很抱歉在回答中提出另一个问题......但是有什么办法可以解决这个“访问控制......”的事情吗？

谢谢你，我希望我能以某种方式帮助。