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 plugin add {{3但是没有成功。如何在离子应用程序中使用带有andorid目标的websockets？

Answer 1

好的，所以，我最终为我工作，使用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设备上它给了我这个错误...我无法评论关于问题，没有足够的声誉，所以我很遗憾在答案中提出另一个问题...但是，我能以某种方式修复这个“访问控制......”的事情吗？

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

Answer 2

在浏览器中使用它的最可能的原因是您的服务器和浏览器位于同一主机上。尝试通过浏览器从其他主机使用该服务。你会得到同样的错误。您需要允许服务器端的Headers修复“Access-Control ...”事物

Answer 3

由于安全原因，Android禁止通过套接字发送纯文本。如果您使用chrome：// inspect调试代码，则会看到它引发ERR_CLEARTEXT_NOT_PERMITTED错误。您可以建立与SSL的连接或告诉android允许明文流量。为此，请在下面的摘要中写入... resources \ android \ xml \ network_security_config.xml文件。（192.168.1.3和192.168.2.3是套接字服务器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>

Android上的Ionic和WebSocket

3 个答案: