Налаштуйте web3.js для використання блокчейну Ethereum у JavaScript
У цьому посібнику ми розглянемо, як почати роботу з web3.js (opens in a new tab) для взаємодії з блокчейном Ethereum. Web3.js можна використовувати як у фронтенді, так і в бекенді, щоб читати дані з блокчейну, здійснювати транзакції та навіть розгортати смарт-контракти.
Перший крок — додати web3.js у ваш проєкт. Щоб використовувати його на вебсторінці, ви можете імпортувати бібліотеку безпосередньо за допомогою CDN, наприклад JSDeliver.
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
Якщо ви віддаєте перевагу встановленню бібліотеки для використання у вашому бекенді або фронтенд-проєкті, який використовує збірку, ви можете встановити її за допомогою npm:
npm install web3 --save
Потім, щоб імпортувати Web3.js у скрипт Node.js або фронтенд-проєкт Browserify, ви можете використати наступний рядок JavaScript:
const Web3 = require("web3")
Тепер, коли ми додали бібліотеку до проєкту, нам потрібно її ініціалізувати. Ваш проєкт повинен мати можливість взаємодіяти з блокчейном. Більшість бібліотек Ethereum взаємодіють з вузлом через RPC-виклики. Щоб ініціювати нашого провайдера Web3, ми створимо екземпляр Web3, передавши URL-адресу провайдера як конструктор. Якщо у вас на комп’ютері запущено вузол або екземпляр ganache (opens in a new tab), це матиме такий вигляд:
const web3 = new Web3("http://localhost:8545")
Якщо ви бажаєте отримати прямий доступ до розміщеного вузла, ви можете знайти варіанти на сторінці «Вузли як послуга».
const web3 = new Web3("https://cloudflare-eth.com")
Щоб перевірити, чи правильно ми налаштували наш екземпляр Web3, ми спробуємо отримати номер останнього блоку за допомогою функції getBlockNumber. Ця функція приймає функцію зворотного виклику як параметр і повертає номер блоку як ціле число.
var Web3 = require("web3")
const web3 = new Web3("https://cloudflare-eth.com")
web3.eth.getBlockNumber(function (error, result) {
console.log(result)
})
Якщо ви виконаєте цю програму, вона просто виведе номер останнього блоку: верхівку блокчейну. Ви також можете використовувати виклики функцій async/await, щоб уникнути вкладеності функцій зворотного виклику у вашому коді:
async function getBlockNumber() {
const latestBlockNumber = await web3.eth.getBlockNumber()
console.log(latestBlockNumber)
return latestBlockNumber
}
getBlockNumber()
Ви можете переглянути всі функції, доступні в екземплярі Web3, в офіційній документації web3.js (opens in a new tab).
Більшість бібліотек Web3 є асинхронними, тому що у фоновому режимі бібліотека робить JSON-RPC-виклики до вузла, який надсилає результат у відповідь.
Якщо ви працюєте в браузері, деякі гаманці безпосередньо впроваджують екземпляр Web3, і вам слід намагатися використовувати його за будь-якої можливості, особливо якщо ви плануєте взаємодіяти з Ethereum-адресою користувача для здійснення транзакцій.
Ось фрагмент коду для виявлення доступності гаманця MetaMask і спроби його ввімкнення. Пізніше це дозволить вам зчитувати баланс користувача та дасть йому змогу підтверджувати транзакції, які ви хочете, щоб він виконав у блокчейні Ethereum:
if (window.ethereum != null) {
state.web3 = new Web3(window.ethereum)
try {
// Запит на доступ до облікового запису, якщо потрібно
await window.ethereum.enable()
// Тепер облікові записи доступні
} catch (error) {
// Користувач відхилив доступ до облікового запису...
}
}
Існують також альтернативи web3.js, які теж часто використовуються, наприклад Ethers.js (opens in a new tab). У наступному посібнику ми розглянемо, як легко відстежувати нові вхідні блоки в блокчейні та переглядати їхній вміст (opens in a new tab).
Останнє оновлення сторінки: 3 березня 2026 р.
