Approach to asynchronous web programming ( Working on Google Image Labeler site look like ) - ajax

I want to create a website like Google Image Labeler, in which people can tag images.
but this is my first serious web programming project and my problem is that I don't know what are requirements for doing this job.
In this site what I have to do is First : pair people randomly and second : I need to send each session information to server asynchronously ( not only client to server [ AJAX ], but also server to client [ by using comet I guess ] )
I have Python and PHP programming experience and also I'm familiar with AJAX and Javascript. In my 2, 3 days journy(!) for finding suitable tools to doing this project I encountered to lot of stuffs : websocket, jquery, comet, socke.io, nod.js and a lot more which just made me so confused.
in fact I'm looking for a good reference helps me on where to start and what to do. ( or you can think of it as : what is best approach for starting asnyc web programming )
thanks a lot in advance

OK, after a lots of trying I got here :
to start async web programming , first of all you need to get familiar with AJAX, it's not that hard . you can earn all you need from w3schools.
after that the best choice you have is jquery . there is lots of incredible things you can do with it . one of it's capabilities is that you can send and receive data using ajax without reloading the page . To get familiar with jquery live page manipulation you can check How to Create A Simple Web-based Chat Application.
Also you can use some of html 5 technologies such as SSE ( server sent events [ more convenient ] one directional connection ) or websockets ( bidirectional connection, useful for web game programming )
In order to pair people you can use Mysql database as a medium to hold each new user's information and after that pair them using an unique id , such as session id . obviously you can use files as a medium too .
That's almost all you need to create a live updating web site , but if you want to do it much more professionally and in the server side, you can look at node.js ( server side javascript, an event oriented programming ) or twisted ( a python frame work ).
This is all I learned in my way .
Sorry for unwanted mistakes .

Related

Kony Forms - produced in what form?

I am trying to understand the form in which the mobile UI portion of a KonyOne Studio hybrid app is produced and whether I can have a disconnected hybrid app. As I understand it now for hybrid apps (Web and native parts), Forms in the KonyOne Designer get converted into JSPs. Is that correct? Can I assume this type of app must run connected all the time so that the JSP output is always up to date? Thanks.
So there is a little misunderstanding here:
When the output is Hybrid, the forms are converted to a SPA ( Single Page Application, a feature of HTML5 ), and embedded with the application itself.
The Hybrid shell is a native application, and there are javascript bindings between the content on the form ( which is in HTML5 ) and the shell ( which is pure native )
The SPA portion of the application only needs to be connected to the network when Service calls are being made. So to answer your question, you can have an "offline" ( non-network connected ) application, as long as you are not going back to the server for data. For data calls, you will need to be connected.

