A Chat Demo with App Inventor and Easy Web Socket

[Taifun]

see example http://puravidaapps.com/chat.php
Taifun

PS: a web socket enhancement for App Inventor would be nice...

[Jos Flores]

Hey Taifun,

very cool! as usual! :)

cheers,

José

[Roger Belk]

WOW! thats great Taifun, Keep up the good work.

Thanks,

Big Daddy App
www.BigDaddyApp.com

Follow Big Daddy on Twitter
BIG DADDY APP's APPS
JOIN BDA on FACEBOOK

LET BDA HELP YOU

[Gary]

On Sunday, December 30, 2012 11:55:35 AM UTC-6, Taifun wrote:

...

PS: a web socket enhancement for App Inventor would be nice...

What would the enhancement do?

Gary 

[Taifun]

thank you, guys! ;-)
Taifun
 

PS: a web socket enhancement for App Inventor would be nice...

What would the enhancement do?

It could provide real-time communication between different clients of the same app, see here:

http://jwebsocket.org/mobile/android/android_part1.htm

Whether on-line games, or online collaboration, streaming, chat, remote control or monitoring applications - real-time communication has long ago moved into the mobile devices. HTML5 WebSockets are the ideal basis for bidirectional high-speed data exchange in real time.

http://en.wikipedia.org/wiki/Websocket
WebSocket is a web technology providing full-duplex communications channels over a single TCP connection. The WebSocket API is being standardized by the W3C, and the WebSocket protocol has been standardized by the IETF as RFC 6455. WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application. The WebSocket Protocol is an independent TCP-based protocol. Its only relationship to HTTP is that its handshake is interpreted by HTTP servers as an Upgrade request. The WebSocket protocol makes possible more interaction between a browser and a web site, facilitating live content and the creation of real-time games. This is made possible by providing a standardized way for the server to send content to the browser without being solicited by the client, and allowing for messages to be passed back and forth while keeping the connection open. In this way a two-way (bi-directional) ongoing conversation can take place between a browser and the server. A similar effect has been achieved in non-standardized ways using stop-gap technologies such as Comet.

[Gary]

I am not keeping up with what is happening with HTML5. Thanks Taifun.

This page http://www.websocket.org/echo.html

is a simple demo of WebSockets. It tests if your browser supports WebSockets. You can see the browser version in the upper right of the page.

What I got:

These worked

Windows 7: Chrome 23 Windows

Nexus 7: Chrome 18 Linux

This did not

Droid X: Unknown Chrome Linux

The Nexus 7 has a current version of Android, the Droid X has an old version.

I did not test if App Inventor using the web components worked on the Nexus 7. It would probably work using an Activity Starter.

Anyone interested in testing both the web components and Activity Starter on a device that runs the demo page.

Gary

[Taifun]

unfortunately web socket generally is up to now not available for Android browsers, see also here http://caniuse.com/#feat=websockets
but this technology is not restricted to the web browser:

WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application.

Taifun

[Dennis A.]

Taifun,

please clarify: "but this technology is not restricted to the web browser:"

Regarding the AI WEB VIEWER..

..  YES it works on the AI web viewer or NO it does not work on the AI web viewer?

thank you..

Dennis

[Taifun]

this technology is also new for me...

please clarify: "but this technology is not restricted to the web browser:"

this was said here: http://en.wikipedia.org/wiki/Websocket

Regarding the AI WEB VIEWER..

..  YES it works on the AI web viewer or NO it does not work on the AI web viewer?

it tried to explain everything here http://puravidaapps.com/chat.php
web socket does not work in Android browsers and therefore also not in the AI web viewer
but the chat example uses easywebsocket.org which works...
I think they are using a fallback solution, but I'm not sure...

and: web sockets could be an interesting future enhancement for App Inventor to enable communication between clients

more info about that technology also at stackoverflow http://stackoverflow.com/questions/tagged/websocket+android?sort=faq&pagesize=30
or google https://www.google.com/#hl=en&tbo=d&spell=1&q=websocket+android

Taifun

[Gary]

On Tuesday, January 1, 2013 9:25:07 AM UTC-6, Taifun wrote:

this technology is also new for me...

It looks new, good find!

web socket does not work in Android browsers and therefore also not in the AI web viewer

It works in the Nexus 7 web browser.

That is why I asked if someone wanted to do research  

"Anyone interested in testing both the web components and Activity Starter on a device that runs the demo page."

If I had the spare time, I would do some testing of the web components and starting a web page with Activity Starter.

  I'm guessing you can get it to work with Activity Starter. 

    But I do not know...

