Have an iPhone, but wish you could IM your buddies? Now you can, with TinyBuddy IM. It is an AIM® Enabled web-based IM tool. It works by using the Web AIM API, OpenAuth and Dojo.
The nice thing about this solution: you do not send your AIM password to me -- you are redirected to AOL's OpenAuth servers for authentication. My JavaScript only sees an auth token. Furthermore, my web page has to get your explicit consent before accessing your buddy list data and before sending the first IM or presence change.
So the price of this added security is pop-up windows. A new window will be popped so you can authenticate with the OpenAuth servers, and also when giving consent to the application to access your buddy list and IM. For the consent prompts, you can choose "Grant Always" to avoid them on subsequent logins. I think the pop-ups are worth the added security, and at least in iPhone's Safari, window popping looks neat. Unfortunately, the OpenAuth Sign In and Consent pages are made for larger windows, so you will have to double-tap zoom to read them.
Another neat feature of this web application: it is pure JavaScript, HTML and CSS. No server-side languages needed. Dojo really made it easy to do this. I used Dojo 0.4.3 because I want to reuse this code for some other projects that are on 0.4.3, but if/when I get enough time, I would like to port it over to the 0.9 code.
So give it a whirl if you like. I'm sure the code it not bulletproof, and I've noticed enough weirdness with iPhone's Safari to guarantee that I will not be able to give comprehensive support. Also, even though I'm an AOL employee, AOL does not endorse this project or have anything to do with it (but thanks to my co-workers for ideas and early testing, all done of their own accord).
Also, I'm using an OpenAuth dev key, so if there is too much usage you might see some rate limit errors, but we'll see how it goes.
Some other interesting tidbits:
- The Web AIM API is a Comet API. It uses long polling to work cross-domain in the browser. I'm using more of a short poll with pauses between the polls to hopefully smooth out network hiccups on the phone.
- Don't like the CSS? You can make your own and tell the app to use it instead. Go to the test launcher page to specify the path to your CSS. Click the Launch button, then copy launch URL. Use that URL when you want to use the application. This feature is not allowed for IE browsers given its security problems with CSS "expressions".
- I'm serving the code gzipped. The HTML, CSS and JavaScript combined come to about 90 KB. So it is tolerable on the EDGE network.
- Use the iPhone two finger scroll to scroll the buddy list and IM conversations.
- Typing IMs should be optimally sized for use with the virtual keyboard. Just type in the text box at the bottom of the IM window and press "Go" on the keyboard.
- I'm using Dojo Accordions for the IMs and buddy list. I like the use of space with that model and that I can show you incoming IM text if that IM AccordionPane is in the closed position.
- onbeforeunload does not seem to fire for iPhone Safari. That makes it hard to log out correctly, so to clear your OpenAuth cookies, be sure to use the Available, Sign Out menu item.
26 comments:
Fantastic. Though I don't have an iPhone to use it (sure I would have if I had one) I am very excited to see OpenAuth and WebAIM APIs being used to create cool Web applications for cool new gadgets like iPhone.
Thank you for making it a reality in such short time frame.
http://journals.aol.com/openauth/aolopenauth/
Thanks James -- this is really great. I wish I had an iPhone to try it out.
This is great...nice work. I do have an iPhone and have one buddy I converse with frequently: my bride. I didn't have a good way to interact with her online so had to setup an SMS-to-iChat-n-back process I found. While it's nice to be able to have her IM message alert me with an iPhone vibration, it's a clumsy way to IM and yours is true IM.
Been thinking about having always-on, vibration alert IM though that can run on the phone. I'm sure Apple didn't deploy iChat due to power consumption issues with a persistent process running, but having yours running in Safari shouldn't be too heavy.
hey James,
This thing is hot. I'm a visual interface designer and would love to help you dazzle this thing up if you want to go that route. I'll do it for free cause I want to see this shit kickin. Hit me on aim mrbagsays
cheers
Anonymous: you can start right now by making your own CSS file for it and then go to the launch page to launch the UI using that style sheet. Feel free to leave the link that loads your style sheet in the comments here.
I'm working on porting the app to Dojo 0.9, but I only expect the styles that have "dojo" in them somewhere to change (the minority of the style rules).
If you wanted to do larger changes (like say get rid of the Accordion usage), that will be harder to do, but I'm hoping to open source the code at some point, to allow others to do so if they choose. I'll probably keep the Accordion though for tybyim.com because I like it.
I did this on the google list and I'm doing it here again; thank you, man. Seriously. This more than gets the job done and the fact that the aim servers do the authentication is a big plus. The only 'bug' I've seen is with handling links in a chat; can you make the links do a target=_blank?
As it stands now? Clicking on a link disconnects you because it replaces the chat on the browser.
Again, thank you so much for this.
Anonymous: thanks for pointing out the hyperlink problem. I had code to do it, but just forgot to put it in. It should be fixed now -- new windows are popped for hyperlinks in the IM conversation. Clear browser cache and hopefully you will pick up the change.
Hi James...
I went back, cleared the cache and gave it another go.
It seems now that tybyim opens links in a new target...as well as the tybyim window :)
Also, it looks like you aren't doing the window.scrollTo(0,1) trick to hide the toolbar.
Another benefit of this is that you get another 60 pixels or so to play with; if you used them then i think the incoming IM (red, shows up at bottom) wouldn't be cropped of and you might be able to bump everything up a teeny bit bigger too for bigger hit zones and better readability.
Nevertheless, still a life saver and my favorite iphone web app, and you're still my "new best friend" ;)
-K
kai: I'm glad it is working, but I did not follow this part:
"It seems now that tybyim opens links in a new target...as well as the tybyim window :)"
in particular, the "...as well as the tybyim window". What use case is that? Do you consider it a bug? Or are you just saying that if you IM the tybyim.com URL to the conversation, it opens another window to tybyim.com?
On the scrollTo thing: I had inconsistent results with it, so I didn't want to rely on it (I only wanted to do one set of calculations).
Also, I'm not sure how a user can type a new URL or bookmark the page then if I do hide it.
I like the idea of getting more screen space, but I want the mechanism to be consistent, and I do not want to make the user frustrated by hiding the more general Safari UI.
If there is a way to trigger the top part of Safari to re-appear, then maybe I can put in a link to show it again if the user wants. Hmm, still might make calculations trickier.
The calculations I'm doing is mainly getting the IM UI scrolled into view and shrinking the conversation area so the IM can be seen with the virtual keyboard up.
I was thinking about fitting in a notification to the current IM when you receive an IM in another IM pane, maybe in the title area, or a as a brief semi-transparent box at the bottom of the current IM's conversation window.
I couldn't reproduce the weirdness with the links, so I'm going to assume it was "me" somehow :)
As for hiding the addressbar; on the phone it doesn't disable it, it justs scrolls the page up so the it autohides it. The user can (in the opinion of many, heheh, too easily) bring the addressbar back by either tapping the top of the display or moving the whole screen down.
if your results were inconsistent with the scrollTo it is likely that the page/viewport wasn't tall enough; your main working area/body/div/whatever you are using should be 416px in portrait orientation.
Aslo, (and this was what was messing me up when i couldning get scrollTo working) you MUST use setTimeout or scrollTo...won't :)
I use: window.addEventListener('load',hide_addrbar,false)
with hide_addrbar being:
function hide_addrbar() {
setTimeout(function(){window.scrollTo(0, 1);}, 50);
}
-K
Finally, an aim application that works. Kudos.
My two suggestions:
Allow for grouping
Physics-enabled scrolling (hard to scroll quickly)
Awesome job!
kai: thanks for the hint -- I was not using a timeout. I'll try that. The other thing I noticed was the bar seemed to reappear after I do the window hopping over to the AIM servers. So i'll probably need to do another timeout there.
trevor: I do have a buddy list version that grouped by buddy group (sort of like how the Windows AIM client does it). I'll see about offering a switch to it.
As for the physics-enabled scrolling, AFAIK, I would have to go with a non-scrollable div to get that, and just put the buddies listed raw in a page. If I do that, then I'll have to drop the accordion approach to managing IM windows. If that seems more useful to people, then I might look into it.
THIS SHIT IS BANGIN AND IS THE BEST WAY TO ACCESS AIM ON THE IPHONE I HAVE ONE AND I JUUST USED IT AND ITS AMAZING. EVERYONE SHOULD USE THIS IF THEY HAVE AN IPHONE. THANK YOU SO MUCH. =)
its great but does an im count as a text??
"Does an IM count as text"?
No, since TinyBuddy IM just uses the browser, the SMS text rates do not apply.
i just got my monthly bill and i got charged for this service. you lied to me.
Anonymous: I just got my bill, and I do not recall seeing a charge for this. You should only be charged if for some reason you do not have an unlimited data plan. However, I thought the only options for AT&T service were unlimited data plans.
If you use the SMS interface on the phone, you could be charged for that, but that has nothing to do with the TinyBuddy IM code, that is just regular SMS messaging. The TinyBuddy IM code is a web server-based service that is only accessible through the Safari browser interface (and therefore just use the data plan of the phone).
nice
OMG i jus bought da iphone nd was alittle madd dat it had no aim or chatting....u saved my iphone experience
YOOOOoOOOo HONESTLY I HAVE NOT FULLY GOT IN TO DETAILS WITH THIS JUST YET, BUT I TRYED IT OUT AND SO FAR IM AM SOO GLAD YOU DID THIS MAN CAUSE I WAS UPSETTT FOR REALLL.
YOU ARE THE MANNN !!!!!!!!!!!
IT asks for consent while im about to send a msg, and it just closes out safari and goes to the iphone home page? whats up?
anonymous: I think the Consent box closing Safari and ending up at iPhone home could happen if you have lots of Safari windows already opened. I think you are only allowed around 8 windows, and the Consent box opens a new one. Although, it opens one for Sign In. It could also be related to having a large buddy list (more than 50-80?) and having other windows open.
You can try closing other Safari windows and trying again.
I am hoping to do an update so that I use less Safari resources when showing the buddy list (not including offline buddies or Recent Buddies in the HTML DOM). I am hoping that will also help the situation.
im confused. i signed in but when i tried to IM someone it said "Your message was not sent to ********. Authenticaton required." what do i do?
Anonymous: that sounds odd. Try clearing your cookies and clearing the browser cache, turn off the iphone/ipod touch, then turn it back on, and try again.
I have seen an issue where I get signed off from the server in some cases when I'm using the EDGE network on the iPhone (WIFI seems OK). I have not narrowed down the problem -- it could just be that in some spots the EDGE connection is not that good.
But normally an "authentication" error is caused by browser cookie issues.
so does this use up any of my sms messages for the month cause like i guess i just dont understand it
Anonymous: it does not use SMS messaging, so it saves you from that cost. It uses web browser connections to do the messaging.
So if you have an unlimited data plan from your phone service provider, there is no cost to use TinyBuddy IM. However, if you are charged for data transfers, then TinyBuddy IM will cost money: it could potentially be a significant cost if you leave it running for a long time.
If you are using the WIFI connection, then there should be no additional cost unless you are being charged by the kilobyte by the WIFI service provider.
Post a Comment