Web3 & DApp Development Fundamentals · บทเรียน

การเชื่อมต่อกับผู้ให้บริการ

RPC และกระเป๋าเงิน

บทเรียน 1 จาก 413 ขั้นตอน

การเชื่อมต่อกับผู้ให้บริการ เป็นบทเรียน Web3 & DApp Development Fundamentals ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web3 & DApp Development Fundamentals และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web3 & DApp Development Fundamentals มีบทเรียนทั้งหมด 4 บทเรียน

เชื่อมต่อกับบล็อกเชน

หากต้องการโต้ตอบกับ Ethereum จาก JavaScript คุณต้องมี ผู้ให้บริการ ซึ่งเป็นอ็อบเจ็กต์ที่เชื่อมต่อกับโหนดและช่วยให้อ่านข้อมูลเชนและส่งธุรกรรมได้

ไลบรารีอย่าง ethers.js และ web3.js จะห่อหุ้มโพรโทคอล JSON-RPC ที่โหนดใช้สื่อสาร

ผู้ให้บริการเทียบกับผู้ลงนาม

แนวคิดนามธรรมสำคัญสองอย่าง:

ผู้ให้บริการ — การเชื่อมต่อกับเชนแบบอ่านอย่างเดียว เช่น ยอดคงเหลือ บล็อก และการเรียกดู
ผู้ลงนาม — เก็บคีย์ส่วนตัวและสามารถ ลงนาม รวมถึงส่งธุรกรรมได้

คุณอ่านข้อมูลด้วยผู้ให้บริการ และเขียนข้อมูลด้วยผู้ลงนาม

ผู้ให้บริการ JSON-RPC

ผู้ให้บริการที่พบบ่อยที่สุดจะเชื่อมต่อกับปลายทาง RPC เช่น Infura, Alchemy หรือโหนดภายในเครื่อง:

const { ethers } = require("ethers");
const provider = new ethers.JsonRpcProvider(
  "https://mainnet.example-rpc.io/KEY"
);

เมื่อมีผู้ให้บริการนี้ คุณจะสอบถามข้อมูลสาธารณะของเชนได้ทันที

const { ethers } = require("ethers");
const provider = new ethers.JsonRpcProvider(
  "https://mainnet.example-rpc.io/KEY"
);

อ่านข้อมูลเครือข่าย

เมื่อเชื่อมต่อแล้ว ให้สอบถามสถานะพื้นฐานของเครือข่าย:

const network = await provider.getNetwork();
console.log(network.chainId);

const block = await provider.getBlockNumber();
console.log("Latest block:", block);

chainId ใช้ระบุว่าคุณอยู่บนเครือข่ายใด (1 = เครือข่ายหลัก)

const network = await provider.getNetwork();
console.log(network.chainId);

const block = await provider.getBlockNumber();
console.log("Latest block:", block);

ตรวจสอบยอดคงเหลือ

รับยอดคงเหลือ ETH ของบัญชีผ่านผู้ให้บริการ:

const balance = await provider.getBalance("0xAbc...");
console.log(ethers.formatEther(balance), "ETH");

ค่าดิบอยู่ในหน่วย wei (เป็น BigInt); formatEther จะแปลงค่าเป็นสตริง ETH ที่มนุษย์อ่านได้

const balance = await provider.getBalance("0xAbc...");
console.log(ethers.formatEther(balance), "ETH");

กระเป๋าเงินบนเบราว์เซอร์

ใน dApp บนเบราว์เซอร์ wallet (เช่น MetaMask) จะฉีด provider ไว้ที่ window.ethereum ให้ครอบด้วย BrowserProvider ดังนี้:

const provider = new ethers.BrowserProvider(window.ethereum);
await provider.send("eth_requestAccounts", []);

การเรียกใช้ eth_requestAccounts จะแจ้งให้ผู้ใช้เชื่อมต่อ

const provider = new ethers.BrowserProvider(window.ethereum);
await provider.send("eth_requestAccounts", []);

การรับ Signer

จาก provider ของเบราว์เซอร์ ให้รับ signer ของบัญชีที่เชื่อมต่ออยู่:

const signer = await provider.getSigner();
console.log("Connected as:", await signer.getAddress());

ขณะนี้ signer นี้สามารถส่งธุรกรรมที่ผู้ใช้อนุมัติผ่าน wallet ของตนได้