Frontend Architecture for a web application [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have to write a new web application and currently am in the process of deciding on the architecture , there are several things i know i want to be able to do :
All machine must be symmetric , i.e. : commodity machines no custom build servers (aws)
I want a ReST API that is seperated from the UI as i allready have three clients for the API : mobile applications , the web site and a server from a 3rd company waiting for the product to be build
it needs to able to scale horizontal (a but of a repeat of 1)
Easy to maintain : no time to learn new languages , more available candidates but willing to adopt new technologies
here is the basic architecture i've come up with :
frontend combining of nginx+nodejs+expressjs+YUI ,
api : nginx+tomcat+spring framework stack (rest+Security+core+aop)
the frontend will talk to the api with oAuth 2.0
nothing exciting about the api i've done it before , i know it works and works well would have loved to put some scala flavour but i don't have the time .
my main concern is the frontend : nodejs is insanely exciting and i've been playing around for some time also love the fact it's in JS , but i'm afraid about navigation+templating+sessions (for authentication only : stateless,stateless,stateless)+logging+debugging of it , if it works it works well but it's not a mature enviourment to develop in .....
anyone here developed a full frontend with stack or subsets of it ? any other suggestions to choose from ?
thanks guys .
but i'm afraid about navigation+templating+sessions (for
authentication only : stateless,stateless,stateless)+logging+debugging
of it
navigation? Not sure what you mean here. Use hyperlinks. AFAIK there's nothing in node like Rails' form_for() type helpers, but those were never that interesting to me. If you want something like Rails style before/after filters, say for requiring a logged in user, connect does this great.
app.all('/app/*', requireUser)
That will call requireUser for any path starting with /app. Inside requireUser you can make sure req.session.user is there (and maybe has proper authorization). If so, you call next() and the middleware responsible for actually generating the response is executed. If the user isn't logged in or is not authorized, you can generate a 30X redirect response and don't call next(). Done. There's a great example exactly like this in the express.js guide. Search for loadUser. This design is really elegant, IMHO.
templating? Uh, node.js has as good or better templating options than any other platform. Try jade or any of a dozen others. You can use the same templates on the server and in the browser, which is a nice win. Check out this video of Dav Glass using YUI widgets on the server side in node.js since you like YUI.
sessions? Connect sessions. Taste great. Less filling. What's the problem?
logging? Winston works for me. There are also fancier libraries as well I think.
debugging? node-inspector gives node.js (IMHO) the best debugging support available. It debugs with chrome's inspector and is every bit as awesome as debugging client side javascript. I can also debug server side unit tests when running via jasbin.
Here's an answer to what companies are using node.js in production.
So if you got problem with testing then you just misunderstand some features of Node.js and express. For example you can use something like this for testing:
app.get('/route', function(req,res,next) {
require('./controllers.js').method(req,res,next)
});
Then you need to drop cache with all files required in your controlles.js:
if (require.cache[__filename])
{
var del = false;
for ( i in require.cache)
{
if (i == __filename)
{
del = true;
}
if (del)
{
delete require.cache[i];
}
}
}
So now your controller will updated instantly to current version when request pass.
To understand how does nodejs require work just try this:
require.js
module.exports = {};
main.js
var x = require('./require.js');
x.tell = true;
var y = require('./require.js');
y.tell = false;
console.log(require('./require.js'));

strutrs2 and ajax(Displaying dynamic value on jsp)

Im pretty new to struts2 and Ajax ,Actually i have a drop down menu in JSP lets say first.jsp, When user select a choice from dropdown menu,I am calling a function of Action class lets say Method1.In this method i am fetching some value from DB(lets say:a,b,c) and one value from java memory lets say d.Then I am forwarding to second.jsp and display all the parameters(a,b,c and d) in tabular format.
Now problem is that the parameter d is dynamic ,this is updating by some other application and if its change then I have to show it on JSP wihout any action.
One solution is I use in second.jsp , so after interval of 10 second again Mehod1 will call and it will fetch value(a,b,c) from db and updated value of d from java memory. and disply it to second.jsp.But in this case i am unnecessary retrieving value from db while my purpose is just to get value d from memory.This is working but this is causing my application to slower.
Can any body suggetst some other solution? or can i do it using ajax and how?
Any other advice? any help is appreciated.try to be more clear, i'm in lack of ideas in this problem, even it sounds like a classic :I have spend hours trying to play around with this but have got nowhere
Okay... What you're asking is a little fuzzy so let me rephrase:
You have a user (USER1) who opens a web page and sees some data.
You have a second user (USER2) (who may be an application) who is able set a value from time to time.
When USER2 updates that value you want USER1 to see it change in their open browser window?
If this is the case you need to understand basic ajax. For that get these demo applications working:
This example uses dojo and perhaps the S2 ajax tag lib I don't remember I prefer not to use ajax tags (as they are deprecated and prefer jquery for ajax):
http://struts.apache.org/2.x/docs/struts-2-spring-2-jpa-ajax.html
This example here shows a very similar application but using jquery, no tag library, upgraded to Spring 3, it still needs polish:
http://www.kenmcwilliams.com/Downloads/
Now that you know how to get data via ajax, look at the request with firebug. You'll see that the request is just like a typical function call, the browser keeps waiting for the data to come back.
What you do is simply not return from the action until new data is provided. This is called long polling see: http://en.wikipedia.org/wiki/Comet_%28programming%29#Ajax_with_long_polling
If you have not written a simple chat program, using just terminal windows I recommend you do so. Two windows per client (client-send, client-receive windows) and you'll need a server program. I remember hacking one together in a few hours using _Thinking In Java 2nd Edition (Later books took out the networking section if I remember correctly). Anyways between understanding client server interaction and long polling will let you get things working. It would be fun to extend the simple terminal based chat application to a S2 ajax chat application. Would make an awesome tutorial! PS: This is just an application of the producer/consumer problem (If you understand that then I guess you don't need to do the fun exercise).
The interfaces would look very pretty if the server was managed by spring. I know there must be nice servers already written but I am not familiar with any, but would love to hear of one.

