4 Replies Latest reply on Aug 22, 2016 12:27 AM by arviio

    How to handle socketio in phonegap build?

    arviio Level 1

      Hello,

       

      I recently watched "Learn PhoneGap Build: The Basics" by Chris Griffith from Lynda. I want to convert my webapp into a mobile app using PhoneGap Build.

       

      I was only successful applying what I learned when it's just simple front-end stuff e.g Phonegap build + Framework7. However, when I try it on more complicated stuff I can't seem to make it work.

       

      Socket.io can't seem to trigger when the app is converted to an apk and installed in phone.

       

      arviio / tuts-socket-io-chat-app — Bitbucket

       

      I tried the advice here and many other approaches but can't seem to get it to work

      node.js - Connect to a socket.io server from phonegap - Stack Overflow

       

      Maybe someone here have done it already or knows how to..... Thank you so much.

        • 1. Re: How to handle socketio in phonegap build?
          Chris W. Griffith Adobe Community Professional

          Hope you enjoyed the course, a nice review is always helpful.

           

          With external communication stuff, you need to enable access elements.

           

          i have done some socket.io stuff in the past.

           

          Use the the chrome dev tools to see if there error being written to the console.

           

          Chris

          1 person found this helpful
          • 2. Re: How to handle socketio in phonegap build?
            kerrishotts Adobe Community Professional

            As Chris suggests, check your whitelist to ensure that it isn't blocking access. If you have a content-security-policy (CSP) meta tag, you should also add ws://your.server.com to it.

            1 person found this helpful
            • 3. Re: How to handle socketio in phonegap build?
              arviio Level 1

              Thank you kerrishotts for your advice. I was able to make it work after days of being stuck at this issue.

               

              Here's what I did, for others who'll find themselves in the same situation:

               

              1. On index.html, replace phonegap.js to cordova.js (chrome inspect device debug console  is looking for a cordova.js)

               

              2. Then, add a Content Security Policy tag (CSP) (replace as needed)

              <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' http://128.199.140.222:3000/ https://code.jquery.com/ 'unsafe-inline'; style-src 'self' https://maxcdn.bootstrapcdn.com/ 'unsafe-inline'; img-src *; font-src *;  connect-src *">

               

              - for some reason, 'self' seems to not recognize my HOST:PORT so I had to add the url specifically in order to solve socket.io CSP issue, io is not defined

              - connect-src ws://128.199.140.222:3000 is not working so I just use a wildcard *

               

              3. On config.xml, add whitelist plugin:

              Add <plugin name="cordova-plugin-whitelist" spec="~1.2.1" source="npm"/>

               

              4. On the server side, allow CORS

              var cors = require('cors');
              app.use(cors());

               

               

              I made the code available here: arviio / tuts-socket-io-chat-app  — Bitbucket

               

              P.S I know the connect-src wildcard is not a very good idea, I haven't found a way to make sockets work without using wildcard.

              • 4. Re: How to handle socketio in phonegap build?
                arviio Level 1

                Thank you, yes as a total beginner in hybrid mobile development, the course is gold! The debugging section was pretty helpful in trying to solve my phonegap + socketio issue.

                 

                Here are the issues I had:

                1. I had to replace phonegap.js with cordova.js as I'm receiving error in my console of it looking for a cordova.js

                2. I'm confused whether the id can be just anything or really a reverse of the domain? What if it's an IP and no domain yet... in the end I use random id e.g com.experiment.only

                3.

                 

                It would be great if there's also advanced phonegap course where it discusses external requests, sockets, plugins, end-to-end hybrid mobile application that is applicable to real world application.

                 

                Thank you for your time putting it altogether.