
It knows that the WebSocket is associated with a particular QR Code. When the UUID code for the QR Code arrives, the javascript updates the Web Page with that image URL and displays it. The WebSocket on the browser is listenning for several things, one of which is that UUID for the QR Code retrieval. When a user opens the URL for the Web App thing ( using ) the Web page gets a few Javascripts (we are also using JQuery here, just to simplify some of the work we need to be done, and bootstrap so that everything doesn't just look too horrible), some CSSs and then it opens a WebSocket, where it receives immediatly a UUID for it to use to download the QR Code image.
What is the plan?įor our small proof of concept, just like with WhatsApp, the chat bit of the Web App will work using WebSockets. These are not particularly pretty, they are a proof of concept and just work. One is the Web server side bit, which will display a QR Code and allow the auth and also do some chatting, and the other is the Android app that will read QR Codes and also work as a chat client.
WhatsApp Auth Clone using Play2 - Server. So, first of all, all source code is available at these two locations: Firebase Cloud Messaging Intro and Dependencies. Send and Receiving Messages - Server Side. WebSockets and Interface stuff - The Web Side. I'll try to cover all the basics and specifics, but it will be quite hard to explain everything is 100% detail. It is assumed some degree of knowledge on Android development for the Android sections, some knowledge of Play2 Framework for the Play2 Framework server side implementation, and obviously Java. Another implementation using Glassfish 4 and Tyrus will follow at some point if there is interest. This tutorial will cover the theory behind it, the implementation of an Android App to read QR codes and send and receive data to a Server, and also an implementation of the Server side using Play2 Framework.
īecause the answer was given in real broad strokes, I decided to create a tutorial on how to implement something like what is being used by WhatsApp. This tutorial came to be due to a question I found on Stackoverflow titled Mechanism behind QR code scanning of whatsapp webapp and the investigation and answer that I gave. Home How to Implement a Mechanism like QR code scanning of WhatsApp Web 20 September 2016