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

    How to handle socketio in phonegap build?

    arviio Level 1



      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.



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

            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' 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:// 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');



              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



                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.