requestPhoneVerification() API function on Android emulator

[metecantimur]

I tried to run the application on Android emulator (Nexus_5X, API 23) however, Accounts.requestPhoneVerification() API function did not give any response. Furthermore, the same API function works on iOS emulator as expected. Should I enable any configuration option on Android emulator?

[metecantimur]

Is there anybody who has the same problem on Android emulator?

[metecantimur]

I have tried to get DDP log messages as follows:

14    542956   log      requestPhoneVerification(phone: +16475638899)
15    543233   log      DDP send: , {"msg":"method","method":"requestPhoneVerification","params":["+16475638899"],"id":"3"}
53    839032   log      DDP send: , {"msg":"pong"}
54    839033   log      DDP receive: , {"msg":"ping"}
55    868961   log      DDP send: , {"msg":"ping"}
56    868962   log      DDP receive: , {"msg":"pong"}

According to the log messages, it seems that PING & PONG messages are sent between the Android emulator(client) and the server side. However, when it comes to send an RPC message requestPhoneVerification then no response is received from the server side.

What would be the cause of this problem? Any ideas?

[dotansimha]

Which emulator did you try? Also, did you test it in the browser / ios simulator?

[metecantimur]

Hi, I am using the following Android emulator on OS X El Capitan Version 10.11.6.

ANDROID EMULATOR TEST

I have inserted the following debug code into app.components.ts file:

            let _send = Meteor.connection._send;
            Meteor.connection._send = function (obj) {
                console.log('DDP send: ', JSON.stringify(obj));
                _send.call(this, obj);
            }

            // log received messages
            Meteor.connection._stream.on('message', function (message) {
                console.log("DDP receive: ", message);
            });

First I ran the server (Meteor) side on an independent console CLI as follows:

npm start

Then I run the code with the following CLI command:

ionic run android -lc

Then I see the following log on the console:

0     343698   log      DEVICE READY FIRED AFTER, 337, ms
1     364519   log      DDP send: , {"msg":"method","method":"requestPhoneVerification","params":["+16475556677"],"id":"1"}

Please notice that there exist no log lines which indicate any PING & PONG handshaking messages in between.

IOS EMULATOR TEST

I have also tried tor run the code on iOS emulator and browser; where I saw that on both platforms it works without any problems.

Let me show you the logs when I run the code on iOS emulator. I simply run the following CLI command:

ionic run ios -lc

After clicking the YES button I saw the following log lines on the console:

0     246674   log      DEVICE READY FIRED AFTER, 185, ms
1     246684   log      DDP send: , {"msg":"connect","version":"1","support":["1","pre2","pre1"]}
2     246685   log      DDP send: , {"msg":"sub","id":"pn3T3yJGFCyY7Cnxk","name":"meteor.loginServiceConfiguration","params":[]}
3     246686   log      DDP receive: , {"server_id":"0"}
4     246688   log      DDP receive: , {"msg":"connected","session":"E7vtwFpDr9C8eGTGJ"}
5     246690   log      DDP receive: , {"msg":"ready","subs":["pn3T3yJGFCyY7Cnxk"]}
6     276694   log      DDP send: , {"msg":"pong"}
7     276695   log      DDP receive: , {"msg":"ping"}
8     299193   log      DDP send: , {"msg":"ping"}
9     299195   log      DDP receive: , {"msg":"pong"}
10    321697   log      DDP send: , {"msg":"pong"}
11    321698   log      DDP receive: , {"msg":"ping"}
12    351692   log      DDP send: , {"msg":"ping"}
13    351694   log      DDP receive: , {"msg":"pong"}
14    366706   log      DDP send: , {"msg":"pong"}
15    366707   log      DDP receive: , {"msg":"ping"}
16    369610   log      DDP send: , {"msg":"method","method":"requestPhoneVerification","params":["+16475556677"],"id":"1"}
17    369629   log      DDP receive: , {"msg":"updated","methods":["1"]}
18    369631   log      DDP receive: , {"msg":"result","id":"1"}

BROWSER TEST

On the browser I ran the following CLI:

ionic serve

Then the logs are seen as follows:

RESULT

1. DDP protocol between Android Emulator and the Server does not work at all
2. I have examined the ethernet level logs on localhost TCP port 3000 using the tool WireShark and I noticed that WebSocket link was not established on the port when I was running the Android Emulator. In contrast, I saw the ethernet level logs indicating that a WebSocket link was established when running on other platforms.

[metecantimur]

Any comments?

[DAB0mB]

@metecantimur If you will run the project on a typical mobile device, you might encounter some complications regarding server communication, and the reason is simple. The localhost of your device is not the same your server's localhost. It depends how the emulator virtualizes the device's OS but it seems as if the OSx emulator does a better job. I would have tried connecting to server's IP address explicitly, not through localhost.

