Налаштуйте web3.js для використання блокчейну Ethereum у JavaScript

У цьому посібнику ми розглянемо, як почати роботу з web3.jsopens in a new tab для взаємодії з блокчейном Ethereum. Web3.js можна використовувати як у фронтенді, так і в бекенді, щоб читати дані з блокчейну, здійснювати транзакції та навіть розгортати смарт-контракти.

Перший крок — додати web3.js у ваш проєкт. Щоб використовувати його на вебсторінці, ви можете імпортувати бібліотеку безпосередньо за допомогою CDN, наприклад JSDeliver.

1<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:

1const Web3 = require("web3")
Копіювати

Тепер, коли ми додали бібліотеку до проєкту, нам потрібно її ініціалізувати. Ваш проєкт повинен мати можливість взаємодіяти з блокчейном. Більшість бібліотек Ethereum взаємодіють з вузлом через RPC-виклики. Щоб ініціювати нашого провайдера Web3, ми створимо екземпляр Web3, передавши URL-адресу провайдера як конструктор. Якщо у вас на комп’ютері запущено вузол або екземпляр ganacheopens in a new tab, це матиме такий вигляд:

1const web3 = new Web3("http://localhost:8545")
Копіювати

Якщо ви бажаєте отримати прямий доступ до розміщеного вузла, ви можете знайти варіанти на сторінці «Вузли як послуга».

1const web3 = new Web3("https://cloudflare-eth.com")
Копіювати

Щоб перевірити, чи правильно ми налаштували наш екземпляр Web3, ми спробуємо отримати номер останнього блоку за допомогою функції getBlockNumber. Ця функція приймає функцію зворотного виклику як параметр і повертає номер блоку як ціле число.

1var Web3 = require("web3")
2const web3 = new Web3("https://cloudflare-eth.com")
3
4web3.eth.getBlockNumber(function (error, result) {
5  console.log(result)
6})
Копіювати

Якщо ви виконаєте цю програму, вона просто виведе номер останнього блоку: верхівку блокчейну. Ви також можете використовувати виклики функцій async/await, щоб уникнути вкладеності функцій зворотного виклику у вашому коді:

1async function getBlockNumber() {
2  const latestBlockNumber = await web3.eth.getBlockNumber()
3  console.log(latestBlockNumber)
4  return latestBlockNumber
5}
6
7getBlockNumber()
Копіювати

Ви можете переглянути всі функції, доступні в екземплярі Web3, в офіційній документації web3.jsopens in a new tab.

Більшість бібліотек Web3 є асинхронними, тому що у фоновому режимі бібліотека робить JSON-RPC-виклики до вузла, який надсилає результат у відповідь.

Якщо ви працюєте в браузері, деякі гаманці безпосередньо впроваджують екземпляр Web3, і вам слід намагатися використовувати його за будь-якої можливості, особливо якщо ви плануєте взаємодіяти з Ethereum-адресою користувача для здійснення транзакцій.

Ось фрагмент коду для виявлення доступності гаманця MetaMask і спроби його ввімкнення. Пізніше це дозволить вам зчитувати баланс користувача та дасть йому змогу підтверджувати транзакції, які ви хочете, щоб він виконав у блокчейні Ethereum:

1if (window.ethereum != null) {
2  state.web3 = new Web3(window.ethereum)
3  try {
4    // Запит на доступ до облікового запису, якщо потрібно
5    await window.ethereum.enable()
6    // Тепер облікові записи доступні
7  } catch (error) {
8    // Користувач відхилив доступ до облікового запису...
9  }
10}
Показати все
Копіювати

Існують також альтернативи web3.js, які теж часто використовуються, наприклад Ethers.jsopens in a new tab. У наступному посібнику ми розглянемо, як легко відстежувати нові вхідні блоки в блокчейні та переглядати їхній вмістopens in a new tab.

Останні оновлення сторінки: 21 серпня 2025 р.

copens in a new tab

popens in a new tab

nopens in a new tab

+9

Переглянути учасників