creating a mobile chat app with phonegap - best strategy? - javascript

Do I create a timer that does ajax requests every so often to check for new messages? This seems like it would be a huge drain on the phone.
What would be the best way to create a simple PhoneGap instant messaging/chat app?
Is HTTP streaming a tenable strategy for mobile devices? What if the connection is interrupted? Does it work on 3G?
Obviously this is a big question but any help would be much appreciated.

This question is a little high level in scope and a lot would go into a "total answer". It depends on what you're using but have you considered using node.js and websockets? I know there are other ways to do server side websockets but that is a popular one.
If you're not familiar with web sockets, it's a new HTML5 technology and the mobile platforms seem to be keeping right along with HTML5 technologies so this may be a viable solution for you if you're still looking for something.
The thing with web sockets is that you don't poll for new data as what you have speculated in your question. It maintains an open connection between the server and the client. That way, the server only needs to push new data to the client when it arrives and vice versa when you want to push data to the server. You use a lot less data and processing since you don't periodically check for data. Also it's more of a "realtime" experience since messages are propagated after the server receives them.
Doing a general google search for websockets and chat yield all kinds of tutorials available.
Hope that helps.

Related

Android, TCP, Servlet -- To and Fro communication without external libraries. What are the standard efficient ways to do it?

What I am trying to build here looks something like this.
MyClients(Multiple) <------> Server(Me) <------> TheirClients(multiple, live)
MyClient1 (HTML)
Through Server (HTML -> Servlet -> Android)
HisClient1 (uses Android app)(monitored live by MyClient1)
HisClient2 (uses Android app)(monitored live by MyClient1)
...
...
The flow: (Can have multiple MyClients and HisClints online at the same time)
MyClient comes online.
Timely pinging HisClients get connected to the Server.
MyClient gets notified.
MyClient sends request to HisClient through server.
HisClient replies through Server.
MyClient is updated.
On the HisClient end i.e. Android, I'm running TCP Socket() to timely ping the server and stay alive. Cannot use URLConnection as the client have to stay alive all the time if the server requests something. Also I don't want to use any external library, so GCM is not an option.
On the MyClient side, I first tried using PHP but it is inefficient of handling multiple live clients. Then, after some searching I came to know that Servlets are good in such cases. So I started developing a Servlet.
Now the questions are:
Am I going in the right direction? I mean is there anything better for such a scenario? If yes, what and how? I mean what are the APIs and how will it maintain the live traffic?
If no, how do you handle multiple live HisClients with Servlet? I know, here multiple is not a problem but how to keep them live and keep updating MyClient?
Why are you going to spend so much time reinventing the wheel? Maintaining 100 connections with a web socket isn't hard. Maintaining 1,000,000 will be impossible. If you need an event system, use something like Amazon SNS or Pubnub to distribute events. Sure, you'll add a couple of Kbytes or MBytes to your app. But how will you know you can scale your solution?
Maintaining any kind of a connection will be just waiting for a scalability nightmare. Make things a bit less tightly coupled and you'll be much better off.

Pushing data from a server to Web based UI elements

I want to connect a bunch of weather sensors to a Raspberry PI. Writing the daemon that reads the sensors and writes the data to a database will be the easy part since I'm a systems programmer. I also want a simple cross platform UI for this device so I'd like to set my Raspberry Pi up as a WIFI hotspot that people can connect to and then just entering a URL like 'weather.local' into a browser which would take them to a web page where the weather sensor data is continually updated. I.e. I want the sensor daemon to 'push' updates to the web page.
The problem is that I'm no web developer. The solutions I can think of off the top of my head are:
Flash, which is out because I want this to work on mobile browsers.
Using Java script and hanging HTTP requests to a web service.
HTML5 socket.io which is presumably the same as WebSocket.
If I go with option (2) even if it's a kind of polling, I'll have to incorporate some form of HTTP server into my sensor daemon and I have a fair idea of how to code that. My question, however, regards the HTML5 socket IO. Can I use this to connect directly to a TCP/IP binary socket or do I need a server side WebSocket library? Also how widely is HTML5 socket.io/WebSocket implemented on mobile browsers?
WebSocket always begins with an upgrade handshake over HTTP, so you do need to have basic HTTP capability. It's simple enough that you can hand-code it.
WebSockets is basically supported by all modern browsers. It is not used that widely because it's a pain to set up on traditional HTTP servers and messes up with many proxies, but that's not a problem for you. As long as the client is a recent version of anything, it'll work.
A note about option 2: browsers have a native implementation of it — that means you don't need so much JavaScript on the client. You just create the EventSource object and listen to its events.

