Thiết lập web3.js để sử dụng chuỗi khối Ethereum trong JavaScript
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách bắt đầu với web3.js (opens in a new tab) để tương tác với chuỗi khối Ethereum. Web3.js có thể được sử dụng ở cả frontend và backend để đọc dữ liệu từ chuỗi khối hoặc thực hiện giao dịch và thậm chí triển khai các hợp đồng thông minh.
Bước đầu tiên là đưa web3.js vào dự án của bạn. Để sử dụng nó trong một trang web, bạn có thể nhập trực tiếp thư viện bằng cách sử dụng một CDN như JSDeliver.
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
Nếu bạn muốn cài đặt thư viện để sử dụng trong backend hoặc một dự án frontend có sử dụng công cụ build, bạn có thể cài đặt nó bằng npm:
npm install web3 --save
Sau đó, để nhập Web3.js vào một tập lệnh Node.js hoặc dự án frontend Browserify, bạn có thể sử dụng dòng JavaScript sau:
const Web3 = require("web3")
Bây giờ chúng ta đã đưa thư viện vào dự án, chúng ta cần khởi tạo nó. Dự án của bạn cần có khả năng giao tiếp với chuỗi khối. Hầu hết các thư viện Ethereum giao tiếp với một nút thông qua các lệnh gọi RPC. Để khởi tạo nhà cung cấp Web3 của chúng ta, chúng ta sẽ tạo một phiên bản Web3 bằng cách truyền URL của nhà cung cấp vào hàm khởi tạo. Nếu bạn có một nút hoặc phiên bản ganache đang chạy trên máy tính của mình (opens in a new tab), nó sẽ trông như thế này:
const web3 = new Web3("http://localhost:8545")
Nếu bạn muốn truy cập trực tiếp vào một nút được lưu trữ, bạn có thể tìm thấy các tùy chọn trên các nút dưới dạng dịch vụ (nodes as a service).
const web3 = new Web3("https://cloudflare-eth.com")
Để kiểm tra xem chúng ta đã cấu hình chính xác phiên bản Web3 của mình chưa, chúng ta sẽ thử truy xuất số khối mới nhất bằng cách sử dụng hàm getBlockNumber. Hàm này chấp nhận một callback làm tham số và trả về số khối dưới dạng số nguyên.
var Web3 = require("web3")
const web3 = new Web3("https://cloudflare-eth.com")
web3.eth.getBlockNumber(function (error, result) {
console.log(result)
})
Nếu bạn thực thi chương trình này, nó sẽ chỉ in ra số khối mới nhất: đỉnh của chuỗi khối. Bạn cũng có thể sử dụng các lệnh gọi hàm await/async để tránh việc lồng các callback trong mã của bạn:
async function getBlockNumber() {
const latestBlockNumber = await web3.eth.getBlockNumber()
console.log(latestBlockNumber)
return latestBlockNumber
}
getBlockNumber()
Bạn có thể xem tất cả các hàm có sẵn trên phiên bản Web3 trong tài liệu web3.js chính thức (opens in a new tab).
Hầu hết các thư viện Web3 đều là bất đồng bộ vì ở chế độ nền, thư viện thực hiện các lệnh gọi JSON-RPC tới nút và nút này sẽ gửi lại kết quả.
Nếu bạn đang làm việc trong trình duyệt, một số ví sẽ trực tiếp tiêm (inject) một phiên bản Web3 và bạn nên cố gắng sử dụng nó bất cứ khi nào có thể, đặc biệt nếu bạn dự định tương tác với địa chỉ Ethereum của người dùng để thực hiện giao dịch.
Dưới đây là đoạn mã để phát hiện xem ví MetaMask có khả dụng hay không và cố gắng kích hoạt nó nếu có. Sau đó, nó sẽ cho phép bạn đọc số dư của người dùng và cho phép họ xác thực các giao dịch mà bạn muốn họ thực hiện trên chuỗi khối Ethereum:
if (window.ethereum != null) {
state.web3 = new Web3(window.ethereum)
try {
// Yêu cầu quyền truy cập tài khoản nếu cần
await window.ethereum.enable()
// Các tài khoản hiện đã được hiển thị
} catch (error) {
// Người dùng đã từ chối quyền truy cập tài khoản...
}
}
Các giải pháp thay thế cho web3.js như Ethers.js (opens in a new tab) vẫn tồn tại và cũng được sử dụng phổ biến. Trong hướng dẫn tiếp theo, chúng ta sẽ tìm hiểu cách dễ dàng lắng nghe các khối mới đến trên chuỗi khối và xem chúng chứa những gì (opens in a new tab).