App Inventor and the Web component

A Chat Demo with App Inventor 2 and PubNub^TM

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

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
      

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

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

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.