- « Custom URL schemes in PhoneGap
- What is a Polyfill? »
WebSockets in PhoneGap Projects
I’m a big fan of the WebSockets API for all the real-time goodness it offers, but the iOS platform doesn’t (currently) bake the WebSockets API in to mobile Safari. That sucks, particularly because I can enjoy making iOS native apps using awesome frameworks like PhoneGap. However, because I’m using PhoneGap, I can create a PhoneGap plugin that introduces WebSockets to my HTML & JavaScript. So that’s what I did.
Installation
I’m assuming you’ve got your PhoneGap project and XCode to manage and build the project. These instructions are going to explain how to get WebSockets working in your project.
Step 1: Cocoa Async Socket
Download and include AsyncSocket.h/.m from the cocoaasyncsocket project in your project directory (or some subdirectory, as you please).
Next, drag these files (AsyncSocket.h/.m) in to the XCode project space – this will include the files properly when the project is built.
Step 2: PhoneGap Plugin: WebSocket
Now download (or fork) the PhoneGap-Plugin-WebSocket project. Now repeat the process you did with the Async project with the WebSocketCommand.h/.m files.
Next, copy websocket.js in to your www directory and include the following after you include phonegap.js:
<script src="/img/spacer.gif"> Note: you can also release your project to the web and include the websocket.js script, because it will only introduce WebSockets if a) WebSockets aren’t already available, and b) only if PhoneGap is in place.
So now you’re read to rock and roll with native WebSocket support in your PhoneGap project.
Usage
Once you’ve followed the installation, usage is exactly the same as using a WebSocket normally:
var ws = new WebSocket('ws://example.com');
ws.onmessage = function () {
alert('a message was recieved');
};
ws.onopen = function () {
ws.send('I just connected!');
};
One small caveat, if you need the WebSocket straight away, you will need to wait until the deviceready event fires, but otherwise you can just create the socket on demand.
If you want to learn more about PhoneGap, my conference Full Frontal, is running a full day workshop with Brian LeRoux entirely on PhoneGap, so check it out!
You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)
8 Responses to “WebSockets in PhoneGap Projects”
-
Comet Daily » Blog Archive » WebSockets in PhoneGap Projects
October 4th, 2010 at 2:34 pm
[...] currently include the WebSockets API in mobile Safari. Remy Sharp solved this limitation by creating a WebSockets PhoneGap plugin to introduce WebSockets your installable web app using HTML and [...]
-
John
October 6th, 2010 at 9:56 pm
Is there a way to do WebSockets in PhoneGap for Android?
-
FreakDev
October 31st, 2010 at 8:51 am
Hi,
thank you for your job that’s really cool, it gaves me the courage to do the same for Android. check it out : github.com/FreakDev/PhoneGap-Android-HTML5-WebSocket
-
Rob kohr
November 7th, 2010 at 5:47 pm
I am thinking of using this on my pirate game. I think websockets should work on andoid since it is chome.
-
James
December 23rd, 2010 at 8:08 am
Is it possible to do Web Sockets for Blackberry with PhoneGap?
-
Mrugen
December 9th, 2011 at 1:06 pm
I tried using the Phonegap Plugin hosted at github.com/FreakDev/PhoneGap-Android-HTML5-WebSocket for Android and it seems it doesn’t work the way it should .
Can I please have some clear pointers on how to use integrate into current project. A sample source code would be great. Thanks
-
Shawn
June 12th, 2012 at 11:00 pm
I have web sockets working for IOS and Android using PhoneGap. Trying to find something for Windows Phone using WebSocket4Net. Any examles out there with web sockets using pone gap on windows phone 7?
-
Rehan
July 20th, 2012 at 9:50 am
@Shawn, Can you please share the iOS websocket plugin? I’m unable to compile the above posted source code.