Call ajax when value is inserted on database [duplicate]

Of course I am aware of Ajax, but the problem with Ajax is that the browser should poll the server frequently to find whether there is new data. This increases server load.
Is there any better method (even using Ajax) other than polling the server frequently?
Yes, what you're looking for is COMET http://en.wikipedia.org/wiki/Comet_(programming). Other good Google terms to search for are AJAX-push and reverse-ajax.
Yes, it's called Reverse Ajax or Comet. Comet is basically an umbrella term for different ways of opening long-lived HTTP requests in order to push data in real-time to a web browser. I'd recommend StreamHub Push Server, they have some cool demos and it's much easier to get started with than any of the other servers. Check out the Getting Started with Comet and StreamHub Tutorial for a quick intro. You can use the Community Edition which is available to download for free but is limited to 20 concurrent users. The commercial version is well worth it for the support alone plus you get SSL and Desktop .NET & Java client adapters. Help is available via the Google Group, there's a good bunch of tutorials on the net and there's a GWT Comet adapter too.
Nowadays you should use WebSockets.
This is 2011 standard that allows to initiate connections with HTTP and then upgrade them to two-directional client-server message-based communication.
You can easily initiate the connection from javascript:
var ws = new WebSocket("ws://your.domain.com/somePathIfYouNeed?args=any");
ws.onmessage = function (evt)
{
var message = evt.data;
//decode message (with JSON or something) and do the needed
};
The sever-side handling depend on your tenchnology stack.
Look into Comet (a spoof on the fact that Ajax is a cleaning agent and so is Comet) which is basically "reverse Ajax." Be aware that this requires a long-lived server connection for each user to receive notifications so be aware of the performance implications when writing your app.
http://en.wikipedia.org/wiki/Comet_(programming)
Comet is definitely what you want. Depending on your language/framework requirements, there are different server libraries available. For example, WebSync is an IIS-integrated comet server for ASP.NET/C#/IIS developers, and there are a bunch of other standalone servers as well if you need tighter integration with other languages.
I would strongly suggest to invest some time on Comet, but I dont know an actual implementation or library you could use.
For an sort of "callcenter control panel" of a web app that involved updating agent and call-queue status for a live Callcenter we developed an in-house solution that works, but is far away from a library you could use.
What we did was to implement a small service on the server that talks to the phone-system, waits for new events and maintains a photograph of the situation. This service provides a small webserver.
Our web-clients connects over HTTP to this webserver and ask for the last photo (coded in XML), displays it and then goes again, asking for the new photo. The webserver at this point can:
Return the new photo, if there is one
Block the client for some seconds (30 in our setup) waiting for some event to ocurr and change the photograph. If no event was generated at that point, it returns the same photo, only to allow the connection to stay alive and not timeout the client.
This way, when clients polls, it get a response in 0 to 30 seconds max. If a new event was already generated it gets it immediately), otherwise it blocks until new event is generated.
It's basically polling, but it somewhat smart polling to not overheat the webserver. If Comet is not your answer, I'm sure this could be implemented using the same idea but using more extensively AJAX or coding in JSON for better results. This was designed pre-AJAX era, so there are lots of room for improvement.
If someone can provide a actual lightweight implementation of this, great!
An interesting alternative to Comet is to use sockets in Flash.
Yet another, standard, way is SSE (Server-Sent Events, also known as EventSource, after the JavaScript object).
Comet was actually coined by Alex Russell from Dojo Toolkit ( http://www.dojotoolkit.org ). Here is a link to more infomration http://cometdproject.dojotoolkit.org/
There are other methods. Not sure if they are "better" in your situation. You could have a Java applet that connects to the server on page load and waits for stuff to be sent by the server. It would be a quite a bit slower on start-up, but would allow the browser to receive data from the server on an infrequent basis, without polling.
You can use a Flash/Flex application on the client with BlazeDS or LiveCycle on the server side. Data can be pushed to the client using an RTMP connection. Be aware that RTMP uses a non standard port. But you can easily fall back to polling if the port is blocked.
It's possible to achive what you're aiming at through the use of persistent http connections.
Check out the Comet article over at wikipedia, that's a good place to start.
You're not providing much info but if you're looking at building some kind of event-driven site (a'la digg spy) or something along the lines of that you'll probably be looking at implementing a hidden IFRAME that connects to a url where the connection never closes and then you'll push script-tags from the server to the client in order to perform the updates.
Might be worth checking out Meteor Server which is a web server designed for COMET. Nice demo and it also is used by twitterfall.
Once a connection is opened to the server it can be kept open and the server can Push content a long while ago I did with using multipart/x-mixed-replace but this didn't work in IE.
I think you can do clever stuff with polling that makes it work more like push by not sending content unchanged headers but leaving the connection open but I've never done this.
You could try out our Comet Component - though it's extremely experimental...!
please check this library https://github.com/SignalR/SignalR to know how to push data to clients dynamically as it becomes available
You can also look into Java Pushlets if you are using jsp pages.
Might want to look at ReverseHTTP also.

webRTC HTML5 whiteboard/video chat

I'm exploring the options for building a bleeding edge whiteboard application (much like Big Blue Button or Wimba) using webRTC, HTML5, socket.io and node.js. This would be for one-on-one communication ... no more than two users communicating with each other at a time.
I'd like use data channels to pass whiteboard data between clients, then have some sort of listener on the server end that can record the video/audio/whiteboard actions. The server listeners would in effect be wire-tapping the whiteboard/audio/video chat. In other words, if the server to client connection gets laggy, it would not affect the quality of the P2P (client-to-client) webRTC connection. This way the server can record the whiteboard interactions at a lower priority leaving the one-on-one chat interactions as high speed as possible.
Are there any libraries or javascript frameworks that would work well for a shared whiteboard that I should know about?
Disclaimer: this answer is outdated, see this answer on how something like this can be accomplished.
WebRTC is still very new, support is also still a bit shaky. Needless to say no libraries or frameworks that do this sort of thing for you exist.
What you probably want to do is use WebSockets (with socket.io which you are already using) to send some of the data from the client to the server, and simultaneously send the data over WebRTC.
You can check how fast the connection is (by a sample upload and a sample download) and decide which strategy you want to use:
Use WebRTC and record nothing, or record only on the client side and upload to the server when done
Use both WebRTC and WebSockets , only use WebSockets to transfer 'some' data to the server where 'some' depends on what the connection can hold.
Use only WebSockets and transfer all the data to the server, with no P2P involved.
I think the most viable options are the first and second.
This also greatly depends on the implementation of the White Board, if you're only passing vector data for what was drawn on the board, even AJAX can handle the load, however, if you are passing live video I think nothing but WebRTC will effectively handle the load.
Good luck! This sounds like an interesting idea. I hope I will be able to edit this answer in a few months with a long list of libraries and frameworks that would let you easily do this.

Technology behind real-time polling

I am looking at facebook news feed/ticker right now and I am wondering what technology/architecture it uses to pull in data asynchronously when any of my connections make an update. One possibility that I can think of is a javascript setInterval on a function that aggressively polls the server for new data.
I wonder how efficient that is.
Another possible technology that I can think of is something like Comet/NodeJS architecture that pings the client when there is an update on the server. I am not too familiar with this technology.
If I wanted to create something similar to this. What should I be looking into? Is the first approach the preferred way to do this? What technologies are available out there that will allow me to do this?
There are several technologies to achieve this:
polling: the app makes a request every x milliseconds to check for updates
long polling: the app makes a request to the server, but the server only responds when it has new data available (usually if no new data is available in X seconds, an empty response is sent or the connection is killed)
forever frame: a hidden iframe is opened in the page and the request is made for a doc that relies on HTTP 1.1 chunked encoding
XHR streaming: allows successive messages to be sent from the server without requiring a new HTTP request after each response
WebSockets: this is the best option, it keeps the connection alive at all time
Flash WebSockets: if WS are not natively supported by the browser, then you can include a Flash script to enhance that functionality
Usually people use Flash WebSockets or long-polling when WebSockets (the most efficient transport) is not available in the browser.
A perfect example on how to combine many transport techniques and abstract them away is Socket.IO.
Additional resources:
http://en.wikipedia.org/wiki/Push_technology
http://en.wikipedia.org/wiki/Comet_(programming))
http://www.leggetter.co.uk/2011/08/25/what-came-before-websockets.html
Server polling with JavaScript
Is there a difference between long-polling and using Comet
http://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery
Video discussing different techniques: http://vimeo.com/27771528
The book Even Faster Websites has a full chapter (ch. 8) dedicated to 'Scaling with Comet'.
I could be wrong, but I think that Facebook relies on a "long polling" technique that keeps an http connection open to a server for a fixed amount of time. The data sent from the server triggers an event client side that is acted upon at that time. I would imagine that they use this technique to support the older browsers that do not have websocket support built in.
I, personally, have been working on an application with similar requirements and have opted to use a combination of node.js and socket.io. The socket.io module uses a variety of polling solutions and automatically chooses the best one based on what is available on the client.
Maybe you may have a look to Goliath (non-blocking IO server written in Ruby) : http://postrank-labs.github.com/goliath/

Categories