using(var client = new HttpClient())
{
   // do something with http client
}

 Unable to connect to the remote server
System.Net.Sockets.SocketException: Only one usage of each socket address (protocol/network address/port) is normally permitted.

using (var client = new HttpClient())
{
       var result = await client.GetAsync("http://example.com/");
}

for (int i = 0; i < 10; i++)
{
      using (var client = new HttpClient())
      {
            var result = await client.GetAsync("http://example.com/");
            Console.WriteLine(result.StatusCode);
      }
}

  TCP    192.168.1.6:13996      93.184.216.34:http     TIME_WAIT
  TCP    192.168.1.6:13997      93.184.216.34:http     TIME_WAIT
  TCP    192.168.1.6:13998      93.184.216.34:http     TIME_WAIT
  TCP    192.168.1.6:13999      93.184.216.34:http     TIME_WAIT
  TCP    192.168.1.6:14000      93.184.216.34:http     TIME_WAIT
  TCP    192.168.1.6:14001      93.184.216.34:http     TIME_WAIT
  TCP    192.168.1.6:14002      93.184.216.34:http     TIME_WAIT
  TCP    192.168.1.6:14003      93.184.216.34:http     TIME_WAIT
  TCP    192.168.1.6:14004      93.184.216.34:http     TIME_WAIT
  TCP    192.168.1.6:14005      93.184.216.34:http     TIME_WAIT

 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters\TcpTimedWaitDelay]

CancelPendingRequests
DeleteAsync
GetAsync
GetByteArrayAsync
GetStreamAsync
GetStringAsync
PostAsync
PutAsync
SendAsync

BaseAddress
DefaultRequestHeaders
MaxResponseContentBufferSize
Timeout

var sp = ServicePointManager.FindServicePoint(new Uri("http://thisisasample.com"));
sp.ConnectionLeaseTimeout = 60*1000; //In milliseconds

using System;
using System.Collections.Generic;
using System.Net.Http;

namespace HttpClientTips
{
    public interface IHttpClientFactory : IDisposable
    {
        HttpClient GetOrCreate(
            Uri baseAddress,
            IDictionary<string, string> defaultRequestHeaders = null,
            TimeSpan? timeout = null,
            long? maxResponseContentBufferSize = null,
            HttpMessageHandler handler = null);
    }
}

using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Net;
using System.Net.Http;
using System.Threading;

namespace HttpClientTips
{
    /// <summary>
    /// Lifetime of this class should be set to `Singleton`.
    /// </summary>
    public class HttpClientFactory : IHttpClientFactory
    {
        // 'GetOrAdd' call on the dictionary is not thread safe and we might end up creating the HttpClient more than
        // once. To prevent this Lazy<> is used. In the worst case multiple Lazy<> objects are created for multiple
        // threads but only one of the objects succeeds in creating the HttpClient.
        private readonly ConcurrentDictionary<Uri, Lazy<HttpClient>> _httpClients =
                         new ConcurrentDictionary<Uri, Lazy<HttpClient>>();
        private const int ConnectionLeaseTimeout = 60 * 1000; // 1 minute

        public HttpClientFactory()
        {
            // Default is 2 minutes: https://msdn.microsoft.com/en-us/library/system.net.servicepointmanager.dnsrefreshtimeout(v=vs.110).aspx
            ServicePointManager.DnsRefreshTimeout = (int)TimeSpan.FromMinutes(1).TotalMilliseconds;
            // Increases the concurrent outbound connections
            ServicePointManager.DefaultConnectionLimit = 1024;
        }

