🗨️ Build a WhatsApp API using Node & Express

🤫 Using a library

UpdatedMarch 22, 2022

•5 min read•View as Markdown

🗨️ Build a WhatsApp API using Node & Express

Usman Sabuwala

I am a full stack developer, YouTuber and blogger!

Comments (5)

Join the discussion

Amit Kumar3y ago

Thank you for writing the post. I was trying to setup an auto responder for multiple numbers. One of the comment I read was const client = new Client({ puppeteer: { headless: false }, clientId : 'example'
});

I believe, we can use clientId as mobile number. I was wondering if we need to fix session.json as well?

Usman Sabuwala3y ago

Due to the latest updates in the library, settings.json file isnt used.

If you use clientId as mobile number, that's fine. It's basically used for multiple sessions. It creates folders for each new session/client id you put in

Amit Kumar3y ago

Thanks for prompt reply. Will try

Budi Ramadhanus3y ago

Im looking delivery message (pending, Delivered, read) can u explaint about that function ?

Usman Sabuwala3y ago

Do you want to get the status of a message if that is pending, delivered or read??

If that's what you want, you can do something like this:

// Store the sent message in a variable
const sentMessage = await client.sendMessage(chatId, content);

console.log(sentMessage.ack)

sentMessage.ack will be either one of these:

ACK_ERROR
ACK_PENDING
ACK_SERVER
ACK_DEVICE
ACK_READ
ACK_PLAYED

For more information, you can refer the docs

Joshua Omobola4y ago

Devastatingly fantastic! Thank you, @usmanwrites

Eizil4y ago

Hi,

this is really interesting, i'm just learning node.js and stumble with your article using express.

Would you mind to shed some direction if I want to extend your API to use with multiple numbers?

Usman Sabuwala4y ago

Hi Eizil! Thanks for commenting and asking 😃.

So if you want to use this API with multiple numbers, the whatsapp-web.js team actually worked on the multi-device feature here and they successfully published that to production.

With that, now you can set the clientId property in the Client constructor that will load the client of your choice once they are logged in. So you can make it dynamic in your case.

Eizil4y ago

Usman Sabuwala that was quick, thank you for your reply, will look into it and try it myself.

thanks again

uik kos4y ago

Hi , i am new to nodesjs , i am trying to use your code but having some error

