Решён
Можно ли реализовать чат-бот на нативном JS?

TS Lover JavaScript
2.3k
6

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

Хочу написать на чистом JavaScript без фреймворков и библиотек (кроме может быть axios для запросов). Реально ли это сделать или обязательно тащить React/Vue? Если реально, то с чего начать, какая архитектура?

Решение
63
Участник • 2 ответа

Конечно можно. Для простого бота с ключевыми словами фреймворки вообще избыточны.

Архитектура:

  1. HTML - контейнер чата (список сообщений + поле ввода)
  2. CSS - стилизация пузырьков сообщений
  3. JS - логика:
    • Обработчик submit на форму ввода
    • Функция добавления сообщения в DOM (createElement + appendChild)
    • Объект или Map с ключевыми словами и ответами
    • Простой парсер: toLowerCase(), includes() или регулярки для поиска ключевых слов
    • Дефолтный ответ если ключевое слово не найдено

Никаких запросов на сервер не нужно, если у тебя статичные ответы. Вся логика на клиенте.

Если нужна интеграция с API (ChatGPT, Dialogflow) - тогда fetch/axios для отправки запроса и вставки ответа.

88
Участник • 3 ответа

Набросал за 5 минут костяк:

const responses = {
  'привет': 'Здравствуйте! Чем могу помочь?',
  'цена': 'Стоимость уточняйте по телефону',
  'время работы': 'Мы работаем с 9 до 18'
};

function sendMessage() {
  const input = document.getElementById('userInput');
  const msg = input.value.toLowerCase();

  addMessage(msg, 'user');

  let reply = 'Извините, не понял вопрос';
  for (let key in responses) {
    if (msg.includes(key)) {
      reply = responses[key];
      break;
    }
  }

  setTimeout(() => addMessage(reply, 'bot'), 500);
  input.value = '';
}

function addMessage(text, sender) {
  const chat = document.getElementById('chatBox');
  const bubble = document.createElement('div');
  bubble.className = sender;
  bubble.textContent = text;
  chat.appendChild(bubble);
  chat.scrollTop = chat.scrollHeight;
}

Добавляешь HTML с формой и стили - готово.

Аватар TS Lover

Отлично, именно такой пример и нужен был. Спасибо!

23
Эксперт • 2 ответа

Можно, но зачем? Реакт для такого не нужен, но какой нибудь минималистичный подход типа Web Components или хотя бы шаблонизатор упростит жизнь.

Нативный JS быстро превращается в спагетти-код при добавлении новых фич (история чата, анимации, сохранение в localStorage). Лучше сразу продумать структуру - модули ES6, разделение логики и рендера.

36
Эксперт • 2 ответа

Делал такое на ванильном JS для корпоративного сайта. Главный геморрой - не логика бота, а UI.

Автоскролл чата, анимация появления сообщений, адаптивность под мобилки, индикатор "бот печатает" - все это руками на нативном JS писать долго. Либо тащи готовые UI-библиотеки (что убивает смысл "без зависимостей"), либо закладывай время на полировку интерфейса.

Сама логика ответов - да, элементарно. Но продуктовый чат-бот это на 80% про UX.

14
Участник • 1 ответ

Если чисто учебный проект - пиши на нативном JS, прокачаешь скилл работы с DOM.

Если для продакшна - возьми готовое решение типа Tawk.to или Jivo. Зачем велосипед изобретать, когда есть проверенные инструменты с аналитикой, интеграциями и поддержкой.

7
Эксперт • 1 ответ

если база данных нужна для хранения диалогов юзеров лучше сразу бекенд прикрутить типа nodejs или питон

а если прям только фронт то localStorage хватит для сохранения истории

Написать ответ

Премодерация гостей

Вы отвечаете как гость. Ваш ответ будет скрыт до проверки модератором. Чтобы ответ появился сразу и вы получали репутацию — войдите в аккаунт.

Будьте вежливы и соблюдайте правила платформы.