App Inventor and the Web component


A Chat Demo with App Inventor 2 and PubNubTM

This example uses the HTTP REST Push API from PubNubTM.
Thank you David for being the sponsor of this tutorial!

PubNub

Publish

To publish a message, issue a GET Request in the following format.

        http://pubsub.pubnub.com
        /publish
        /pub-key
        /sub-key
        /signature
        /channel
        /callback
        /message
      


Subscribe

To subscribe messages, we use a technique called long polling: With long polling, the client requests information from the server in a way similar to a normal polling; however, if the server does not have any information available for the client, then instead of sending an empty response, the server holds the request and waits for information to become available (or for a suitable timeout event), after which a complete response is finally sent to the client.

To subscribe a message, issue a GET Request in the following format.

        http://pubsub.pubnub.com
        /subscribe
        /sub-key
        /channel
        /callback
        /timetoken
      

Do you need help with your App Inventor project?

I can help you: for one hour I charge 25 USD.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.

Screenshots

App Inventor blocks

Publish

Subscribe


Other blocks used



Questions and Answers

Q1: I'm trying to make this chat but the only thing that I don't understand is how you can connect the app with the network so everyone can chat with each other?
A: You have to use the correct pubKey and subKey, you will get these after registering at PubNub. Then you can define different channels. If you want everybody to chat with everybody, just use the same channel for all.

Q2: How to retrieve previous sent messages history on channel by all users when user comes online?
A: Just enable the Storage and Playback add-on To get the history, see the syntax here and create it similar to the sub example.

To load publish history, issue a GET request in the following format:

        http://pubsub.pubnub.com
          /history
          /sub-key
          /channel
          /callback
          /limit
      

Download


Developing and maintaining snippets, tutorials and extensions for App Inventor takes a lot of time.
I hope it saved some of your time. If yes, then you might consider to donate a small amount!

Donation amount:

or donate some mBTC to Bitcoin Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Bitcoin

Thank you! Taifun
 

Download aia file for App Inventor 2
Back to top of page ...

Creative Commons License
This work by Pura Vida Apps is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.


Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact