不再错过任何一个区块！用Node.js + WebSocket轻松实现区块链实时监控

登录 · 发表于 2025-10-10 04:21:33

前言

随着区块链技能的发展，实时监控

区块链网络中的区块和生意业务信息变得越来越紧张。无论是开辟去中心化应用（DApp），照旧构建区块链欣赏器，实时获取链上信息对于确保数据的透明和安全都是关键。在这篇博客中，我们将先容怎样利用 Node.js 团结 ethers.js 库，实现对区块链私有链的区块事故监听，并通过 WebSocket 技能将这些信息实时推送到前端页面举行展示。
本文将带你一步步实现一个轻便的区块链监控

应用，实时展示最新天生的区块以及此中的生意业务。通过这个项目，你不光能学会怎样与区块链节点交互，还能相识怎样利用 WebSocket 技能在前后端之间创建实时通讯。

一、WebSocket是什么？

WebSocket 是一种全双工通讯协议，答应客户端和服务器之间创建一连的、双向的毗连，可以大概举行实时数据的交换。与传统的 HTTP 协议差异，WebSocket 在最初利用 HTTP 握手创建毗连后，毗连就会保持打开状态，直到客户端或服务器自动关闭。这种特性使得 WebSocket 特殊得当须要频仍数据更新的场景，好比在线谈天、实时关照、股票行情、多人在线游戏等。
WebSocket的特点：

全双工通讯：客户端和服务器可以随时相互发送消息，而不须要客户端先发起哀求。
低延长：由于毗连保持生动，数据可以快速传输，镌汰了 HTTP 协议的重复握手、创建毗连的开销。
节省带宽：WebSocket 只须要一次握手，后续的数据传输不须要像 HTTP 那样每次附带大量的头部信息。

WebSocket的工作原理：

握手：客户端通过 HTTP 发起握手哀求，服务器吸收到哀求并返回握手应答，确认利用 WebSocket 毗连。
数据传输：握手完成后，毗连一连打开，两边可以随时发送和吸收数据，而不须要重新创建毗连。
关闭毗连：当通讯竣事时，客户端或服务器可以发起关闭哀求，断开毗连。

WebSocket应用场景：

在线游戏：支持实时游戏状态的更新。
实时股票行情：提供秒级股票代价更新。
在线谈天：实现消息的即时发送和吸收。
实时协作：支持多人同时编辑文档或绘图。

在 Node.js 环境中，可以利用如 ws 模块来搭建 WebSocket 服务器和客户端。
在本项目中，我们利用 WebSocket 来创建服务器与前端的毗连，每当区块链上有新的区块天生时，后端会通过 WebSocket 将区块信息推送给前端，前端收到后更新界面。

二、项目布局

项目的文件布局如下：

三、代码实现

1. 后端实现

在后端部门，我们利用 ethers.js 库毗连到当地运行的 Geth 私有链（如果不知道怎样搭建当地私链的可以去以往搭建博客🚪检察搭建教程），启动之后如许就可以了

通过监听新区块的天生，我们将区块信息通过 WebSocket 实时发送到前端。server.js 的实现如下：

// server.js
const { ethers, JsonRpcProvider } = require('ethers');
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
// 连接到 Geth 私有链
const provider = new ethers.JsonRpcProvider('http://127.0.0.1:8888');
// 监听新块
provider.on('block', async (blockNumber) => {
console.log(`New Block: ${blockNumber}`);
const block = await provider.getBlock(blockNumber, true);
console.log('block===:', block);
console.log(block.transactions);
const data = {
blockNumber: block.number,
blockHash: block.hash,
timestamp: block.timestamp,
transactions: block.transactions.map(tx => ({
hash: tx,
}))
};
console.log('data===:', data);
// 通过 WebSocket 发送数据到客户端
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(data));
}
});
});
// 配置静态文件夹
app.use(express.static('public'));
// 启动服务器
server.listen(4000, () => {
console.log('Server is listening on port 4000');
});

复制代码

代码解读

依赖库引入：我们利用 ethers.js 来毗连 Geth 节点，利用 express 作为 HTTP 服务器，ws 库用于创建 WebSocket 服务。
毗连 Geth 节点：利用 ethers.JsonRpcProvider 来毗连 Geth 节点。在此示例中，节点运行在 http://127.0.0.1:8888，即当地的私有链。
监听区块事故：通过 provider.on('block', async (blockNumber) => {...})，每当有新块天生时，该函数会被触发。我们获取区块详细信息，并提取区块哈希、区块高度和生意业务哈希等数据。
WebSocket 数据传输：每当区块信息更新时，数据会通过 WebSocket 发送给全部毗连的客户端。
服务器启动：我们将 HTTP 服务器监听在 4000 端口，并通过 express.static 公开 public 文件夹中的静态文件。

2. 前端实现

前端部门非常轻便，紧张用于展示最新的区块信息和生意业务哈希。index.html 文件的实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockchain Monitor</title>
</head>
<body>
<h1>Blockchain 监控</h1>
<div id="output"></div>
<script>
const ws = new WebSocket('ws://localhost:4000');
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
const output = document.getElementById('output');
const blockInfo = `
<h2>区块高度: ${data.blockNumber}</h2>
<h3>区块Hash: ${data.blockHash}</h3>
<h3>timestamp: ${data.timestamp}</h3>
<ul>
${data.transactions.map(tx => ` <li> <strong>Transaction Hash:</strong> ${tx.hash}<br> </li> `).join('')}
</ul>
`;
output.innerHTML = blockInfo;
};
ws.onopen = () => {
console.log('Connected to WebSocket server');
};
ws.onclose = () => {
console.log('Disconnected from WebSocket server');
};
</script>
</body>
</html>

复制代码

代码解读

WebSocket 毗连：前端通过 new WebSocket('ws://localhost:4000') 毗连到后端的 WebSocket 服务器。
处理处罚区块数据：当收到来自服务器的区块数据时，通过 ws.onmessage 事故分析数据并更新页面。
页面展示：页面表现最新区块的高度、区块哈希、时间戳以及该区块中的全部生意业务哈希。

四、启动项目

启动 Geth 私有链：起首须要启动 Geth 私有链，并确保其监听在 http://127.0.0.1:8888 上
安装依赖：在项目根目次下运行以下下令安装所需的依赖库：

npm install ethers express ws

复制代码

启动服务器：运行以下下令启动后端服务器：

node server.js

复制代码

打开欣赏器：在vscode打开index.html，右键点击Open In Default Browser

你将看到最新的区块信息和生意业务哈希，比方：

通过这个示例，你可以进一步扩展功能，好比展示更多的区块详细信息、过滤特定生意业务、监控智能合约事故，大概是将区块数据在provider.on('block')事故中举行存储 数据库的利用等，构建出功能丰富的区块链应用。

总结

通过本文，我们详细先容了怎样利用 Node.js 和 ethers.js 库实现对 Geth 私有链的区块事故监听，并通过 WebSocket 技能将区块信息实时推送到前端。我们从 WebSocket 的底子概念讲起，展示了怎样搭建一个全双工通讯的实时体系，终极实现了一个区块链监控应用，可以大概实时展示最新天生的区块和生意业务信息。本文还包罗了完备的后端与前端代码示例，资助开辟者把握从监听区块事故到通过 WebSocket 举行前后端实时通讯的整个过程。渴望这篇文章能资助你在区块链应用开辟中实现更多实时数据交互的功能。如果你有任何疑问或发起，欢迎在品评区留言讨论🌹

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

不再错过任何一个区块！用Node.js + WebSocket轻松实现区块链实时监控

本帖子中包含更多资源