Summarize this content to 400 words in Persian Lang
ردیاب رمزنگاری بلادرنگ با استفاده از Webhooks با React، Next.js و Node.js
در این مقاله به بررسی ساخت یک ردیاب رمزنگاری با استفاده از وب هوک با یک Frontend ساخته شده با React، Next.js که به Backend متصل است، می پردازیم. در حال حاضر به طور معمول یک فرانت اند کسی است که همه داده ها را می کشد، اما با سوکت های وب می توانیم داده ها را از یک باطن به سمت جلو هدایت کنیم.
Webhooks می‌تواند در هر زمانی که نیاز به به‌روزرسانی‌های هم‌زمان در صفحه اصلی خود داشته باشید، مفید باشد. از آنجایی که قیمت ارزهای دیجیتال در زمان واقعی تغییر می کند، این یک مورد استفاده عالی برای آن است. می‌توانید داشبوردی بی‌درنگ داشته باشید که به سادگی رمزارزها را در زمان واقعی و بدون تازه کردن ردیابی می‌کند.
پیش نیازها
لینک رپو
نمای کلی کد زیر قسمت اصلی کد را پوشش می‌دهد، اما برای اجرای کل پروژه، توصیه می‌کنم از git clone در پیوند مخزن زیر استفاده کنید.
https://github.com/EMChamp/cryptoracker-reactnode
نمای کلی کد – Frontend
این بررسی اجمالی کد به بخش‌های اصلی کد نگاه می‌کند و ایده‌ای از مسئولیت‌های آنها ارائه می‌کند.
frontend/App.js صفحه اصلی برنامه Next.js/React ما است که در آن به طور فعال مجموعه ای از نمادهای ارزهای دیجیتال را ردیابی می کند. ما همچنین یک راه اندازی اتصال وب سوکت به باطن خود داریم که در آن به طور فعال به به روز رسانی قیمت گوش می دهیم.
ما همچنین روشی برای اضافه کردن نمادهای جدید ارزهای دیجیتال برای ردیابی داریم. به طور پیش فرض ما فقط بیت کوین (BTC) و اتریوم کلاسیک (ETC) را ردیابی می کنیم.
import React, { useEffect, useState } from ‘react’;
import axios from ‘axios’;
import ‘./App.css’;
function App() {
// Track symbols and prices
const [prices, setPrices] = useState({});
const [newSymbol, setNewSymbol] = useState(”);
const [trackingSymbols, setTrackingSymbols] = useState([‘BTC’, ‘ETC’]);
// Listen for new webhook events from backend and update prices accordingly.
useEffect(() => {
const ws = new WebSocket(‘ws://localhost:5000’);
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
setPrices(data);
};
return () => ws.close();
}, []);
// Handles adding new symbols to the tracking list
const addSymbol = () => {
if (newSymbol && !trackingSymbols.includes(newSymbol.toUpperCase())) {
axios.post(‘http://localhost:5000/add-symbol’, { symbol: newSymbol })
.then(response => {
setTrackingSymbols(response.data.symbols);
setNewSymbol(”);
})
.catch(error => {
console.error(‘Error adding symbol:’, error.response.data.message);
});
}
};
// UI/Frontend of the page
return (
setNewSymbol(e.target.value)}
/>
Add Symbol
{trackingSymbols.map((symbol) => (
{symbol}
{prices[symbol] ? `$${prices[symbol].toFixed(2)}` : ‘Loading…’}
))}
© 2024 CryptoTracker. All rights reserved.
);
}
export default App;
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
frontend/index.js مسئول رندر کردن مؤلفه App.js' App بر روی مرورگر است.
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import App from ‘./App’;
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
frontend/App.css HTML صفحه بالا را با ظاهری تمیز و مدرن استایل می دهد.
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.App {
text-align: center;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.App-header {
background-color: #1a1a1a;
color: white;
padding: 20px;
text-align: center;
font-size: 1.5em;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.symbol-input {
margin: 20px auto;
display: flex;
justify-content: center;
}
.symbol-input input {
padding: 10px;
font-size: 1em;
width: 250px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.symbol-input button {
padding: 10px 20px;
font-size: 1em;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.symbol-input button:hover {
background-color: #0056b3;
}
.symbol-tracker {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.symbol-card {
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
width: 200px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.symbol-card h2 {
margin: 0;
font-size: 1.2em;
}
.symbol-card p {
margin: 10px 0 0;
font-size: 1.1em;
color: #333;
}
.symbol-card:hover {
transform: translateY(-5px);
}
.App-footer {
background-color: #1a1a1a;
color: white;
padding: 10px;
text-align: center;
margin-top: auto;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
بررسی اجمالی کد – Backend
backend/server.js کد سرور باطن ما است. تنظیم شده است تا API CoinMarketCap را هر 10 ثانیه برای تغییرات قیمت مورد نظرسنجی قرار دهد و سپس آن تغییرات را از طریق وب‌سوکت به هر مشتری فرانت‌اند متصل انجام دهد.
نقطه پایان /add-symbol درخواست‌هایی را از frontend برای ردیابی نمادهای جدید دریافت می‌کند و هنگامی که تماس API بعدی را برای تغییرات قیمت با API CoinMarketCap انجام می‌دهیم، آن را به لیست نمادهای ردیابی‌شده فعلی اضافه می‌کند.
ما از کتابخانه websocket برای انجام کارهای سنگین مدیریت اتصالات وب سوکت استفاده می کنیم، جایی که به طور فعال به هر گونه اتصال HTTPS که باید به وب سوکت ارتقا داده شود گوش می دهد.
const express = require(‘express’);
const axios = require(‘axios’);
const WebSocket = require(‘ws’);
const cors = require(‘cors’);
const app = express();
app.use(cors());
const PORT = 5000;
const API_KEY = ”; // Replace with your CoinMarketCap API key
const INTERVAL = 10000; // Poll every 10 seconds
// List of cryptocurrencies to track
let symbols = [‘BTC’, ‘ETC’];
// Create a WebSocket server
const wss = new WebSocket.Server({ noServer: true });
// Function to fetch cryptocurrency prices
const fetchPrices = async () => {
try {
const response = await axios.get(‘https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest’, {
params: {
symbol: symbols.join(‘,’),
convert: ‘USD’
},
headers: {
‘X-CMC_PRO_API_KEY’: API_KEY
}
});
const prices = symbols.reduce((acc, symbol) => {
acc[symbol] = response.data.data[symbol].quote.USD.price;
return acc;
}, {});
return prices;
} catch (error) {
console.error(‘Error fetching data from CoinMarketCap:’, error);
return null;
}
};
// Broadcast prices to all clients
const broadcastPrices = (prices) => {
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(prices));
}
});
};
// Periodically poll CoinMarketCap API and broadcast prices
setInterval(async () => {
const prices = await fetchPrices();
if (prices) {
broadcastPrices(prices);
}
}, INTERVAL);
// Handle HTTP and WebSocket connections
const server = app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
server.on(‘upgrade’, (request, socket, head) => {
wss.handleUpgrade(request, socket, head, (ws) => {
wss.emit(‘connection’, ws, request);
});
});
// Endpoint for tracking new symbols
app.post(‘/add-symbol’, (req, res) => {
const { symbol } = req.body;
if (!symbols.includes(symbol.toUpperCase())) {
symbols.push(symbol.toUpperCase());
res.status(200).send({ success: true, symbols });
} else {
res.status(400).send({ success: false, message: ‘Symbol already being tracked’ });
}
});
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در حال اجرای برنامه
نمای کلی کد به بخش‌های اصلی کد می‌پردازد، اما کامل نیست، بنابراین ما همچنان توصیه می‌کنیم کد را از مخزن GitHub خود شبیه‌سازی کنید تا آن را به صورت محلی اجرا کنید.
ابتدا باید تعویض کنید API_KEY با کلید CoinMarketCap API خود.
سپس می‌توانیم دستورات زیر را اجرا کنیم که به هر بخش از برنامه می‌روند، بسته‌های آنها را نصب می‌کنند و سپس سرور را راه‌اندازی می‌کنند.
cd frontend
npm install
npm start
cd ../backend
npm install
npm start
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
اکنون باید سرور frontend خود را در http://localhost:3000 و سرور backend را در http://localhost:5000 اجرا کنیم.
با رفتن به صفحه اصلی ما در http://localhost:3000 به ما اجازه می دهد به این صفحه دسترسی پیدا کنیم که در آن می توانید نمادهای رمزارز را اضافه کنید و سپس به روز رسانی برنامه را در زمان واقعی تماشا کنید.
ردیاب رمزنگاری بلادرنگ با استفاده از Webhooks با React، Next.js و Node.js
در این مقاله به بررسی ساخت یک ردیاب رمزنگاری با استفاده از وب هوک با یک Frontend ساخته شده با React، Next.js که به Backend متصل است، می پردازیم. در حال حاضر به طور معمول یک فرانت اند کسی است که همه داده ها را می کشد، اما با سوکت های وب می توانیم داده ها را از یک باطن به سمت جلو هدایت کنیم.
Webhooks می‌تواند در هر زمانی که نیاز به به‌روزرسانی‌های هم‌زمان در صفحه اصلی خود داشته باشید، مفید باشد. از آنجایی که قیمت ارزهای دیجیتال در زمان واقعی تغییر می کند، این یک مورد استفاده عالی برای آن است. می‌توانید داشبوردی بی‌درنگ داشته باشید که به سادگی رمزارزها را در زمان واقعی و بدون تازه کردن ردیابی می‌کند.
پیش نیازها
لینک رپو
نمای کلی کد زیر قسمت اصلی کد را پوشش می‌دهد، اما برای اجرای کل پروژه، توصیه می‌کنم از git clone در پیوند مخزن زیر استفاده کنید.
https://github.com/EMChamp/cryptoracker-reactnode
نمای کلی کد – Frontend
این بررسی اجمالی کد به بخش‌های اصلی کد نگاه می‌کند و ایده‌ای از مسئولیت‌های آنها ارائه می‌کند.
frontend/App.js صفحه اصلی برنامه Next.js/React ما است که در آن به طور فعال مجموعه ای از نمادهای ارزهای دیجیتال را ردیابی می کند. ما همچنین یک راه اندازی اتصال وب سوکت به باطن خود داریم که در آن به طور فعال به به روز رسانی قیمت گوش می دهیم.
ما همچنین روشی برای اضافه کردن نمادهای جدید ارزهای دیجیتال برای ردیابی داریم. به طور پیش فرض ما فقط بیت کوین (BTC) و اتریوم کلاسیک (ETC) را ردیابی می کنیم.
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';
function App() {
// Track symbols and prices
const [prices, setPrices] = useState({});
const [newSymbol, setNewSymbol] = useState('');
const [trackingSymbols, setTrackingSymbols] = useState(['BTC', 'ETC']);
// Listen for new webhook events from backend and update prices accordingly.
useEffect(() => {
const ws = new WebSocket('ws://localhost:5000');
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
setPrices(data);
};
return () => ws.close();
}, []);
// Handles adding new symbols to the tracking list
const addSymbol = () => {
if (newSymbol && !trackingSymbols.includes(newSymbol.toUpperCase())) {
axios.post('http://localhost:5000/add-symbol', { symbol: newSymbol })
.then(response => {
setTrackingSymbols(response.data.symbols);
setNewSymbol('');
})
.catch(error => {
console.error('Error adding symbol:', error.response.data.message);
});
}
};
// UI/Frontend of the page
return (
setNewSymbol(e.target.value)}
/>
{trackingSymbols.map((symbol) => (
{symbol}
{prices[symbol] ? `$${prices[symbol].toFixed(2)}` : 'Loading...'}
))}
);
}
export default App;
frontend/index.js مسئول رندر کردن مؤلفه App.js' App بر روی مرورگر است.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
frontend/App.css HTML صفحه بالا را با ظاهری تمیز و مدرن استایل می دهد.
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.App {
text-align: center;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.App-header {
background-color: #1a1a1a;
color: white;
padding: 20px;
text-align: center;
font-size: 1.5em;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.symbol-input {
margin: 20px auto;
display: flex;
justify-content: center;
}
.symbol-input input {
padding: 10px;
font-size: 1em;
width: 250px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.symbol-input button {
padding: 10px 20px;
font-size: 1em;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.symbol-input button:hover {
background-color: #0056b3;
}
.symbol-tracker {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.symbol-card {
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
width: 200px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.symbol-card h2 {
margin: 0;
font-size: 1.2em;
}
.symbol-card p {
margin: 10px 0 0;
font-size: 1.1em;
color: #333;
}
.symbol-card:hover {
transform: translateY(-5px);
}
.App-footer {
background-color: #1a1a1a;
color: white;
padding: 10px;
text-align: center;
margin-top: auto;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
بررسی اجمالی کد – Backend
backend/server.js کد سرور باطن ما است. تنظیم شده است تا API CoinMarketCap را هر 10 ثانیه برای تغییرات قیمت مورد نظرسنجی قرار دهد و سپس آن تغییرات را از طریق وب‌سوکت به هر مشتری فرانت‌اند متصل انجام دهد.
نقطه پایان /add-symbol درخواست‌هایی را از frontend برای ردیابی نمادهای جدید دریافت می‌کند و هنگامی که تماس API بعدی را برای تغییرات قیمت با API CoinMarketCap انجام می‌دهیم، آن را به لیست نمادهای ردیابی‌شده فعلی اضافه می‌کند.
ما از کتابخانه websocket برای انجام کارهای سنگین مدیریت اتصالات وب سوکت استفاده می کنیم، جایی که به طور فعال به هر گونه اتصال HTTPS که باید به وب سوکت ارتقا داده شود گوش می دهد.
const express = require('express');
const axios = require('axios');
const WebSocket = require('ws');
const cors = require('cors');
const app = express();
app.use(cors());
const PORT = 5000;
const API_KEY = ''; // Replace with your CoinMarketCap API key
const INTERVAL = 10000; // Poll every 10 seconds
// List of cryptocurrencies to track
let symbols = ['BTC', 'ETC'];
// Create a WebSocket server
const wss = new WebSocket.Server({ noServer: true });
// Function to fetch cryptocurrency prices
const fetchPrices = async () => {
try {
const response = await axios.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest', {
params: {
symbol: symbols.join(','),
convert: 'USD'
},
headers: {
'X-CMC_PRO_API_KEY': API_KEY
}
});
const prices = symbols.reduce((acc, symbol) => {
acc[symbol] = response.data.data[symbol].quote.USD.price;
return acc;
}, {});
return prices;
} catch (error) {
console.error('Error fetching data from CoinMarketCap:', error);
return null;
}
};
// Broadcast prices to all clients
const broadcastPrices = (prices) => {
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(prices));
}
});
};
// Periodically poll CoinMarketCap API and broadcast prices
setInterval(async () => {
const prices = await fetchPrices();
if (prices) {
broadcastPrices(prices);
}
}, INTERVAL);
// Handle HTTP and WebSocket connections
const server = app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
server.on('upgrade', (request, socket, head) => {
wss.handleUpgrade(request, socket, head, (ws) => {
wss.emit('connection', ws, request);
});
});
// Endpoint for tracking new symbols
app.post('/add-symbol', (req, res) => {
const { symbol } = req.body;
if (!symbols.includes(symbol.toUpperCase())) {
symbols.push(symbol.toUpperCase());
res.status(200).send({ success: true, symbols });
} else {
res.status(400).send({ success: false, message: 'Symbol already being tracked' });
}
});
در حال اجرای برنامه
نمای کلی کد به بخش‌های اصلی کد می‌پردازد، اما کامل نیست، بنابراین ما همچنان توصیه می‌کنیم کد را از مخزن GitHub خود شبیه‌سازی کنید تا آن را به صورت محلی اجرا کنید.
ابتدا باید تعویض کنید API_KEY با کلید CoinMarketCap API خود.
سپس می‌توانیم دستورات زیر را اجرا کنیم که به هر بخش از برنامه می‌روند، بسته‌های آنها را نصب می‌کنند و سپس سرور را راه‌اندازی می‌کنند.
cd frontend
npm install
npm start
cd ../backend
npm install
npm start
اکنون باید سرور frontend خود را در http://localhost:3000 و سرور backend را در http://localhost:5000 اجرا کنیم.
با رفتن به صفحه اصلی ما در http://localhost:3000 به ما اجازه می دهد به این صفحه دسترسی پیدا کنیم که در آن می توانید نمادهای رمزارز را اضافه کنید و سپس به روز رسانی برنامه را در زمان واقعی تماشا کنید.