        public HttpClient GetOrCreate(
           Uri baseAddress,
           IDictionary<string, string> defaultRequestHeaders = null,
           TimeSpan? timeout = null,
           long? maxResponseContentBufferSize = null,
           HttpMessageHandler handler = null)
        {
            return _httpClients.GetOrAdd(baseAddress,
                             uri => new Lazy<HttpClient>(() =>
                             {
                                 // Reusing a single HttpClient instance across a multi-threaded application means
                                 // you can't change the values of the stateful properties (which are not thread safe),
                                 // like BaseAddress, DefaultRequestHeaders, MaxResponseContentBufferSize and Timeout.
                                 // So you can only use them if they are constant across your application and need their own instance if being varied.
                                 var client = handler == null ? new HttpClient { BaseAddress = baseAddress } :
                                               new HttpClient(handler, disposeHandler: false) { BaseAddress = baseAddress };
                                 setRequestTimeout(timeout, client);
                                 setMaxResponseBufferSize(maxResponseContentBufferSize, client);
                                 setDefaultHeaders(defaultRequestHeaders, client);
                                 setConnectionLeaseTimeout(baseAddress, client);
                                 return client;
                             },
                             LazyThreadSafetyMode.ExecutionAndPublication)).Value;
        }

        public void Dispose()
        {
            foreach (var httpClient in _httpClients.Values)
            {
                httpClient.Value.Dispose();
            }
        }

        private static void setConnectionLeaseTimeout(Uri baseAddress, HttpClient client)
        {
            // This ensures connections are used efficiently but not indefinitely.
            client.DefaultRequestHeaders.ConnectionClose = false; // keeps the connection open -> more efficient use of the client
            ServicePointManager.FindServicePoint(baseAddress).ConnectionLeaseTimeout = ConnectionLeaseTimeout; // ensures connections are not used indefinitely.
        }

        private static void setDefaultHeaders(IDictionary<string, string> defaultRequestHeaders, HttpClient client)
        {
            if (defaultRequestHeaders == null)
            {
                return;
            }
            foreach (var item in defaultRequestHeaders)
            {
                client.DefaultRequestHeaders.Add(item.Key, item.Value);
            }
        }

        private static void setMaxResponseBufferSize(long? maxResponseContentBufferSize, HttpClient client)
        {
            if (maxResponseContentBufferSize.HasValue)
            {
                client.MaxResponseContentBufferSize = maxResponseContentBufferSize.Value;
            }
        }

        private static void setRequestTimeout(TimeSpan? timeout, HttpClient client)
        {
            if (timeout.HasValue)
            {
                client.Timeout = timeout.Value;
            }
        }
    }
}

namespace HttpClientTips.Web
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSingleton<IHttpClientFactory, HttpClientFactory>();
            services.AddMvc();
        }

namespace HttpClientTips.Web.Controllers
{
    public class HomeController : Controller
    {
        private readonly IHttpClientFactory _httpClientFactory;
        public HomeController(IHttpClientFactory httpClientFactory)
        {
            _httpClientFactory = httpClientFactory;
        }

        public async Task<IActionResult> Index()
        {
            var host = new Uri("http://localhost:5000");
            var httpClient = _httpClientFactory.GetOrCreate(host);
            var responseMessage = await httpClient.GetAsync("home/about").ConfigureAwait(false);
            var responseContent = await responseMessage.Content.ReadAsStringAsync().ConfigureAwait(false);
            return Content(responseContent);
        }

* نکته: پروژه انگیولار متریال ۲ در زمان نوشتن این مقاله به تازگی نسخه بتا ۵ را ارائه داده و همچنان در حال توسعه است. این بدان معنی است که ممکن است همه چیز به سرعت تغییر یابد. 

مقدمه

انگیولار متریال ۲ همانند انگیولار متریال یک، تمامی المانهای مورد نیاز برای طراحی یک برنامه تک صفحه‌ای را به راحتی فراهم می‌کند (هرچند تمامی المانهای آن در نسخه بتا پیاده سازی نشده‌اند). خبر خوب اینکه، اکثر کامپوننتهای ارائه شده در انگیولار متریال ۲ از قالب راست به چپ پشتیبانی می‌کنند و اعمال این قالب به سادگی اضافه کردن خصوصیت dir یک المان به rtl است.

در صفحه گیت‌هاب انگیولار متریال ۲ آمده‌است که انگیولار متریال ۲، واسط‌های کاربری با کیفیت بالا را ارائه می‌دهد و در ادامه منظورش را از «کیفیت بالا»، اینگونه بیان می‌کند:

1. بین‌المللی و قابل دسترس برای همه به نحوی که تمامی کاربران می‌توانند از آنها استفاده کنند (عدم مشکل در چند زبانه بودن و پشتیبانی از قالب راست به چپ و چپ به راست) .
   
2. دارای APIهای ساده برای توسعه دهندگان. 
   
3. رفتار مورد انتظار و بدون خطا در تمامی موردهای کاری

4. تست تمامی رفتارها توسط تست یکپارچگی (unit test ) و تست واحد ( integration test ) 
   

5. قابلیت سفارشی سازی در چارچوب طراحی متریال 
   

6. بهره‌وری بالا 
   

7. کد تمیز و مستندات خوب 
   

شروع کار با انگیولار متریال ۲ 

قدم اول: نصب angular-material و hammerjs

برای شروع بایستی Angular Material و angular animations و hammer.js را توسط npm به صورت زیر نصب کنید.

npm install --save @angular/material @angular/animations

npm install --save hammerjs

angular/material@: بسته مربوط به انگیولار متریال دو را نصب خواهد کرد.

angular/animations@: این بسته امکاناتی جهت ساخت افکت‌های ویژه هنگام تغییر صفحات، یا بارگذاری المنت‌ها را از طریق کدهای css نوشته شده، به راحتی امکان‌پذیر می‌کند.

Hammerjs: برخی از کامپوننتهای موجود در انگیولار متریال ۲ وابسته به کتابخانه Hammerjs هستند. (از جمله md-slide-toggle و md-slider, mdTooltip)

"scripts": [
  "../node_modules/hammerjs/hammer.min.js"
],

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

<md-sidenav-container>
  