const signer = await provider.getSigner();
console.log("Connected as:", await signer.getAddress());

Wallet จากคีย์ส่วนตัว

บน backend คุณสามารถสร้าง signer จากคีย์ส่วนตัวได้ ให้เชื่อมต่อกับ provider เพื่อให้สามารถเผยแพร่ธุรกรรมได้:

const wallet = new ethers.Wallet(
  process.env.PRIVATE_KEY,
  provider
);

ห้ามเขียนคีย์ส่วนตัวตายตัวไว้ในโค้ด — ให้โหลดจากตัวแปรสภาพแวดล้อม

const wallet = new ethers.Wallet(
  process.env.PRIVATE_KEY,
  provider
);

การเปรียบเทียบกับ web3.js

web3.js เป็นทางเลือกแบบเก่ากว่า การเชื่อมต่อมีลักษณะดังนี้:

const { Web3 } = require("web3");
const web3 = new Web3("https://mainnet.example-rpc.io/KEY");
const block = await web3.eth.getBlockNumber();

แนวคิดต่าง ๆ มีความใกล้เคียงกัน แต่ ethers.js แยก provider และ signer ได้ชัดเจนกว่า

const { Web3 } = require("web3");
const web3 = new Web3("https://mainnet.example-rpc.io/KEY");
const block = await web3.eth.getBlockNumber();

การรักษาความลับให้ปลอดภัย

คีย์ RPC และคีย์ส่วนตัวเป็นข้อมูลอ่อนไหว:

เก็บไว้ใน .env และอย่าเก็บไว้ในระบบควบคุมซอร์สโค้ด
ใช้ provider แบบอ่านอย่างเดียวในโค้ดส่วนหน้า
คีย์ส่วนตัวควรอยู่เฉพาะบน backend ที่ปลอดภัยหรือใน wallet ของผู้ใช้เอง

Provider เริ่มต้นและ Provider สำรอง

ethers สามารถรวม backend หลายตัวเพื่อความน่าเชื่อถือได้ provider สำรองจะสอบถามปลายทางหลายแห่งและตรวจสอบให้ได้ผลลัพธ์ตรงกัน:

const provider = ethers.getDefaultProvider("mainnet", {
  alchemy: process.env.ALCHEMY_KEY,
  infura: process.env.INFURA_KEY,
});

หาก backend แห่งหนึ่งหยุดทำงาน แห่งอื่น ๆ จะช่วยให้แอปของคุณยังทำงานต่อได้

const provider = ethers.getDefaultProvider("mainnet", {
  alchemy: process.env.ALCHEMY_KEY,
  infura: process.env.INFURA_KEY,
});

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับ provider และ signer

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

คุณได้เรียนรู้วิธีเชื่อมต่อกับบล็อกเชนแล้ว

provider ใช้อ่านข้อมูลบนเชน ส่วน signer ใช้ส่งธุรกรรม
JsonRpcProvider เชื่อมต่อกับ URL ของ RPC ส่วน BrowserProvider ใช้ครอบ wallet ที่ถูกฉีดเข้ามา
getSigner คืนค่าบัญชีที่เชื่อมต่ออยู่ ส่วน new Wallet(key, provider) ใช้ลงนามบน backend
ค่าต่าง ๆ อยู่ในหน่วย wei ให้ใช้ formatEther เพื่อแสดงผล
เก็บคีย์ RPC และคีย์ส่วนตัวไว้ใน .env และอย่าใส่ไว้ในโค้ด

เริ่มต้นได้ฟรี

เรียนรู้ Web3 & DApp Development Fundamentals ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 29
บทเรียน: 105

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การเชื่อมต่อกับผู้ให้บริการ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเชื่อมต่อกับผู้ให้บริการ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web3 & DApp Development Fundamentals ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web3 & DApp Development Fundamentals มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเชื่อมต่อกับผู้ให้บริการ”

RPC และกระเป๋าเงิน คุณปฏิบัติ Web3 & DApp Development Fundamentals ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web3 & DApp Development Fundamentals หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web3 & DApp Development Fundamentals บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การเชื่อมต่อกับผู้ให้บริการ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Web3 & DApp Development Fundamentals นี้ได้ไหม

ได้ บทเรียน Web3 & DApp Development Fundamentals ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Web3 & DApp Development Fundamentals