Gary

[Taifun]

"Anyone interested in testing both the web components and Activity Starter on a device that runs the demo page."

If I had the spare time, I would do some testing of the web components and starting a web page with Activity Starter.

  I'm guessing you can get it to work with Activity Starter. 

    But I do not know...

in 99% this does NOT work, see here http://caniuse.com/#feat=websockets ...
and here is a test page http://puravidaapps.com/websocket-test.html, you can open it with your Android browser or with the Activity Starter
Taifun

[Gary]

On Tuesday, January 1, 2013 3:00:00 PM UTC-6, Taifun wrote:

"Anyone interested in testing both the web components and Activity Starter on a device that runs the demo page."

If I had the spare time, I would do some testing of the web components and starting a web page with Activity Starter.

  I'm guessing you can get it to work with Activity Starter. 

    But I do not know...

in 99% this does NOT work, see here http://caniuse.com/#feat=websockets ...

The lucky 1% can get a head start.

I wonder how many devices 1% is? There are a lot of Nexus 4/7/10 and other phones that have jelly bean out there.

 

and here is a test page http://puravidaapps.com/websocket-test.html, you can open it with your Android browser or with the Activity Starter

Woo Hoo! Now if someone that can run the demo page comes up with source for test apps, we can look more.

What I am hoping (sorta) is that the browser and Activity Starter work and the we components do not. Then we have a clue that the version of the jars used with the web components is not as current as the browser.

And we have the technology...

I sorta was seeing that when I was testing HTML5 a long time ago. I did not confirm back then. Now we have source :-)

Gary 

 

Taifun

[Dennis A.]

quick test with AI web viewer fails..

Dennis

[Jos Flores]

Taifun is right about some solutions using fallbacks. I have worked
with socket.io, the technology that EasyWebSocket is built on top (a
websockets implementation for nodejs == JavaScript on the server
side), and it falls back to other technologies (degrading gracefully)
if the client does not support websockets, making it as transparent as
possible for the user.

But guys, this is a server side technology, I don't see how to
integrate this into AI other than the way Taifun is using. All the
work here is done in the server; in Taifun's case, this is given by
Easy Web Socket and the HTML page on the phone; in my case, we run our
own socket servers and serve our clients code from there. Either way,
all the work is pure JavaScript (and some markup), and it should be
mostly supported by the web viewer, but all the work is done outside
of App Inventor.

cheers,
José

[Gary]

Thanks Dennis.
What phone/version of Android.

And how about an Activity Starter example?

[Taifun]

I don't see how to integrate this into AI other than the way Taifun is using.

it would be nice to have some blocks directly in App Inventor without having to use the webviewer as workaround,
e.g. something like webSocket.Send and a webSocket.GotText event to receive a message
Taifun

[Gary]

:-)

So, a WebSocket component that understands the url ws[s]://host[:port/][path/][arguments]

and has blocks for the two methods send and close and handles the three events, onopen, onmessage, onclose.

  http://jwebsocket.org/mobile/android/android_part1.htm 

:-)

[Jos Flores]

But guys, who is running the server? Because the client implementation
is also provided by the server. For instance, to use Easy Web Socket,
you have to include this client library:
http://easywebsocket.org/easyWebSocket.min.js

A different websockets server will have a different client library,
and there's no standard for these clients.

And what's more important... websockets is a technology for the
browser, in our case, a web viewer. If we don't want the browser, we
don't really need websockets, any kind of socket will do. Websockets
is only bringing to the browser what we already have outside of the
browser... are we missing the point?

I haven't tried the Game client/server component, but it seems to do
something very similar.

cheers,
José

[Gary]

On Thursday, January 3, 2013 7:31:15 AM UTC-6, Jos Flores wrote:

But guys, who is running the server? Because the client implementation
is also provided by the server. For instance, to use Easy Web Socket,

WebSockets is a standard. You should be able to use a server that supports the standard written in whatever language you want with clients that support the standard written in whatever language you want.

It will require a server. 

That did not stop Google from writing the twdb component. Using twdb in App Inventor makes it easy to do that part of a web app.

 

you have to include this client library:
http://easywebsocket.org/easyWebSocket.min.js

A different websockets server will have a different client library,
and there's no standard for these clients.

?

http://tools.ietf.org/html/rfc6455

I am not saying it is currently easy to get clients and servers to talk with each other, I am saying it will be as the libraries mature.

 

And what's more important... websockets is a technology for the
browser, in our case, a web viewer. If we don't want the browser, we

