در آن RyuJIT به عنوان JIT Compiler جدید پیش فرض سیستمهای 64 بیتی قرار داده شدهاست. همچنین 150 API جدید به همراه به روز رسانی 50 API موجود در آن پیش بینی شدهاند. تغییرات صورت گرفته
یکی از نکات امنیتی که استاندارد Owasp بررسی مینماید هدر X-Content-Type-Options است که جهت جلوگیری از حملات از طریق فایلهای نامرتبط میباشد. در این رخنه ممکن است فایلی که مرورگر دریافت میکند با آنچه که وب سایت ما آن را میشناسد متفاوت باشد. به عنوان مثال یک فایل اسکریپت که به عنوان یک فایل استایل معرفی میگردد ولی قابلیت اجرای کدهای آن در مرورگر امکان پذیر است؛ به این نوع حملات MIME Sniffing میگویند. در یکی از سایتهایی که در حال حاضر در حال توسعه آن هستیم بخشی از گزارشها با استفاده از ابزار FastReport ایجاد شده بود و با توجه به اینکه در این ابزار از فایلهای axd استفاده میگردید و مرورگر نوع دیتای برگشتی و MimeType معرفی شده را همخوان نمیدانست، از نمایش و بارگذاری آن ممانعت به عمل آورده و در نتیجه فایل گزارش دیده نمیشد. در این مقاله قصد داریم به معرفی این نوع حمله، روش جلوگیری از آن و همچنین رفع محدودیت پیش آمده را بررسی کرده تا در موارد مشابه از آن استفاده نماییم.
Mime Sniffing
زمانیکه مرورگر در هدر(پاسخ) Response، نوع محتوای ارسال شده، Content-Type را دریافت نکند، یا مرورگر متوجه مغایرتی در آن شود، این نوع رفتار را Mime Sniffing شناسایی میکند. نحوه این شناساییها در هر مرورگری میتواند متفاوت باشد؛ ولی عموما بر اساس type ارسالی و پسوند مورد نظر میباشد. در بعضی از موارد نیز خواندن بایتهای ابتدایی یک فایل نیز میتواند نشان دهد که محتوای ارسالی واقعا چیست. به عنوان مثال برای فایلهایی با پسوند Gif، الگوی بایتهای ابتدایی شامل 47 49 46 38 39 میباشد؛ ولی از آنجا که در همه فایلها، بایتهای ابتدایی الگوی یکسانی ندارند، پس نمیتوان به این روش نیز بسنده کرد.
روش اینکه به مروگر بگوییم جلوی این نوع حملات را بگیرد و در صورت شناسایی Sniffing از اجرای آن سر باز بزند، استفاده از هدر X-Content-Type-Options میباشد که نحوه افزودن آن در فایل web.config به شکل زیر است:
<httpProtocol> <customHeaders> ... <remove name="X-Content-Type-Options"/> <add name="X-Content-Type-Options" value="nosniff" /> .. </customHeaders> </httpProtocol>
در پروژه ما به دلیل اینکه بخشی از گزارشها با استفاده از FastReport طراحی شده بود این مورد برای ما ایجاد مشکل میکرد و در گزارش نمایش داده نمیشد و در کنسول پیامهایی به شکل زیر دریافت میکردیم:
Refused to execute script from 'https://localhost:44377/WebResource.axd?d=xxx' because its MIME type ('text/js') is not executable, and strict MIME type checking is enabled.
با نگاهی به Response دریافتی نیز میتوان بازگشت هدر امنیتی X-Content-Type-Options را نیز مشاهده نمود:
پس باید این هدر را برای بعضی از آدرسها که میتوانند دچار مشکلات اجرایی گردند حذف کرده و برای مابقی بخشها همچنان این هدر فعال باشد؛ پس با افزودن کد زیر به web.config، هدر مورد نظر را برای این نوع فایل حذف میکنیم:
<location path="WebResource.axd" > <system.webServer> <httpProtocol> <customHeaders> <remove name="X-Content-Type-Options" /> </customHeaders> </httpProtocol> </system.webServer> </location>
نتیجه آن را میتوانید در صفحه ذیل برای همان درخواست و پاسخ قبلی نیز مشاهده نمایید:
زیباتر کد بنویسیم
داشتن آگاهی در مورد ساختارهای دادهها، الگوریتمها و یا عملگرهای بیتی بسیار عالی است و یا تسلط بر نحوهی کارکرد ابزارهایی مانند SharePoint و امثال آن این روزها ضروری است. اما باید در نظر داشت، کدی که امروز تهیه میشود شاید فردا یا ماه دیگر یا چند سال بعد نیاز به تغییر داشته باشد، بنابراین دانش زیبا نوشتن یک قطعه کد که خواندن آنرا سادهتر میکند و در آینده افرادی که از آن نگهداری خواهند کرد زیاد "زجر" نخواهند کشید، نیز ضروری میباشد. (اگر کامنتهای سایت را خوانده باشید یکی از دوستان پیغام گذاشته بود، اگر به من بگویند یک میلیون بگیرید و برنامه فعلی را توسعه دهید یا رفع اشکال کنید، حاضرم 10 هزارتومان بگیرم و آنرا از صفر بنویسم! متاسفانه این یک واقعیت تلخ است که ناشی از عدم خوانا بودن کدهای نوشته شده میباشد.)
در ادامه یک سری از اصول زیبا نویسی کدها را بررسی خواهیم کرد.
1- سعی کنید میزان تو در تو بودن کدهای خود را محدود کنید.
لطفا به مثال زیر دقت نمائید:
void SetA()
{
if(a == b)
{
foreach(C c in cs)
{
if(c == d)
{
a = c;
}
}
}
}
void SetA()
{
if(a != b)
return;
foreach(C c in cs)
a = GetValueOfA(c);
}
TypeOfA GetValueOfA(C c)
{
if(c == d)
return c;
return a;
}
افزونههای CodeRush و refactor pro مجموعهی DevExpress از لحاظ مباحث refactoring در ویژوال استودیو حرف اول را میزنند. فقط کافی است برای مثال قطعه کد if داخلی را انتخاب کنید، بلافاصله سه نقطه زیر آن ظاهر شده و با کلیک بر روی آن امکان استخراج یک تابع از آنرا برای شما به سرعت فراهم خواهد کرد.
مثالی دیگر:
if (foo) {
if (bar) {
// do something
}
}
if (foo && bar) {
// do something
}
و یا یک مثال دیگر:
میزان تو در تو بودن این تابع جاوا اسکریپتی را ملاحظه نمائید:
function findShape(flags, point, attribute, list) {
if(!findShapePoints(flags, point, attribute)) {
if(!doFindShapePoints(flags, point, attribute)) {
if(!findInShape(flags, point, attribute)) {
if(!findFromGuide(flags,point) {
if(list.count() > 0 && flags == 1) {
doSomething();
}
}
}
}
}
}
function findShape(flags, point, attribute, list) {
if(findShapePoints(flags, point, attribute)) {
return;
}
if(doFindShapePoints(flags, point, attribute)) {
return;
}
if(findInShape(flags, point, attribute)) {
return;
}
if(findFromGuide(flags,point) {
return;
}
if (!(list.count() > 0 && flags == 1)) {
return;
}
doSomething();
}
با وجود پیشرفتهای زیادی که در طراحی و پیاده سازی IDE ها صورت گرفته و با بودن ابزارهای تکمیل سازی خودکار متن تایپ شده در آنها، این روزها استفاده از نامهای بلند برای توابع یا متغیرها مشکل ساز نیست و وقت زیادی را تلف نخواهد کرد. برای مثال به نظر شما اگر پس از یک سال به کدهای زیر نگاه کنید کدامیک خود توضیح دهندهتر خواهند بود (بدون مراجعه به مستندات موجود)؟
void UpdateBankAccountTransactionListWithYesterdaysTransactions()
//or?
void UpdateTransactions()
اگر مورد 2 را رعایت کرده باشید، کمتر به نوشتن کامنت نیاز خواهد بود. از توضیح موارد بدیهی خودداری کنید، زیرا آنها بیشتر سبب اتلاف وقت خواهند شد تا کمک به افراد دیگر یا حتی خود شما. همچنین هیچگاه قطعه کدی را که به آن نیاز ندارید به صورت کامنت شده به مخزن کد در یک سیستم کنترل نگارش ارسال نکنید.
//function thisReallyHandyFunction() {
// someMagic();
// someMoreMagic();
// magicNumber = evenMoreMagic();
// return magicNumber;
//}
به صورت خلاصه جهت نگهداری سوابق کدهای قدیمی باید از سورس کنترل استفاده کرد و نه به صورت کامنت قرار دادن آنها.
از کامنتهای نوع زیر پرهیز کنید که بیشتر سبب رژه رفتن روی اعصاب خواننده میشود تا کمک به او! (خواننده را بیسواد فرض نکنید)
// Get the student's id
thisId = student.getId();
// TODO: This is too bad. FIX IT!
4- عدم استفاده از عبارات شرطی بیمورد هنگام بازگشت دادن یک مقدار bool:
مثال زیر را درنظر بگیرید:
if (foo>bar) {
return true;
} else {
return false;
}
return foo>bar;
برای مثال:
Something something = new Something(foo);
return something;
return new Something(foo);
6- در نگارشهای جدید دات نت فریم ورک استفاده از ArrayList منسوخ شده است. بجای آن بهتر است از لیستهای جنریک استفاده شود. کدی که در آن از ArrayList استفاده میشود طعم دات نت فریم ورک 1 را میدهد!
7- لطفا بین خطوط فاصله ایجاد کنید. ایجاد فواصل مجانی است!
دو تابع جاوا اسکریپتی زیر را (که در حقیقت یک تابع هستند) در نظر بگیرید:
function getSomeAngle() {
// Some code here then
radAngle1 = Math.atan(slope(center, point1));
radAngle2 = Math.atan(slope(center, point2));
firstAngle = getStartAngle(radAngle1, point1, center);
secondAngle = getStartAngle(radAngle2, point2, center);
radAngle1 = degreesToRadians(firstAngle);
radAngle2 = degreesToRadians(secondAngle);
baseRadius = distance(point, center);
radius = baseRadius + (lines * y);
p1["x"] = roundValue(radius * Math.cos(radAngle1) + center["x"]);
p1["y"] = roundValue(radius * Math.sin(radAngle1) + center["y"]);
pt2["x"] = roundValue(radius * Math.cos(radAngle2) + center["y"]);
pt2["y"] = roundValue(radius * Math.sin(radAngle2) + center["y");
// Now some more code
}
function getSomeAngle() {
// Some code here then
radAngle1 = Math.atan(slope(center, point1));
radAngle2 = Math.atan(slope(center, point2));
firstAngle = getStartAngle(radAngle1, point1, center);
secondAngle = getStartAngle(radAngle2, point2, center);
radAngle1 = degreesToRadians(firstAngle);
radAngle2 = degreesToRadians(secondAngle);
baseRadius = distance(point, center);
radius = baseRadius + (lines * y);
p1["x"] = roundValue(radius * Math.cos(radAngle1) + center["x"]);
p1["y"] = roundValue(radius * Math.sin(radAngle1) + center["y"]);
pt2["x"] = roundValue(radius * Math.cos(radAngle2) + center["y"]);
pt2["y"] = roundValue(radius * Math.sin(radAngle2) + center["y");
// Now some more code
}
استفاده از فاصله بین خطوط در تابع دوم باعث بالا رفتن خوانایی آن شده است و این طور به نظر میرسد که سطرهایی با عملکرد مشابه در یک گروه کنار هم قرار گرفتهاند.
8- توابع خود را کوتاه کنید.
یک تابع نباید بیشتر از 50 سطر باشد (البته در این مورد بین علما اختلاف هست!). اگر بیشتر شد بدون شک نیاز به refactoring داشته و باید به چند قسمت تقسیم شود تا خوانایی کد افزایش یابد.
به صورت خلاصه یک تابع فقط باید یک کار را انجام دهد و باید بتوان عملکرد آنرا در طی یک جمله توضیح داد.
9- از اعداد جادویی در کدهای خود استفاده نکنید!
کد زیر هیچ معنایی ندارد!
if(mode == 3){ ... }
else if(mode == 4) { ... }
if(mode == MyEnum.ShowAllUsers) { ... }
else if(mode == MyEnum.ShowOnlyActiveUsers) { ... }
اگر نیاز به تعداد زیادی پارامتر ورودی وجود داشت (بیش از 6 مورد) از struct و یا کلاس جهت معرفی آنها استفاده کنید.
Content Security Policy: The page’s settings blocked the loading of a resource at https://mdbootstrap.com/img/Photos/Others/sidenav3.jpg (“img-src”).
مثال - نمایش درصد پیشرفت عملیات توسط SignalR
نکتهای در مورد نگارشهای مختلف SignalR
اگر برنامه شما قرار است دات نت 4 را پشتیبانی کند، آخرین نگارش SignalR که با آن سازگار است، نگارش 1.1.3 میباشد. بنابراین اگر دستور ذیل را اجرا کنید:
PM> Install-Package Microsoft.AspNet.SignalR
اگر دستور ذیل را اجرا کنید، SiganlR 1.x را نصب میکند که با دات نت 4 به بعد سازگار است:
PM> Install-Package Microsoft.AspNet.SignalR -Version 1.1.3
با اینکار Microsoft.AspNet.SignalR.JS نیز به صورت خودکار نصب میگردد و به این ترتیب کلاینت جاوا اسکریپتی SiganlR نیز در برنامه قابل استفاده خواهد بود.
تنظیمات فایل Global.asax.cs
سطر فراخوانی متد RouteTable.Routes.MapHubs باید در ابتدای متد Application_Start فایل Global.asax.cs قرار گیرد (پیش از هر تنظیم دیگری). تفاوتی هم نمیکند که برنامه وب فرم است یا MVC. به این ترتیب مسیریابیهای SignalR تنظیم شده و مسیر http://localhost/signalr/hubs قابل استفاده خواهد بود.
تنظیمات اسکریپتهای سمت کلاینت مورد نیاز
پس از نصب بسته SignalR، سه اسکریپت ذیل باید به ابتدای صفحه وب اضافه شوند تا کلاینتهای جاوا اسکریپتی SignalR بتوانند با سرور ارتباط برقرار کنند:
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR-1.1.3.min.js" type="text/javascript"></script> <script src="signalr/hubs" type="text/javascript"></script>
تعریف کلاس Hub برنامه
using Microsoft.AspNet.SignalR; namespace WebFormsSample03.Common { public class ProgressHub : Hub { /// <summary> /// این متد استاتیک تعریف شده تا در برنامه به صورت مستقیم قابل استفاده باشد /// یا میشد اصلا این متد تعریف نشود و از همان دریافت زمینه هاب در کنترلر استفاده گردد /// </summary> public static void UpdateProgressBar(int value, string connectionId) { var ctx = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>(); ctx.Clients.Client(connectionId).updateProgressBar(value); //فراخوانی یک متد در سمت کلاینت } } }
البته تعریف این متد در اینجا ضروری نبود. حتی میشد بدنه کلاس هاب را خالی تعریف کرد و متد GetHubContext را مستقیما داخل یک کنترلر فراخوانی نمود.
متد UpdateProgressBar، مقدار value را به تنها یک کلاینت که Id آن مساوی connectionId دریافتی است، ارسال میکند. این کلاینت باید یک callback جاوا اسکریپتی را جهت تامین متد پویای updateProgressBar تدارک ببیند.
کلاس Web API کنترلر دریافت فایلها
فرقی نمیکند که برنامه شما از نوع وب فرم است یا MVC. امکانات Web API در هر دو نوع پروژه، قابل دسترسی است (همان ایده یک ASP.NET واحد).
بنابراین نیاز است یک کنترلر وب API جدید را به پروژه اضافه کرده و محتوای آن را به شکل ذیل تغییر دهیم:
using System.Threading; using System.Web.Http; using WebFormsSample03.Common; namespace WebFormsSample03 { public class DownloadRequest { public string Url { set; get; } public string ConnectionId { set; get; } } public class DownloaderController : ApiController { public void Post([FromBody]DownloadRequest data) { //todo: start downloading the data.Url .... ProgressHub.UpdateProgressBar(10, data.ConnectionId); Thread.Sleep(2000); ProgressHub.UpdateProgressBar(40, data.ConnectionId); Thread.Sleep(3000); ProgressHub.UpdateProgressBar(64, data.ConnectionId); Thread.Sleep(2000); ProgressHub.UpdateProgressBar(77, data.ConnectionId); Thread.Sleep(2000); ProgressHub.UpdateProgressBar(92, data.ConnectionId); Thread.Sleep(3000); ProgressHub.UpdateProgressBar(99, data.ConnectionId); Thread.Sleep(2000); ProgressHub.UpdateProgressBar(100, data.ConnectionId); } } }
using System; using System.Web.Http; using System.Web.Routing; namespace WebFormsSample03 { public class Global : System.Web.HttpApplication { protected void Application_Start(object sender, EventArgs e) { // Register the default hubs route: ~/signalr RouteTable.Routes.MapHubs(); RouteTable.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } } }
همچنین در اینجا با توجه به مسیریابی تعریف شده، باید اطلاعات را به آدرس api/Downloader از نوع Post ارسال کرد.
تعریف کلاینت متصل به Hub
در سمت سرور، متد پویای updateProgressBar فراخوانی شده است. اکنون باید این متد را در سمت کلاینت پیاده سازی کنیم:
<form id="form1" runat="server"> <div> <input id="txtUrl" value="http://www.site.com/file.rar" type="text" /> <input id="send" type="button" value="start download ..." /> <br /> <div id="bar" style="border: #000 1px solid; width:300px;"></div> </div> </form> <script type="text/javascript"> $(function () { $.connection.hub.logging = true; //اطلاعات بیشتری را در جاوا اسکریپت کنسول مرورگر لاگ میکند var progressHub = $.connection.progressHub; //این نام مستعار پیشتر توسط ویژگی نام هاب تنظیم شده است progressHub.client.updateProgressBar = function (value) { //متدی که در اینجا تعریف شده دقیقا مطابق نام متد پویایی است که در هاب تعریف شده است //به این ترتیب سرور میتواند کلاینت را فراخوانی کند $("#bar").html(GaugeBar.generate(value)); }; $.connection.hub.start() // فاز اولیه ارتباط را آغاز میکند .done(function () { $("#send").click(function () { $("#send").attr('disabled', 'disabled'); var myClientId = $.connection.hub.id; // اکنون اتصال برقرار است به سرور $.ajax({ type: "POST", contentType: "application/json", url: "/api/Downloader", data: JSON.stringify({ Url: $("#txtUrl").val(), ConnectionId: myClientId }) }).success(function () { $("#send").removeAttr('disabled'); }).fail(function () { // }); }); }); }); </script>
در ابتدای کار صفحه، اتصال به progressHub برقرار میشود. اگر دقت کنید، نام این هاب با حروف کوچک در اینجا (در سمت کلاینت) آغاز میگردد.
سپس با تعریف یک callback به نام progressHub.client.updateProgressBar، پیامهای دریافتی از طرف سرور را به یک افزونه progress bar جیکوئری، برای نمایش ارسال میکند.
کار اتصال به رویداد کلیک دکمهی آغاز دریافت فایل، در متد done باید انجام شود. این callback زمانی فراخوانی میگردد که کار اتصال به سرور با موفقیت صورت گرفته باشد.
سپس در ادامه توسط jQuery Ajax، اطلاعات Url و همچنین Id کلاینت را به مسیر api/Downloader یا همان web api controller ارسال میکنیم.
کدهای کامل این مثال را از اینجا نیز میتوانید دریافت نمائید:
WebFormsSample03.zip
درخواست
لطفا مطالب و سؤالات غیر مرتبط با عناوین هر یک از مطالب ارسالی در سایت را مطرح نفرمائید. (در غیر اینصورت مطلب شما بدون تائید، یک ضرب حذف خواهد شد؛ حتی شما!)
کاربری این وبلاگ شخصی به فوروم تبدیل نخواهد شد.
برای پاسخ به سؤالات خودتون میتونید به فورومهای برنامه نویسی مانند دات نت سورس مراجعه نمائید.
با تشکر
میانگین متحرک یا moving average به چند دسته تقسیم میشود که سادهترین آنها میان متحرک ساده است.
برای محاسبه میانگین متحرک باید بازه زمانی مورد نظر را مشخص کنیم. مثلا میانگین فروش در 3 روز گذشته.
به جدول زیر توجه بفرمایید:
میانگین متحرک فروش سه روز و چهار روز گذشته در جدول فوق قابل مشاهده است.
بطور مثال مقدار میانگین متحرک سه روزه برای روز چهارم برابر است با جمع فروش سه روز گذشته تقسیم بر سه. یعنی 3/(10+12+13)
و برای روز ششم میانگین متحرک 4 روزه برابر است با جمع فروش چهار روز گذشته و تقسیم آنها بر چهار. یعنی 10+12+13+16 تقسیم بر 4 که برابر است با 12.7
در نمودار زیر، خط قرم رنگ مربوط به میانگین متحرک ساده (میانگین فروش سه روز گذشته) است و خط آبی رنگ نیز میزان فروش است
راه حل در SQL Server 2012
توسط توابع window این مساله را به سادگی میتوانیم حل کنیم. همانطور که مشاهده میشود در تصویر زیر. کافیست ما به سطرهایی در بازهی سه سطر قبل تا یک سطر قبل (برای میانگین متحرک سه روزه) دسترسی پیدا کرده و میانگین آن را بگیریم.
ابتدا این جدول را ایجاد و تعدادی سطر برای نمونه در آن درج کنید:
CREATE TABLE Samples ( [date] SMALLDATETIME, selling SMALLMONEY ); INSERT Samples VALUES ('2010-12-01 00:00:00', 10), ('2010-12-02 00:00:00', 12), ('2010-12-03 00:00:00', 13), ('2010-12-04 00:00:00', 16), ('2010-12-05 00:00:00', 19), ('2010-12-06 00:00:00', 23), ('2010-12-07 00:00:00', 26), ('2010-12-08 00:00:00', 27), ('2010-12-09 00:00:00', 20), ('2010-12-10 00:00:00', 18), ('2010-12-11 00:00:00', 19);
SELECT [date], selling, CASE WHEN rnk < 4 THEN NULL ELSE mv END AS SimpleMovingAverage FROM (SELECT *, AVG(selling) OVER(ORDER BY [date] ROWS BETWEEN 3 PRECEDING AND 1 PRECEDING) AS mv, ROW_NUMBER() OVER(ORDER BY [date]) AS rnk FROM Samples ) AS d;
قلب query دستور ROWS BETWEEN 3 PRECEDING AND 1 PRECEDING میباشد.
به این معنا که سطرهایی در بازهی سه سطر قبل و یک سطر قبل را در Window انتخاب کرده و عمل میاگنین گیری را بر اساس مقادیر مورد نظر انجام بده.
راه حل در SQL Server 2005
به درخواست یکی از کاربران من راه حلی را پیشنهاد میکنم که جایگزین مناسبی برای روش قبلی است در صورت عدم استفاده از نسخه 2012. توابع window در اینگونه مسائل بهترین عملکرد را خواهند داشت.
SELECT S.[date], S.selling, CASE WHEN COUNT(*) < 3 THEN NULL ELSE AVG(s) END AS SimpleMovingAverage FROM Samples AS S OUTER APPLY (SELECT TOP(3) selling FROM Samples WHERE [date] < S.[date] ORDER BY [date] DESC) AS D(s) GROUP BY S.[date], S.selling ORDER BY S.[date];
FOR FUN
توسط توابع Analytical ای چون LAG نیز میتوان اینگونه مسائل را حل نمود. بطور مثال توسط تابع LAG به یک مقدار قبلی، دو مقدار قبلی و سه مقدار قبلی دسترسی پیدا کرده و آنها را با یکدیگر جمع نموده و تقسیم بر تعدادشان میکنیم یعنی:
select [date], selling, ( lag(selling, 1) over(order by [date]) + lag(selling, 2) over(order by [date]) + lag(selling, 3) over(order by [date]) ) / 3 from Samples;
در اینجا میخواهیم بدون استفاده از هیچگونه کامپوننت ثالثی، صرفا بر اساس قابلیتهای جدید ماژول HttpClient ارائه شدهی در Angular 4.3، درصد پیشرفت آپلود را نیز نمایش دهیم. تغییرات مورد نیاز برای این منظور به شرح زیر هستند:
1) تغییر سرویس برنامه جهت استفاده از HTTP Client و گزارش درصد پیشرفت
postTicket(ticket: Ticket, filesList: FileList): Observable<HttpEvent<any>> { //… the same as before const headers = new HttpHeaders().set("Accept", "application/json"); return this.http .post(`${this.baseUrl}/SaveTicket`, formData, { headers: headers, reportProgress: true, observe: "events" }) .map(response => response || {}) .catch((error: HttpErrorResponse) => { console.error("observable error: ", error); return Observable.throw(error.statusText); }); }
الف) خروجی متد آن یک Observable از نوع HttpEvent تعیین شدهاست. به این ترتیب مشترکین به آن قادر خواهند شد به رخدادهای HTTP Client گوش فرا دهند:
postTicket(ticket: Ticket, filesList: FileList): Observable<HttpEvent<any>> {
ب) به قسمت options متد post، گزینههای "observe: "events و reportProgress: true اضافه شدهاند:
{ headers: headers, reportProgress: true, observe: "events" }
2) تغییر متد submitForm کامپوننت جهت گزارش و اعمال تغییرات به قالب برنامه
queueProgress: number; isUploading: boolean; uploadTimeRemaining: number; uploadTimeElapsed: number; uploadSpeed: number; submitForm(form: NgForm) { const fileInput: HTMLInputElement = this.screenshotInput.nativeElement; this.queueProgress = 0; this.isUploading = true; let startTime = Date.now(); this.uploadService.postTicket(this.model, fileInput.files).subscribe( (event: HttpEvent<any>) => { switch (event.type) { case HttpEventType.Sent: startTime = Date.now(); console.log("Request sent!"); break; case HttpEventType.DownloadProgress: case HttpEventType.UploadProgress: if (event.total) { this.queueProgress = Math.round(event.loaded / event.total * 100); const timeElapsed = Date.now() - startTime; const uploadSpeed = event.loaded / (timeElapsed / 1000); this.uploadTimeRemaining = Math.ceil( (event.total - event.loaded) / uploadSpeed ); this.uploadTimeElapsed = Math.ceil(timeElapsed / 1000); this.uploadSpeed = uploadSpeed / 1024 / 1024; } break; case HttpEventType.Response: this.queueProgress = 100; this.isUploading = false; console.log("Done! ResponseBody:", event.body); break; } }, (error: HttpErrorResponse) => { this.isUploading = false; console.log(error); } ); }
- HttpEventType.Sent شروع عملیات است. برای مثال از آن میتوان جهت تعیین زمان شروع به آپلود استفاده کرد. سپس این زمان را با زمان جاری، در رخداد آپلود به سرور مقایسه و گزارش سرعت آپلود، زمانهای صرف شده و باقیمانده را محاسبه کرد.
- HttpEventType.DownloadProgress و HttpEventType.UploadProgress گزارش درصد آپلود را مشخص میکنند. در اینجا event.total حجم کلی است و event.loaded حجم ارسالی کلی به سمت سرور میباشد. به همین جهت از این اطلاعات میتوان برای نمایش درصد کل آپلود استفاده کرد.
- HttpEventType.Response در پایان عملیات رخخواهد داد. در اینجا event.body همان بدنهی response دریافتی از سمت سرور است.
3) تغییر رابط کاربری برنامه (قالب کامپوننت) جهت گزارش درصد پیشرفت کلی آپلود
<div *ngIf="queueProgress > 0"> <table class="table"> <thead> <tr> <th width="15%">Event</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td><strong>Elapsed time</strong></td> <td nowrap>{{uploadTimeElapsed | number:'.1'}} second(s)</td> </tr> <tr> <td><strong>Remaining time</strong></td> <td nowrap>{{uploadTimeRemaining | number:'.1'}} second(s)</td> </tr> <tr> <td><strong>Upload speed</strong></td> <td nowrap>{{uploadSpeed | number:'.3'}} MB/s</td> </tr> <tr> <td><strong>Queue progress</strong></td> <td> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" [attr.aria-valuenow]="queueProgress" [ngStyle]="{ 'width': queueProgress + '%' }"> {{queueProgress}}% </div> </td> </tr> </tbody> </table> </div> <button class="btn btn-primary" [disabled]="form.invalid || isUploading" type="submit">Submit</button>
همچنین در طی مدت آپلود، خاصیت isUploading به true تنظیم میشود تا دکمهی ارسال را غیرفعال کند. این خاصیت در صورت بروز خطایی و یا تکمیل شدن عملیات، false میشود.
یک نکته: اگر میخواهید درصد پیشرفت آپلود را در حالت آزمایش local بهتر مشاهده کنید، دربرگهی network، سرعت را بر روی 3G تنظیم کنید:
کدهای کامل این تغییرات را از اینجا میتوانید دریافت کنید.
BitVector 0.0.1 منتشر شد 🚀
دات نت متاسفانه هیچ تایپ مناسبی برای کار و دستکاری دادههای باینری (Bit) به غیر از کلاس BitArray ندارد, که این کلاس اولا Immutable و ValueType نیست و دوم به عنوان بافر از Int32 استفاده میکند که باعث میشود (بسته به نوع دیتا) Memory زیادی مصرف کند و همچنین امکاناتی مثل Bit Shifting هم ندارد.
BitVector یه struct ساده ولی قدرتمند است که این مشکلات را برطرف میکند.
(البته struct BitArray32 هم وجود دارد که برای دیتاستهای بزرگ به دلیل اینکه نهایتا از 32 بیت استفاده میکند مناسب نیست.)