c:\nodejs\whatsapp\app.js:54 app.listen(PORT, () => console.log(🚀 @ http://localhost:${PORT})); ^

ReferenceError: app is not defined at Object.<anonymous> (c:\nodejs\whatsapp\app.js:54:1) at Module._compile (node:internal/modules/cjs/loader:1103:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12) at node:internal/main/run_main_module:17:47

can you share your code to download? Thanks a lot

Usman Sabuwala4y ago

Hi. Sorry there was a mistake in the post that I updated now. When requiring all the packages, in order to make express work, you will have to initialise the app variable which I forgot. Thank you for pointing out the mistake.

Add this line with other variables

const app = express();

uik kos4y ago

Hi Usman Sabuwala ~ Thanks so much for your reply , that is working for me now ~ Thanks so much for your help ~^_^

More from this blog

🎣 Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks

Hey all 👋👋 Webhooks are a powerful tool that allow applications to communicate with each other in real-time. They are often used to send notifications or updates from one system to another without requiring manual intervention. If you know the bas...

Dec 17, 20224 min read3.5K

🎣 Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks

🛑 Why You Should Avoid the onclick Attribute in Your Code

Hey everyone! It's been a while since I wrote my last article. But here I am with another topic that might be informational to you 🙂. This time I am writing about why you should avoid the onclick attribute in your HTML and JavaScript code. This ar...

Dec 11, 20224 min read2.3K

🛑 Why You Should Avoid the onclick Attribute in Your Code

🎉 Presenting Memoriez - A quick & easy journal

❔ What and Why Memoriez ❔ This is a very important question because it makes things clear as to why this app is needed. I built Memoriez because I honestly found it hard to write and maintain journal/diary entries daily. It's not easy to maintain a j...

Jul 1, 20223 min read668

🎉 Presenting Memoriez - A quick & easy journal

🗃️ How to use Mongoose with Next.js for MongoDB?

Explained with a simple project

Apr 17, 20226 min read13K

🗃️ How to use Mongoose with Next.js for MongoDB?

🎨 Sort imports using Prettier in a JavaScript Project inside VS Code!

👋 Hey developers! This post is about how you can sort import statements in your JavaScript/TypeScript/React/Node etc projects easily with Prettier in VS Code when you format the code. https://www.youtube.com/watch?v=QQWgN0_gUxI What will you achieve...

Mar 22, 20223 min read4.7K

🎨 Sort imports using Prettier in a JavaScript Project inside VS Code!

Usman Writes

30 posts

Hey all! My name is Usman! I am 17 years old and learning web development and programming. I also have a YouTube channel on the subject of programming and mostly web development.

Today, you will be able to build a WhatsApp REST API using Node.js and Express using Puppeteer and web scraping.

Although we won't be doing any web scraping, we will use a library that does everything for you already and makes it very easy to work with WhatsApp programmatically.

Setup

Express server setup

To set up the express server, we are not going to do it from scratch, we'll use a generator called express-draft by YoursTruly. Firstly, install express-draft globally and use the following command to generate an express app.

npm i -g express-draft
exp .

Install Whatsapp Web library

Caution: Installing this package will also download Chromium because of Puppeteer. To disable Chromium download, follow the steps on this post

So there's an awesome open-source Whatsapp client that connects through the Whatsapp Web browser app made by Pedro S. Lopez.

https://github.com/pedroslopez/whatsapp-web.js/

First, we'll install it through NPM or yarn.

npm i whatsapp-web.js

After we're done with that, we can set it up in our app.js file by following the given example.

We can alter the file as follows,

const express = require('express');
const fs = require('fs');
const createError = require('http-errors');
const morgan = require('morgan');
const { Client } = require('whatsapp-web.js');
require('dotenv').config();

const app = express();

const SESSION_FILE_PATH = './session.json';
let sessionCfg;
if (fs.existsSync(SESSION_FILE_PATH)) {
  sessionCfg = require(SESSION_FILE_PATH);
}

const client = new Client({
  puppeteer: { headless: false }, // Make headless true or remove to run browser in background
  session: sessionCfg,
});

client.initialize();

While using this library, whenever a user logs in, their information will be stored in a session.json file, which is then used to authenticate the user the next time when the server starts.

Important: Create a nodemon.json file in the root folder and add these contents to ignore the session.json file whenever it changes.

// "$schema" can be omitted it's used for IntelliSense. REMOVE THIS COMMENT
{
  "$schema": "https://json.schemastore.org/nodemon.json",
  "ignore": ["session.json"]
}

Using events

whatsapp-web.js has a lot of events to work with, and we'll now use some of them to get the QR code, check the authentication, etc.

// Add this after express code but before starting the server

client.on('qr', qr => {
  // NOTE: This event will not be fired if a session is specified.
  console.log('QR RECEIVED', qr);
  app.get('/getqr', (req, res, next) => {
    res.send({ qr });
  });
});

client.on('authenticated', session => {
  console.log('AUTHENTICATED', session);
  sessionCfg = session;
  fs.writeFile(SESSION_FILE_PATH, JSON.stringify(session), function (err) {
    if (err) {
      console.error(err);
    }
  });
});

client.on('auth_failure', msg => {
  // Fired if session restore was unsuccessfull
  console.error('AUTHENTICATION FAILURE', msg);
});

client.on('ready', () => {
  console.log('READY');
});

// Listening for the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`🚀 @ http://localhost:${PORT}`));

The above code uses events provided by the library to tackle different situations. They are pretty self-explanatory so I am not gonna explain each of them.

In the "qr" method, we create a route that sends the QR code as the response. The QR code is in raw format, meaning it needs to be generated so for the purpose of this tutorial, we'll use a library called qrcode-terminal to show the QR Code in the terminal.

// Run `npm i qrcode-terminal` before this

const qrcode = require('qrcode-terminal')

client.on('qr', qr => {
  // NOTE: This event will not be fired if a session is specified.
  console.log('QR RECEIVED', qr);
  qrcode.generate(qr, { small: true }); // Add this line
  app.get('/getqr', (req, res, next) => {
    res.send({ qr });
  });
});

The `sendmessage` endpoint

Now that we have everything set up, let's do the most exciting part that is to send a message using our own API.

For that, we create a route in the app.js file itself.

Let's create the POST endpoint for sendmessage and it will be an async function with a try-catch block.

app.post('/sendmessage', async (req, res, next) => {
  try {
    // Magic happens here
  } catch (error) {
    next(error)
  }
})

In the body of the request, the user has to enter two pieces of data.

Mobile number
Message

We'll identify those as number and message respectively. Hence, we get them from the request body, and use them to very easily send the message from the client to the given number.

To send a message, we use the client.sendMessage method and these are the arguments we need to pass in

app.post('/sendmessage', async (req, res, next) => {
  try {
    const { number, message } = req.body; // Get the body
    const msg = await client.sendMessage(`${number}@c.us`, message); // Send the message
    res.send({ msg }); // Send the response
  } catch (error) {
    next(error);
  }
});

Now here, in the sendMessage method, we pass in the mobile number and the message itself. With the mobile number, we have to attach @c.us at the very end, so we do that with template literals in JavaScript.

Testing the API

In order to test our API, we first run it using npm run dev. That will open up a browser (if you've set headless to false)

Running the server will give us the QR Code to authenticate because it's the first time. So, you have to scan it through WhatsApp.

Once authenticated, you will notice that a session.json file has been created with the following contents.

Now in VS Code itself, we'll use an extension called Thunder Client, which works like Postman for API testing. Here's the link

Create a New Request in Thunder Client, and then add the following details. In the number field, add the mobile number followed by the country code of the number.

Look at the image carefully

And then hit Send.

If the message is sent successfully, the number you entered will receive it and you will get back the msg as the response. If not, then an error.

Conclusion

You can read more about the library here

https://wwebjs.dev/

I hope you enjoyed building out the WhatsApp API using Node.js, Express, and whatsapp-web.js.

Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️.

Command Palette