?

WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application.

http://en.wikipedia.org/wiki/Websocket

 

don't really need websockets, any kind of socket will do. Websockets

as Taifun documented http://code.google.com/p/app-inventor-for-android/issues/detail?id=727

 

 

is only bringing to the browser what we already have outside of the
browser... are we missing the point?

We are talking about issues with using WebSockets.

I do not have spare time to work on it. That could change some day and if we talk about some of the issues now, that code would be done that much better (given that I am sorta not sure what better would be :-))

 

I haven't tried the Game client/server component, but it seems to do
something very similar.

Interesting point. I wonder if that component could be redone in WebSockets (some day).

Gary 

[Jos Flores]

Why would you want to redo something with a different technology if
the final functionality is the same?

Just because websockets are the cool thing now? I don't get it.

BTW Websockets is a specification. Implementations in different
languages and platforms may vary largely, even if they follow the same
specification.

cheers,
José

[Gary]

Some follow up 

Gingerbread is currently on almost 50% of the devices out there

http://www.androiduknewsetc.com/2013/01/gingerbread-still-on-the-majority-of-android-devices/

It's on my Droid X )-:

ICS is on almost 30%. 

Jellybean 4.2 is currently on a bit over 1%. 

The various Nexus 4/7/10 and other lucky folks.

Once we have a test app that uses Activity Starter to run a WebSocket example, We can test Firefox https://play.google.com/store/apps/details?id=org.mozilla.firefox

or Opera https://play.google.com/store/apps/details?id=com.opera.browser

both will install on my well loved but mature Droid X.

We care (partly) because WebSockets is part of HTML5 (kinda ;-)) and HTML5 is now 'stable and feature complete' 

http://www.computerweekly.com/blogs/open-source-insider/2013/01/html5-is-now-stable-and-feature-complete.html#.UOafqNiJZeg.twitter

 "This means that (as far as the W3C sees it) businesses and developers have a "stable target" for implementation and planning the next generation of web applications."

Soooo

Those of us that are working with HTML5 are getting experience with where things will be for the next generation of apps.

But I digress :-)

Gary

[Gary]

On Friday, January 4, 2013 7:03:03 AM UTC-6, Jos Flores wrote:

Why would you want to redo something with a different technology if
the final functionality is the same?

WebSockets are (becoming) a standard. If we use them, we are using a technology that will get better and will be available more places.

Using sockets with App Inventor apps is not something I want to do.

What other technology does the same thing?

 

Just because websockets are the cool thing now? I don't get it.

I am interested in what could be added to App Inventor to support WebSockets 

and testing what the browsers on the devices can do with App Inventor. If it looks like something useful, we can look into using the current libraries to do the browser components. I already had a start with ai4a V1.2/V1.3. I am currently stumbling over issues with the code that OAuth uses in App Inventor when put into an Android app.

I do not have a need for a WebSocket component (currently :-))

 

BTW Websockets is a specification. Implementations in different
languages and platforms may vary largely, even if they follow the same
specification.

You are going to have to say more to clarify that for me José.

I'm old. I spent a lot of my time with CORBA http://en.wikipedia.org/wiki/Common_Object_Request_Broker_Architecture

"The Common Object Request Broker Architecture (CORBA) is a standard defined by the Object Management Group (OMG) that enables software components written in multiple computer languages and running on multiple computers to work together (i.e., it supports multiple platforms)."

There were various implementations. BUT you could (eventually) get things written in one implementation working with another implementation.

If we were to move forward (which is not on my list of things todo (at least today)), I would look into a Java library that worked on Android and see about getting something up. Then take some time to see if what we had was a good way to go and it if was, do the next version. 

 

cheers,
José  :-)

Good conversation

Gary 

[Jos Flores]

Exploration is great, no doubt of that. But those of you working with
HTML5, sure are working with browsers. Websockets are sooooo exciting
because they bring sockets to the browser, which means that now we can
have bidirectional comms between browser/server instead of having to
pull from servers with http requests. This is awesome for games, and
all the other stuff already discussed in this thread. If you take the
browser out of the equation then all you need is a socket:
http://docs.oracle.com/javase/tutorial/networking/sockets/index.html

cheers,
José

[Taifun]

I haven't tried the Game client/server component, but it seems to do something very similar.

why does nobody use the game component?
-> because it is too complicated and there is no tutorial available!
a simple solution would be nice to have...
or do you know anybody who is using the game component?
I looked at this 1 year ago, but I don't remember why I did not continue... probably I should look at it again...