  <md-sidenav #end align="end" opened="true" mode="side">
    
    <md-toolbar color="accent">
      <div>
        <md-toolbar-row>
          <img src="https://material.angular.io/favicon.ico" style="height:50px;margin-top: 2px; margin-bottom: 2px;">
          <span>
            برنامه من
          </span>
        </md-toolbar-row>
      </div>
    </md-toolbar>
    
    <md-nav-list>
      <md-list-item [routerLink]="['/']">
        <div>
          <div></div>
          <md-icon role="img" aria-label="home">home</md-icon>
          <span>خانه</span>
        </div>
      </md-list-item>
    </md-nav-list>

    <md-nav-list>
      <md-list-item [routerLink]="['/registries']">
        <div>
          <div></div>
          <md-icon role="img" aria-label="forms">content_paste</md-icon>
          <span>فرم</span>
        </div>
      </md-list-item>
    </md-nav-list>

    <md-nav-list>
      <md-list-item href="/charts">
        <div>
          <div></div>
          <md-icon role="img" aria-label="charts">show_chart</md-icon>
          <span>نمودارها</span>
        </div>
      </md-list-item>
    </md-nav-list>
  </md-sidenav>

  <header>
    <md-toolbar color="primary">
      <button md-icon-button (click)="end.toggle()">
        <md-icon>menu</md-icon>
      </button>
      <span>داشبورد</span>
      
      <button md-icon-button [md-menu-trigger-for]="menu">
        <md-icon>person</md-icon>
      </button>

    </md-toolbar>

    <md-menu x-position="before" #menu="mdMenu">
      <button md-menu-item>تنظیمات</button>
      <button md-menu-item>خروج</button>
    </md-menu>

  </header>

  <main>
    <router-outlet></router-outlet>
  </main>

</md-sidenav-container>

<span>
  <button md-fab>
    <md-icon>check circle</md-icon>
  </button>
</span>

html, body, material-app, md-sidenav-container, .my-content {
  margin: 0;
  direction: rtl;
  width: 100%;
  height: 100%;
}

.mat-button-toggle,
.mat-button-base,
.mat-button,
.mat-raised-button,
.mat-fab,
.mat-icon-button,
.mat-mini-fab,
.mat-card,
.mat-checkbox,
.mat-input-container,
.mat-list,
.mat-menu-item,
.mat-radio-button,
.mat-select,
.mat-list .mat-list-item .mat-list-item-content,
.mat-nav-list .mat-list-item .mat-list-item-content,
.mat-simple-snackbar,
.mat-tab-label,
.mat-slide-toggle-content,
.mat-toolbar,
.mat-tooltip { font-family: 'Iranian Sans', Tahoma !important; 
}

md-sidenav {
  width: 225px;
  max-width: 70%;
}