First make sure that port forwarding is enabled. Then, set the following variable to the desired value before meteor-client-side is loaded:

__meteor_runtime_config__ = {
  // Your server's IP address goes here
  DDP_DEFAULT_CONNECTION_URL: "http://12.50.68.29:3000"
};

Note that this might get a bit tricky when dealing with Webpack due to its encapsulation system.

More information can be found here: https://github.com/idanwe/meteor-client-side Please confirm the solution :-)

[metecantimur]

@DAB0mB Thank you for your reply. I am using the wifi interface on my development environment (MAC computer) with the IP address 192.168.0.100

Accordingly, I have inserted the following code into main.dev.ts file as follows:

import 'reflect-metadata';
import 'meteor-client-side';
import 'accounts-base-client-side';
import 'accounts-phone';

import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
import { MeteorObservable } from 'meteor-rxjs';

declare let Meteor, __meteor_runtime_config__;

__meteor_runtime_config__ = {
  // Your server's IP address goes here
  DDP_DEFAULT_CONNECTION_URL: "http://192.168.0.100:3000"
};

Meteor.startup(() => {
  console.log(`Meteor startup()`);

  let _send = Meteor.connection._send;
  Meteor.connection._send = function (obj) {
      console.log('DDP send: ', JSON.stringify(obj));
      _send.call(this, obj);
  }

  // log received messages
  Meteor.connection._stream.on('message', function (message) {
      console.log("DDP receive: ", message);
  });

  const sub = MeteorObservable.autorun().subscribe(() => {
    if (Meteor.loggingIn()) return;

    setTimeout(() => {
      sub.unsubscribe();
    });

    enableProdMode();
    platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
  });
});

However, nothing has changed on Android Emulator while on iOS emulator everything is okay as usual.

I am afraid; I have not fully understood what did you mean by

port forwarding

in your reply. I have tried to telnet into the Android emulator and used redir command but unfortunately, it did not work.

Could you please give me a solid example of how to make port forwarding?

[DAB0mB]

@metecantimur You didn't do it right because as I said the configuration needs to be defined on the window before meteor-client-side is imported. And even if you write something like this:

window.__meteor_runtime_config__ = {
  // Your server's IP address goes here
  DDP_DEFAULT_CONNECTION_URL: "http://192.168.0.100:3000"
};

import 'meteor-client-side';

Is not good enough because once it's transpiled it will actually look something like this:

(function() {
require('meteor-client-side');

window.__meteor_runtime_config__ = {
  // Your server's IP address goes here
  DDP_DEFAULT_CONNECTION_URL: "http://192.168.0.100:3000"
};
}).call({})

You need to config webpack correctly (Not yet sure how) inorder for it to work properly. I will try to find the time to do it myself asap but until then I'm just providing you with the solution. We will stay in contact in case one of us fixes it :-)

[metecantimur]

@DAB0mB You are right. Placing the following code in the head section of index.html file solved the problem; nothing else is needed 👍

<script>
    (function() {
      __meteor_runtime_config__ = {
        // Your server's IP address goes here
        DDP_DEFAULT_CONNECTION_URL: "http://192.168.0.100:3000"
      };
    })();
</script>

[DAB0mB]

@metecantimur Great! Yea I assumed this was the cause for the issue... However, adding a <script /> tag seems like a workaround, I'd rather use the bundling system instead. I will leave this issue open for now, until I update the tutorial accordingly, so it will never happen to anyone again.

[metecantimur]

@DAB0mB, this issue has been closed but I think the tutorials have not been updated accordingly.

[DAB0mB]

@metecantimur We're about to release a new tutorial very soon,with updated instructions and some extra features, and we already took care of this issue in specific. Stay tuned ;-)

[pkitatta]

Hi, in the new tutorial using the meteor-client.config.json with

{
  "runtime": {
    "DDP_DEFAULT_CONNECTION_URL": "http://192.168.8.100:3000"
  },
  "import": [

  ]
}

and adding "meteor-client:bundle": "meteor-client bundle -s api -c meteor-client.config.json" to the package.json file doesn't help the situation.

The app works well in the browser but gives this error: GET http://localhost:3000/sockjs/info?cb=l8rjuale0e net::ERR_CONNECTION_REFUSED as fore-warned in step 11 of the tutorial.

I have even tried the solutions above i.e adding

script>
    (function() {
      __meteor_runtime_config__ = {
        // Your server's IP address goes here
        DDP_DEFAULT_CONNECTION_URL: "http://192.168.0.100:3000"
      };
    })();
</script>

to my src/index.html and www/index.html but nothing has worked.

Do you have any other ideas? @DAB0mB

https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp/issues/114