Как реализовать увеличение score на 1 в SQLite через кнопку на сайте и исправить ошибку require is not defined

При разработке веб-приложений с базой данных SQLite часто возникает задача инкремента значения через нажатие кнопки. Однако при попытке использовать require в браузере появляется ошибка Uncaught ReferenceError: require is not defined. Разберём правильный подход к реализации.

Почему возникает ошибка require is not defined?

Функция require() относится к среде выполнения Node.js и не поддерживается в браузере напрямую. В браузере JavaScript работает в изолированной среде, где нет доступа к файловой системе или модулям Node.js. Для взаимодействия с SQLite на серверной стороне необходимо использовать клиент-серверную архитектуру.

Правильная архитектура: клиент-сервер

Чтобы изменить значение score в SQLite через кнопку, создайте серверную часть (например, на Node.js с Express), которая будет обрабатывать запросы от клиента. Клиентский JavaScript отправляет HTTP-запрос (например, POST) на сервер, а сервер уже выполняет SQL-запрос к базе данных.

Шаг 1: Настройка сервера (Node.js + Express + SQLite)

Установите необходимые модули: express и better-sqlite3 (или sqlite3). Создайте файл server.js:

const express = require('express');
const Database = require('better-sqlite3');
const app = express();
const db = new Database('database.db');

app.use(express.json());

app.post('/increment-score', (req, res) => {
  const { userId } = req.body;
  const stmt = db.prepare('UPDATE users SET score = score + 1 WHERE id = ?');
  stmt.run(userId);
  res.json({ success: true });
});

app.listen(3000, () => console.log('Server running on port 3000'));

Шаг 2: Клиентская часть (HTML + JavaScript)

На странице разместите кнопку и обработчик клика, который отправляет запрос на сервер:

<button id="scoreBtn">+1 к score</button>

<script>
document.getElementById('scoreBtn').addEventListener('click', async () => {
  const response = await fetch('/increment-score', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ userId: 1 }) // подставьте нужный ID
  });
  const data = await response.json();
  console.log('Score incremented!', data);
});
</script>

В клиентском коде не используется require, поэтому ошибка не возникнет.

Альтернативный подход: WebSocket для реального времени

Если требуется обновление счётчика без перезагрузки страницы и для всех пользователей, используйте WebSocket (например, библиотеку socket.io). Сервер отправляет обновлённое значение всем подключённым клиентам.

Типичные ошибки и их решение

• Ошибка require is not defined - используйте серверный JavaScript, а не клиентский, для работы с SQLite.
• Ошибка доступа к БД - проверьте путь к файлу базы данных и права на запись.
• Ошибка CORS - если сервер и клиент на разных портах, настройте заголовки CORS.

Заключение

Для корректной работы с SQLite через кнопку на сайте необходимо разделить клиентскую и серверную части. Клиент отправляет запрос, сервер выполняет инкремент score. Это устраняет ошибку require is not defined и обеспечивает безопасное взаимодействие с базой данных.