
Whatsapp is the most popular IM for the last ten years. It offers a convenient and free app which allows users to send text messages, photos, videos, and audio recordings over the internet. Whatsapp is one of the Facebook main app on iPhone and Android. To harness the power of WhatsApp, Facebook has expanded its reach beyond the mobile platform by developing a web version. Now we can conveniently use the Whatsapp not only on our iPhones or Android phones, but also on our computers, laptops or even Chromebooks (a cloud-based laptop that runs Chrome OS)
WhatsApp Web is entirely developed using HTML5 and Javascript. To enhance the capabilities of Whatsapp in the browser, a huge number of open source projects have emerged, disclosing the Javacript API to public. As a result, programmers can effeciently develop their own plugins that work with Web Whatsapp, enabling them to extend their abilities and customize their Whatsapp experience.
APIs in Web Whatsapp
One of the most popular open-source projects is “whatsapp-web.js“, which is hosted on Github. As implied by its project name, Whatsapp-web.js is developed by Javascript and running in Node.js environment. It utilizes Puppeteer, which runs a Web Whatsapp in chromium browser, effectively simulating the experience of using Whatsapp within an actual web browser. Additionally, the project utilizes Moduleraid, a TypeScript library, to expose WhatsApp’s Javascript modules at window level. This includes various APIs such as sending messages, images, videos, and more. Here is an example to show you the result.

In above screenshot, each of these APIs offers unique features. For instance, the getChats API retrieves a list of current WhatsApp chat sessions, while the getContacts API returns a list of contacts. Dut to the limitation of screen height, the above screenshot doesn’t include functions like sendMessage, sendSeen, and sendChatState.
Events in Web Whatsapp
APIs provide a set of methods and interfaces that allow us to directly invoke, while events, on the other hand, are mechanisms used to tigger or notify actions in response to specific changes in Whatsapp. For example, when our friends are typing on their Whatsapp, our Whatsapp app will display a typing indicator on the window to indicate their typing activity. Similarly, when a new message arrives, a red round mark appears on the chat label to notify us. These dynamic updates and notifications are all driven by events within the Whatsapp.
Now the question arises: how can we discover all the events in Web Whatsapp? Unlike APIs, events are not registered on a central object. Instead, events in different categories are associated with specific Javascript objects. For instanc, “add” event on the msg object indicates the arrival of a new message. The “change” event on the conn object reflects changes in the network connection. Similarly, the “change” event on the chat object signifies state changes in the chat, such as when our friends are typing. By observing and subscribing to these events on the corresponding Javascript objects, we can effectively track and respond to avrious dynamic behaviors within Web Whatsapp.
Debug Event in Whatsapp Effeciently
APis are typically self-explanatory as their names indicate their purpose, such as sendMessage, sendSeen, and sendChatState. However, finding and understanding events can be more challenging. Nevertheless, there is a way to achieve this. In this section, I will showcase how we can add an event listener to observe all events on a specific object, such as Msg object or Chat object.
Add and Remove Event Listener in Whatsapp
Here is way to add event listener on Msg object:
window.Store.Msg.on("all", data=>{console.log("Msg Event:", data)})
Using this approach, any event triggered by the Msg object will be printed in the console when it occurs. Once we have obtained a complete list of events, we can remove this event listener by using the following code:
window.Store.Msg._events["all"].pop()
Here is another example to demonstrate how events work. In this case, I have added an event listener to the Chat object. Whenever my friends start typing, the corresponding event will be printed in the console. Similarly, when they stop typing, another event will be displayed.
window.Store.Chat.on("change:presence.chatstate.type", data=>{console.log("chat event:", data.__x_type, data.__x_id)})
Once the task is completed, let’s remove the event listener to clean up the environment.
window.Store.Chat._events["change:presence.chatstate.type"].pop()