If you take the browser out of the equation then all you need is a socket

which means, we are back at issue 727 http://code.google.com/p/app-inventor-for-android/issues/detail?id=727 and issue 385? http://code.google.com/p/app-inventor-for-android/issues/detail?id=385

It will require a server. That did not stop Google from writing the twdb component. Using twdb in App Inventor makes it easy to do that part of a web app.

yes, the solution could be similar to the TinyWebDB solution...
Taifun

[Anthony Barnes]

Gary,

Do you still have the stuff that Eni sent us on the Game Client? I am unable to locate it.

--

tAIR - Main Site   |    tAIR - Forum   |   tAIR - Code Site   |    tAIR - Webchat
tAIR Companion App - Download From Market
Tony Barnes   |   barne...@gmail.com

[Gary]

On Friday, January 4, 2013 9:57:54 AM UTC-6, Taifun wrote:

I haven't tried the Game client/server component, but it seems to do something very similar.

why does nobody use the game component?
-> because it is too complicated and there is no tutorial available!
a simple solution would be nice to have...
or do you know anybody who is using the game component?
I looked at this 1 year ago, but I don't remember why I did not continue... probably I should look at it again...

I think the game component did not work.

 

If you take the browser out of the equation then all you need is a socket

which means, we are back at issue 727 http://code.google.com/p/app-inventor-for-android/issues/detail?id=727 and issue 385? http://code.google.com/p/app-inventor-for-android/issues/detail?id=385

Looks like sockets were made a 'feature' :-)

 

It will require a server. That did not stop Google from writing the twdb component. Using twdb in App Inventor makes it easy to do that part of a web app.

yes, the solution could be similar to the TinyWebDB solution...
Taifun

I saw that  two of the many server options were Apache and Tomcat. There were a lot others.

Gary

 

[Gary]

On Friday, January 4, 2013 10:31:06 AM UTC-6, Anthony Barnes wrote:

Gary,

Do you still have the stuff that Eni sent us on the Game Client? I am unable to locate it.

She sent the voting component http://code.google.com/p/app-inventor-voting/

Another interesting component that did not go anywhere.

Gary 

[clift...@gmail.com]

Hi Taifun,

I am new here and chance upon your Chat-Demo apps using the web socket.

I have copied the Chat.apk from your tutorial and installed it on 2 Samsung Galaxy S3 phones.

I could not see the display that says "so-and-so entered the chat" nor the messages entered and sent,

in either phone.  Do I need to do any changes to the apps (ie via the Appinventor Block Editor) before

using this Chat-Demo as designed?

Thanks in advice for your good advice.

Cheers,

Clifton

On Monday, 31 December 2012 01:55:35 UTC+8, Taifun wrote:

see example http://puravidaapps.com/chat.php

[Taifun]

somehow the Easy Web Socket chat demo does not work anymore,,. also not in the browser window... I don't know why...

try the PubNub chat instead http://puravidaapps.com/pubnub.php

Taifun

[Taifun]

it also does not work anymore in the chat demo of EasyWebSocket itself ... http://easywebsocket.org/contrib/chat/ ...

Taifun

[clift...@gmail.com]

On Friday, 18 October 2013 21:43:32 UTC+8, Taifun wrote:

it also does not work anymore in the chat demo of EasyWebSocket itself ... http://easywebsocket.org/contrib/chat/ ...

Taifun 

Taifun,

Thanks for replying, I appreciate it.

I am looking at the PubNub link now, quite a cool site.  2 questions for your kind assistance :

1)  to use the features provided by PubNub, I have to use Appinventor 2, is this correct?

2)  have you tried developed an app using the PubNub's feature to 'push' a notification to another phone (installed with the same app

but was not active)?  With the received 'push' notice, the latter phone user would then launch the app to respond to the notice.  If yes,

may I seek your advice to put the PubNub's code accordingly into the Appinventor Blocks to make this works?

Cheers,

Clifton

[Taifun]

1)  to use the features provided by PubNub, I have to use Appinventor 2, is this correct?

no, you also can use it with AI1

2)  have you tried developed an app using the PubNub's feature to 'push' a notification to another phone (installed with the same app but was not active)?  

I have not tried this, please test that and let us know what you find out

Taifun 

[Khalid Abdulla]

Old thread so not sure if anyone is still following this, but I arrived at this thread looking for a way to get websocket client working in App Inventor 2. I found the following extension did just what I needed - hope it's of help to someone else:

https://community.appybuilder.com/t/websocket-client-extension/1761