معرفی Adashta: نمودار زمان واقعی سمت سرور و موارد دیگر

ما بسیار هیجان زده هستیم که راه اندازی Adashta را اعلام کنیم، یک SDK پیشرفته که برای ساده سازی ارتباطات بلادرنگ برای توسعه دهندگان طراحی شده است. با Adashta، می‌توانید روی منطق اصلی کسب‌وکارتان تمرکز کنید، در حالی که ما پیچیدگی‌های جریان داده در زمان واقعی را مدیریت می‌کنیم. هدف ما ادغام قابلیت های بلادرنگ در برنامه های شما آسان تر از همیشه است.

چرا آداستا؟

در چشم انداز همیشه در حال تحول توسعه وب، ارتباطات بلادرنگ به یک جزء حیاتی برای ارائه تجربیات کاربر پویا و پاسخگو تبدیل شده است. چه در حال ساخت یک داشبورد داده زنده، یک ابزار مشارکتی یا یک سیستم اعلان بی‌درنگ هستید، Adashta شما را تحت پوشش قرار می‌دهد.

نمودارهای آداشتا

یکی از ویژگی های برجسته Adashta نمودارهای Adashta است. یک راه حل نمودار سمت سرور که شما را قادر می سازد تا نمودارهای بلادرنگ و بدون کدنویسی frontend ایجاد کنید. با نمودارهای Adashta، می توانید:

• انواع نمودارهای مختلف از جمله نمودارهای خطی، میله ای و دایره ای را ایجاد کنید.
• نمودارها را در زمان واقعی با داده های جدید از سرور به روز کنید.

شروع شدن

نصب و راه اندازی سمت سرور

برای شروع کار با Adashta در سمت سرور، این مراحل ساده را دنبال کنید:

1. نصب Adashta از طریق npm:

   npm install adashta
   

2. خطای اولیه:

   const { Adashta } = require('adashta');
   
   const adashta = new Adashta({
     adashtaHost: 'localhost',
     adashtaPort: '3011'
   });
   
   const loadAdashta = async () => {
     adashta.on('connection', async (clientId) => {
       console.log('Client connected', clientId);
     });
   
     adashta.on('disconnection', async (clientId) => {
       console.log('Client disconnected', clientId);
     });
   };
   
   loadAdashta();
   

یکپارچه سازی سمت مشتری

1. Adashta SDK را در HTML خود قرار دهید:

   "module">
     import { Adashta } from 'https://cdn.skypack.dev/adashta-js';
   
   

2. Adashta را در مشتری راه اندازی کنید:

   const adashta = new Adashta({
     adashtaHost: 'localhost',
     adashtaPort: 3011
   });
   

هیچ پیکربندی اضافی در سمت مشتری مورد نیاز نیست. Adashta به طور خودکار به سرور متصل می شود و ارتباط بلادرنگ بین سرور و مشتری را مدیریت می کند.

ایجاد نمودارهای بلادرنگ

ووهو همه شما با Adashta در سمت سرور و مشتری تنظیم شده اید. اکنون، بیایید ببینیم چگونه می توانید نمودارهای بلادرنگ با نمودارهای Adashta ایجاد کنید.

1. نمودار خود را تعریف کنید:

   const chart = {
     chartId: 'dummy-company-stock-chart',
     querySelector: '.chart',
     chartData: {
       type: 'line',
       data: {
         labels: ['Day 1'],
         datasets: [{
           label: 'Dummy Company Stock Price',
           data: [350],
           borderWidth: 2
         }]
       },
       options: {
         scales: {
           y: {
             title: {
               display: true,
               text: 'Share Price ($)'
             }
           },
           x: {
             title: {
               display: true,
               text: 'Days'
             },
             ticks: {
               autoSkip: true,
               maxTicksLimit: 10,
             }
           }
         }
       }
     }
   };
   

2. ارسال داده های نمودار به مشتری:

   await adashta.charts().produce(clientId, chart);
   

3. به روز رسانی داده های نمودار:

   chart.chartData.data.labels.push(`Day ${days}`);
   chart.chartData.data.datasets[0].data.push(getRandomInt(300, 800));
   await adashta.charts().produce(clientId, chart);
   

4. مثال کامل:

   const { Adashta } = require('adashta');
   
   const adashta = new Adashta({
     adashtaHost: 'localhost',
     adashtaPort: '3011'
   });
   
   const loadAdashta = async () => {
     const clientIdInterval = {};
     adashta.on('connection', async (clientId) => {
       const chart = {
         chartId: 'dummy-company-stock-chart',
         querySelector: '.chart',
         chartData: {
           type: 'line',
           data: {
             labels: ['Day 1'],
             datasets: [{
               label: 'Dummy Company Stock Price',
               data: [350],
               borderWidth: 2
             }]
           },
           options: {
             scales: {
               y: {
                 title: {
                   display: true,
                   text: 'Share Price ($)'
                 }
               },
               x: {
                 title: {
                   display: true,
                   text: 'Days'
                 },
                 ticks: {
                   autoSkip: true,
                   maxTicksLimit: 10,
                 }
               }
             }
           }
         }
       };
   
       await adashta.charts().produce(clientId, chart);
         let days = 2;
         clientIdInterval[clientId] = setInterval(async () => {
           chart.chartData.data.labels.push(`Day ${days}`);
           chart.chartData.data.datasets[0].data.push(getRandomInt(300, 800));
           await adashta.charts().produce(clientId, chart);
           days++;
         }, 2000);
     });
   
     adashta.on('disconnection', async (clientId) => {
       clearInterval(clientIdInterval[clientId]);
       delete clientIdInterval[clientId];
       console.log('Client disconnected', clientId);
     });
   };
   
   function getRandomInt(min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
   }
   
   loadAdashta();
   

5. سرور Adashta خود را اجرا کنید:

   node index.js
   

6. فایل HTML خود را در یک مرورگر باز کنید: برای ارائه فایل HTML به سرور HTTP نیاز است. شما می توانید استفاده کنید http-server یا هر سرور HTTP دیگری به انتخاب شما.

با Adashta، ادغام نمودارهای بلادرنگ در برنامه شما هرگز آسان تر نبوده است. می‌توانید نمودارها را به‌صورت پویا با داده‌های جدید به‌روزرسانی کنید و اطلاعات به‌روز را در اختیار کاربران قرار دهید.

به انجمن آداشتا بپیوندید

Adashta یک پروژه منبع باز است و ما از مشارکت و بازخورد جامعه توسعه دهندگان استقبال می کنیم. اگر سؤال یا پیشنهادی دارید، لطفاً با ما در hello@adashta.co تماس بگیرید. شما همچنین می توانید با بازدید از مخزن GitHub ما در پروژه مشارکت داشته باشید.

ما خوشحالیم که ببینیم چگونه از Adashta برای ایجاد تجربیات جذاب و در زمان واقعی برای کاربران خود استفاده می کنید. با تشکر از شما برای انتخاب Adashta، و کد نویسی مبارک!

نظرات و تجربیات خود را در نظرات زیر با آداستا به اشتراک بگذارید. ما مشتاقیم تا بشنویم که چگونه Adashta در پروژه های شما تفاوت ایجاد می کند!