Should I use channels or a regular JSON web endpoint for my react native app?

yukster · May 10, 2019, 3:58pm

Changed the socket url to my laptop’s IP (192.168.0.3), but I still don’t get data and the Phoenix app logs:

[info] ['TLS', 32, 'server', 58, 32, 73, 110, 32, 115, 116, 97, 116, 101, 32, 'certify', 32, 'received CLIENT ALERT: Fatal - Certificate Unknown', 10]

Are you using a self-signed cert and if so, did you have to load it onto your Android emulator?

outlog · May 10, 2019, 4:13pm

try ws:// and 192.168.0.3 - used to work… but havent emu’ed on android 9 yet…

yukster · May 10, 2019, 4:22pm

HOLY STUPID RABBIT HOLE! It works via the INSECURE websocket with the 192 address! The whole “Android 9 doesn’t allow insecure network” and “you have to install a network_security_config.xml” were total wild goose chases. Argh!

Thank you so much @outlog! Valuable lesson learned.

yukster · May 20, 2019, 4:01pm

@outlog have you had trouble with errors in phoenix.js when running in RN? I discovered this morning that my app blows up when I run it without the debugger! The error is c.addEventListener is not a function. (In 'c.addEventListener("beforeunload", ...) and the only occurrence of “beforeunload” I can find is here:

github.com

phoenixframework/phoenix/blob/master/assets/js/phoenix.js#L744


this.defaultDecoder       = Serializer.decode
this.closeWasClean        = false
this.unloaded             = false
this.binaryType           = opts.binaryType || "arraybuffer"
if(this.transport !== LongPoll){
  this.encode = opts.encode || this.defaultEncoder
  this.decode = opts.decode || this.defaultDecoder
} else {
  this.encode = this.defaultEncoder
  this.decode = this.defaultDecoder
}
if(phxWindow && phxWindow.addEventListener){
  phxWindow.addEventListener("beforeunload", e => {
    if(this.conn){
      this.unloaded = true
      this.abnormalClose("unloaded")
    }
  })
}
this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 30000
this.rejoinAfterMs = (tries) => {

Looking at the the minimized version of that code in my app’s node_modules, it looks like the logic matches:

l&&l.addEventListener&&l.addEventListener("beforeunload",function(e){n.conn&&(n.unloaded=!0,n.abnormalClose("unloaded"))})

This looks like it should correctly not try to invoke addEventListener if it’s not defined, but apparently it is. I can keep developing with the debugger, but it makes me nervous that I’m going down the wrong path, trying to use phoenix.js in a React Native app. Sounds like it works fine for you though?

yukster · May 20, 2019, 4:15pm

Bah, I think I know what’s wrong. I am using the use-phoenix-channel library I mentioned earlier and it is pulling in an older version of phoenix.js that is not correctly guarding on that line. I have a fork of it so I’ll fix it there. Sorry for the noise.