out of this world Comet programming and a web-based chat

Current Project Setup
I've been working on a web-based chat, similar to Facebook chat. At the current state, I listen for incoming chats and check for new messages in an existing chat is by doing...
setTimeout(function() { listenForIncomingChat() }, 500);
setTimeout(function() { checkForIncomingMessages( ...params... ) }, 500);
... so doing the setTimeout() makes sure these functions are always running. Depending on how many chat windows I have open, Firebug's console can go crazy with POSTs to the server :)
Obviously this is really inefficient, but it is the only way I could get things to work. Now I'm looking for the ways to make it better, to do it correctly!
Some Research
Now, I have heard about Comet Programming and that this is the way to open a long-lived HTTP connection with the server, but I'm not familiar with the technology or the ideas behind Comet. WebSockets for HTML5 is probably even better, but since that is not in full swing nor is it supported by all browsers, I'll stick with what works.
According to Wikipedia, there are several ways to develop with the Comet style: Streaming (hidden iFrame, XMLHttpRequest) or AJAX with long polling (XMLHttpRequest, Script tag). However, I don't know anything about this. I've also read about the AJAX Push Engine (APE) and it looks cool, but I don't want to use a third-party for the time being.
I've recently stumbled upon WebChat 2.0 so I'm going to be looking through the source code to try and understand how it all works.
On to the question(s)
So where can I find example code/tutorials on how to get started with this kind of project? How would I implement the Comet technique? How do I set up the long-lived HTTP connection with the server?
Here's an example of a chatroom using node.js, source code here.
I believe the client uses polling, but this example is interesting because the server side is in JS too, and node.js is efficient for this type of stuff.

Help me build this tool in windows envoirnment

I made a desktop music application in adobe air.
I want to update the status of some IM clients running EG: Yahoo messenger,Gtalk,AIM,MSN etc.
with the current playing song.
I am not desktop developer.This is first time i am making something for desktop.
SO is there any way in any Programming language that i can make something which will change the Data (Status message) of a running IM client.
Please Just guide me through this problem .
Edit: I dont want to ask for username/password of users IMs accounts , so via API is not a solution in this case .
It will be like Person X running mine music application and also logged to various third party IM clients (YIM,Gtalk etc).
SO if he is playing a song in the music application , then mine app will update presence status message on the IM clients to " Listening to bla bla song ".
So it is like high-jacking/Hacking the data of the running third party IM client.
Have a look at libpurple, it might have the functionality you require.
There is also telepathy, but I think it is related to the former somehow (one uses the other or they do the same thing).
EDIT: for the recent edit: it looks to me like you want something like MSN Messenger displaying the currently playing track in Windows Media Player. This requires a plugin for the messaging client, no way around that.
Perhaps an easier way to get this done would be to develop a plugin for one of the numerous multi-platform IM clients such as GAIM or Trillian. This would let you target stuff across the board without undue effort . . .
I think your only option is to write a plugin for each chat client you want to target, which could take some time.
So let me suggest an alternative: Add last.fm audioscrobbler support to your application. You would simply send the Now Playing info to last.fm via the API (http://www.last.fm/api/submissions), and it will appear on the user's profile page. Most music players already support this method because it's a pretty popular service, and a lot of people link to their last.fm profiles on their blog/facebook/etc.

Resources