  md-sidenav md-nav-list {
    display: block;
  }

    md-sidenav md-nav-list :hover {
      background-color: rgb(250, 250, 250);
    }



    md-sidenav md-nav-list .md-list-item {
      cursor: pointer;
    }

.side-navigation {
  padding-top: 0;
}

md-nav-list.side-navigation a[md-list-item] > .md-list-item > span.title {
  margin-right: 10px;
}

md-nav-list.side-navigation a[md-list-item] > .md-list-item {
  -webkit-font-smoothing: antialiased;
  letter-spacing: .14px;
}

md-list a[md-list-item] .md-list-item, md-list md-list-item .md-list-item, md-nav-list a[md-list-item] .md-list-item, md-nav-list md-list-item .md-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  padding: 0 16px;
}

button.my-fab {
  position: absolute;
  right: 20px;
  bottom: 10px;
}

md-card {
  margin: 1em;
}

md-toolbar-row {
  justify-content: space-between;
}

.done {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: white;
}

md-nav-list.side-navigation a[md-list-item] {
  position: relative;
}

md-list a[md-list-item], md-list md-list-item, md-nav-list a[md-list-item], md-nav-list md-list-item {
  display: block;
}

md-list a[md-list-item], md-list md-list-item, md-nav-list a[md-list-item], md-nav-list md-list-item {
  color: #000;
}

md-nav-list a {
  text-decoration: none;
  color: inherit;
}

a {
  color: #039be5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.no-padding {
  padding: 0 !important;
}

class Person {
    constructor(firstName, lastName) {
       this.firstName = firstName;
       this.lastName = lastName;
    }

    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
}

const person = new Person('Vahid', 'N');
person.firstName; // 'Vahid'
person.lastName; // 'N'
person.fullName; // function fullName() {…}

class Person {
    constructor(firstName, lastName) {
       this.firstName = firstName;
       this.lastName = lastName;
    }

    get fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
}

function Person(firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
}

Object.defineProperty(Person.prototype, 'fullName', {
   get: function () {
      return this.firstName + ' ' + this.lastName;
   }
});

Object.defineProperty(Person.prototype, 'fullName', {
    enumerable: false,
    writable: false,
    get: function () {
      return this.firstName + ' ' + this.lastName;
    }
});

function decoratorName(target, key, descriptor) {
 // …
}

function readonly(target, key, descriptor) {
   descriptor.writable = false;
   return descriptor;
}

class Person {
    constructor(firstName, lastName) {
       this.firstName = firstName;
       this.lastName = lastName;
    }

    @readonly get fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
}

> npm install core-decorators

@autobind
@deprecate
@readonly
@memoize
@debounce
@profile

> create-react-app state-management-with-mobx-part1
> cd state-management-with-mobx-part1
> npm start

> npm install --save mobx

import { autorun, observable } from "mobx";

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div>
    <input type="text" id="text-input" />
    <div id="text-display"></div>
    <div id="text-display-uppercase"></div>
  </div>,
  document.getElementById("root")
);

const input = document.getElementById("text-input");
const textDisplay = document.getElementById("text-display");
const loudDisplay = document.getElementById("text-display-uppercase");

console.log({ observable, autorun, input, textDisplay, loudDisplay });

{
  value: "Hello world!",
  get uppercase() {
    return this.value.toUpperCase();
  }
}

const text = observable({
  value: "Hello world!",
  get uppercase() {
    return this.value.toUpperCase();
  }
});

input.addEventListener("keyup", event => {
   text.value = event.target.value;
});

autorun(() => {
   textDisplay.textContent = text.value;
   loudDisplay.textContent = text.uppercase;
});

const onChange = (oldValue, newValue) => {
  // Tell MobX that this value has changed.
}

const observable = (value) => {
  return {
    get() { return value; },
    set(newValue) {
      onChange(this.get(), newValue);
      value = newValue;
    }
  }
}