Перейти к содержанию

React JavaScript клиент#

Бета-версия

Функциональность находится в режиме бета-версии. Функции могут быть изменены, а также могут работать нестабильно. В будущем за функционал может взиматься дополнительная плата.
Подключение к функционалу можно запросить через техподдержку GREEN-API

React JavaScript клиент это пример использования whatsapp-api-calls-client Library for JavaScript для интеграции с мессенджером WhatsApp через API сервиса green-api.com. Чтобы воспользоваться библиотекой, нужно получить регистрационный токен и ID инстанса в личном кабинете. Для тестирования рекомендуем воспользоваться бесплатным тарифом "Разработчик".

Сайт представляет собой пример для разработчиков, направленный на лучшее понимание библиотеки и не является каким-либо полноценным решением, основные события/ошибки отображаются в консоли разработчика в браузере. Визуально и функционально клиент является улучшенной версией Ванильного JavaScript клиента. В данном примере лучше проработаны интерфейсы страниц, а также добавлен телефонный справочник.

1. Скачивание примера#

Для установки примера необходимо скачать код из github репозитория.

Скачайте архив или воспользуйтесь командной строкой:

git clone https://github.com/green-api/whatsapp-api-calls-client-js.git

2. Установка среды для запуска клиента#

В командной строке в загруженном примере перейдите в папку examples, далее в папку react.
Это нам необходимо чтобы настроить зависимости с помощью npm менеджера пакетов.

cd whatsapp-api-calls-client-js/examples/react  
npm install  
npm run dev

npm install достаточно выполнять один раз при первой установке.

После этого вам станет доступен веб-интерфейс клиента по указанному адресу, например:

 npm run dev

> vite-project@0.0.0 dev
> vite

  VITE v5.2.11  ready in 969 ms

  ➜  Local:   http://localhost:80/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Откройте ссылку в предпочитаемом браузере.

Для остановки сервера нажмите Ctrl + C и затем нажмите кнопку Y.

3. Заполнение необходимых данные для авторизации#

Пример запущенного приложения в окне браузера.

start

Необходимые данные для авторизации находятся в вашем личном кабинете GREEN-API. В качестве apiUrl используейте строку https://pool.voip.green-api.com, где pool представляет собой первые 4 символа искомого idInstance:

  • apiUrl
  • idInstance
  • apiTokenInstance

Далее необходимо нажать на кнопку Войти для подключения инстанса.

Для выхода из инстанса нажмите на кнопку Профиль

start

В окне профиля вы увидите: номер подключенного телефона, состояние инстанста, id устройства, а также кнопку Выйти для выхода из инстанса.

start

4. Приём входящих звонков#

После авторизации в приложении вы можете начать принимать входящие звонки.

Информация о входящем звонке поступит с помощью всплывающего окна, где вы можете выбрать Принять или Отклонить звонок.

start

Браузер может спросить разрешение на использование вашего микрофона, для передачи голоса. Необходимо разрешить это действие.

Для окончания звонка нажмите на кнопку Завершить вызов. Для вас соединение будет завершено, а клиент услышит в трубку тишину.

start

Известные проблемы и методы их устранения

При отклонении звонка вызов по-прежнему будет поступать на телефон, что не является ошибкой, а особенностью. Одно из решений данной проблемы - ответить на звонок и сразу сбростить, в этом случае звонок на телефон прекратится.

Из-за нестабильности технологии voip вы можете не увидеть уведомление о входящем звонке в окне браузера.

5. Выполнение исходящих звонков#

После авторизации в приложении вы можете начать совершать исходящие звонки.

Для этого введите номер абонента в форму Номер телефона и нажмите на зеленую кнопку с трубкой. Либо выберите номер из телефонного справочника.

start

После нажатия на зеленую кнопку вы увидите окно вызова

start

Если по какой-то причине звонок не произошёл, убедитесь, что Socket connection status светится зеленым и имеет статус: connected.

На некоторых телефонах необходимо, чтобы WhatsApp был запущен фоновым процессом для приёма входящих звонков.

Для окончания звонка нажмите на кнопку Завершить вызов. Для вас соединение будет завершено, а клиент услышит в трубку тишину.

Описание структуры проекта#

В папке с проектом находятся следующие необходимые папки и каталоги: 

├── src/
│ ├── assets/
│ ├── common/
│ ├── components/
│ ├── hooks/
│ ├── pages/
│ ├── router/
│ ├── services/
│ ├── store/
│ ├── styles/
│ ├── store/
│ ├── utils/
│ ├── voip/
│ ├── App.tsx
│ ├── main.tsx
│ └── index.css
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.js
└── .gitignore
Рассмотрим назначение основных файлов и каталогов:

  • index.html: файл HTML для начала сборки проекта Vite
  • package.json - нужен для сборки npm
  • tsconfig.json - нужен для использования typescript
  • vite.config.js - нужен для сборки html страниц проекта
  • public/index.html: Основной файл HTML
  • src/App.jsx: Основной компонент React
  • src/main.jsx: Точка входа приложения React
  • src/index.css: Файл CSS для стилизации
  • assets -- картинки проекта
  • common - всё что связано с типизацией и константами
  • components - папка с кастомными react-компонентами
  • hooks - кастомные хуки для react-компонентов
  • pages - компоненты-страницы (по сути компонент, состоящий из нескольких кастомный-компонентов, например страница main состоит из компонентов header, contact-list и т.д.)
  • services - содержит в себе конфигурацию Redux Toolkit для отправки запросов на сервер (например за списком контактов, получение статуса инстанса и т.д.)
  • store - конфигруация Redux Toolkit для работы с клиентским хранилищем
  • utils - вспомогательные функции для проекта (обработка ошибок, форматирование дат и т.д.)