WEB / PROTOCOL LAB
HTTP ve state’in sınırlarını aç.
HTTP sonucunu browser state’iyle karıştırmadan izle. Ardından Cookie ve Set-Cookie alanlarını ayrı ayrı incele.
Mesaj ile state değişimini ayrı izle.
HTTP response’un browser sonucuna nasıl bağlandığını, cookie jar ile session store’un neden ayrı kaldığını incele.
- Request akışını adımla
İlk sahnede İleri ile request ve response adımlarını takip et. Aktif rolün state’ini oku; response receipt ile browser’ın sonraki işini birbirine karıştırma.
- Response ve cookie alanlarını karşılaştır
Senaryo ve adımlar bölümünden diğer sonucu seç. Artifact okuyucusunda HTTP response, Cookie ve Set-Cookie örneklerini aç; status, body ve attribute’ların nerede bulunduğunu karşılaştır.
- State’in sahibini bul
İkinci sahnede cookie jar ve server session store adımlarını izle. Başka bir rolü incele ile iki tarafın state’ini karşılaştır; ayrıntı gerekiyorsa bağlantılı cookie veya session dersine geç.
Bir HTTP sonucunu, browser’ın yerel adımını ve server’daki session kararını ayrı ayrı açıklayabilirsin; mesajın gelmesini bütün işin tamamlanması saymazsın.
Hareket olmadan bütün senaryoları oku
Kayıt bulundu
- Önce browser’da niyet var
Kitap kartını açma niyeti henüz server’a ulaşmadı. Diğer actors bu isteği bilmiyor.
- Browser
- Kart bekliyor
- Application
- Request yok
- Local data source
- Query yok
- HTTP request ulaştı
Method ve resource seçimi application’a ulaştı. Henüz kayıt okunmadı.
- Browser
- Response bekliyor
- Application
- GET /api/book alındı
- Local data source
- Query yok
- Handler yerel olarak çalışır
Application route’u seçer, girdiyi yorumlar ve okuma işlemini hazırlar. Bu aşama yeni bir ağ mesajı değildir.
- Browser
- Response bekliyor
- Application
- Handler → readBook
- Local data source
- Query yok
- Okuma persistence sınırına ulaştı
Bu örnekte data access aynı process içindeki local çağrıdır. Ayrı kart mantıksal sorumluluğu gösterir; ayrı database host veya ağ paketi değildir.
- Browser
- Response bekliyor
- Application
- Okuma sonucu bekliyor
- Local data source
- readBook isteği alındı
- Veri katmanı sonucu belirler
Atlas Notları kaydı bulundu. Bir row bulunması henüz browser’ın bir şey öğrendiğini göstermez.
- Browser
- Response bekliyor
- Application
- Okuma sonucu bekliyor
- Local data source
- Sonuç: Atlas Notları
- Okuma sonucu application’da
Application sonucu aldı; serialization ve HTTP status seçimi kendi sorumluluğunda.
- Browser
- Response bekliyor
- Application
- Sonuç: book row
- Local data source
- Okuma tamamlandı
- HTTP response hazırlandı
Application JSON representation ve 200 status hazırlar. Browser henüz bu response’u almadı.
- Browser
- Response bekliyor
- Application
- 200 + JSON hazır
- Local data source
- Okuma tamamlandı
- Response headers browser’a ulaştı
fetch() status ve headers elde edildiğinde resolve olabilir. Body tamamlanmış veya DOM güncellenmiş olmak zorunda değildir.
- Browser
- 200 headers; body bekliyor
- Application
- Response gönderildi
- Local data source
- Okuma tamamlandı
- Body okundu ve yorumlandı
Application code response.json() gibi ayrı async body okumasını bekler. JSON verisinin hazır olması kartın otomatik değişmesi değildir.
- Browser
- 200 JSON hazır; UI değişmedi
- Application
- Response gönderildi
- Local data source
- Okuma tamamlandı
- Application code UI’ı güncelledi
Kod body’yi okur ve DOM’u günceller. HTTP receipt ile UI güncellemesi ayrı aşamalardır.
- Browser
- UI: Atlas Notları
- Application
- Request tamamlandı
- Local data source
- Okuma tamamlandı
Kayıt bulunamadı
- Önce browser’da niyet var
Kitap kartını açma niyeti henüz server’a ulaşmadı. Diğer actors bu isteği bilmiyor.
- Browser
- Kart bekliyor
- Application
- Request yok
- Local data source
- Query yok
- HTTP request ulaştı
Method ve resource seçimi application’a ulaştı. Henüz kayıt okunmadı.
- Browser
- Response bekliyor
- Application
- GET /api/book alındı
- Local data source
- Query yok
- Handler yerel olarak çalışır
Application route’u seçer, girdiyi yorumlar ve okuma işlemini hazırlar. Bu aşama yeni bir ağ mesajı değildir.
- Browser
- Response bekliyor
- Application
- Handler → readBook
- Local data source
- Query yok
- Okuma persistence sınırına ulaştı
Bu örnekte data access aynı process içindeki local çağrıdır. Ayrı kart mantıksal sorumluluğu gösterir; ayrı database host veya ağ paketi değildir.
- Browser
- Response bekliyor
- Application
- Okuma sonucu bekliyor
- Local data source
- readBook isteği alındı
- Veri katmanı sonucu belirler
Bu kontrollü senaryoda kayıt yok. HTTP status code kararını daha sonra application verecek.
- Browser
- Response bekliyor
- Application
- Okuma sonucu bekliyor
- Local data source
- Sonuç: kayıt yok
- Okuma sonucu application’da
Application sonucu aldı; serialization ve HTTP status seçimi kendi sorumluluğunda.
- Browser
- Response bekliyor
- Application
- Sonuç: null
- Local data source
- Okuma tamamlandı
- HTTP response hazırlandı
Application JSON representation ve 404 status hazırlar. Browser henüz bu response’u almadı.
- Browser
- Response bekliyor
- Application
- 404 + JSON hazır
- Local data source
- Okuma tamamlandı
- Response headers browser’a ulaştı
fetch() status ve headers elde edildiğinde resolve olabilir. Body tamamlanmış veya DOM güncellenmiş olmak zorunda değildir.
- Browser
- 404 headers; body bekliyor
- Application
- Response gönderildi
- Local data source
- Okuma tamamlandı
- Body okundu ve yorumlandı
Application code response.json() gibi ayrı async body okumasını bekler. JSON verisinin hazır olması kartın otomatik değişmesi değildir.
- Browser
- 404 JSON hazır; UI değişmedi
- Application
- Response gönderildi
- Local data source
- Okuma tamamlandı
- Application code UI’ı güncelledi
Kod response status’u kontrol edip bulunamadı mesajını gösterir. 404, fetch Promise’ının zorunlu olarak reject olması demek değildir.
- Browser
- UI: kitap bulunamadı
- Application
- Request tamamlandı
- Local data source
- Okuma tamamlandı
ÖRNEĞİ BİRLİKTE OKUYALIM
İki HTTP sonucu ve local işlem izi
Bir alan seç; hangi sonucu desteklediğini ve nerede yetersiz kaldığını incele.
Ham kaydı ve alan açıklamalarını oku
{
"representation": "HTTP/1.1 teaching text, CRLF-delimited; selected headers only",
"storageTransport": "in-process-call, seeded memory",
"exchanges": [
{
"case": "found",
"requestId": "demo-book-found",
"request": "GET /api/book?case=found HTTP/1.1\r\nHost: 127.0.0.1:4175\r\nAccept: application/json\r\n\r\n",
"response": "HTTP/1.1 200 OK\r\nContent-Type: application/json\r\nContent-Length: 53\r\nCache-Control: no-store\r\nX-Lab-Request-Id: demo-book-found\r\n\r\n{\"book\":{\"id\":\"book-atlas\",\"title\":\"Atlas Notları\"}}",
"bodyUtf8Bytes": 53,
"trace": [
{
"seq": 1,
"actor": "handler",
"event": "request-received",
"requestId": "demo-book-found"
},
{
"seq": 2,
"actor": "handler",
"event": "route-selected",
"route": "/api/book"
},
{
"seq": 3,
"actor": "storage-adapter",
"event": "local-lookup",
"transport": "in-process-call"
},
{
"seq": 4,
"actor": "storage-adapter",
"event": "record-found"
},
{
"seq": 5,
"actor": "handler",
"event": "response-created",
"status": 200
}
],
"browserExpected": {
"fetch": "fulfilled-with-Response",
"status": 200,
"ok": true,
"body": "await response.json()",
"view": "book-title"
}
},
{
"case": "missing",
"requestId": "demo-book-missing",
"request": "GET /api/book?case=missing HTTP/1.1\r\nHost: 127.0.0.1:4175\r\nAccept: application/json\r\n\r\n",
"response": "HTTP/1.1 404 Not Found\r\nContent-Type: application/json\r\nContent-Length: 26\r\nCache-Control: no-store\r\nX-Lab-Request-Id: demo-book-missing\r\n\r\n{\"error\":\"BOOK_NOT_FOUND\"}",
"bodyUtf8Bytes": 26,
"trace": [
{
"seq": 1,
"actor": "handler",
"event": "request-received",
"requestId": "demo-book-missing"
},
{
"seq": 2,
"actor": "handler",
"event": "route-selected",
"route": "/api/book"
},
{
"seq": 3,
"actor": "storage-adapter",
"event": "local-lookup",
"transport": "in-process-call"
},
{
"seq": 4,
"actor": "storage-adapter",
"event": "record-missing"
},
{
"seq": 5,
"actor": "handler",
"event": "response-created",
"status": 404
}
],
"browserExpected": {
"fetch": "fulfilled-with-Response",
"status": 404,
"ok": false,
"body": "await response.json()",
"view": "not-found-message"
}
}
]
}- request / response
- HTTP/1.1 öğretim gösterimi; DevTools raw capture değil. Headers/body boş CRLF satırıyla ayrılır.
- Content-Length / bodyUtf8Bytes
- Body octet sayısı; compression uygulanmaz. Unicode karakter sayısından farklı olabilir.
- X-Lab-Request-Id / requestId
- Bu örneğin özel correlation alanı; HTTP standardı değil.
- trace[].actor / event / transport
- Server-side processing ve local storage adapter çağrısı; network protocol kaydı değil.
- browserExpected
- HTTP Response, body read ve view için beklenen ayrı sonuçlar.
Sentetik selected-header gösterimi; tam RFC-compliant server transcript veya lab output iddiası yok. Tarih/diğer browser headers’ı atlanır. HTTP/2–3 framing, streaming packetization, DNS/TLS ve real persistence modellenmez. Header’ın adı gerçek lab uygulamasında farklıysa o uygulamanın sözleşmesi esas alınır.
URL · path, query ve fragment
https://books.example:8443/catalog/atlas?lang=tr&tag=network&tag=web#summary- host
- Host, açık port ile books.example:8443 olur. Hostname ise books.example olarak kalır.
- origin
- HTTP(S) origin scheme, hostname ve etkin port’tan oluşur; path veya query bu sınırı değiştirmez.
- tag
- Query aynı tag adını iki kez içerir. İki alan da korunur; tek bir get sonucu bütün değerleri temsil etmez.
- hash
- Fragment #summary URL’de bulunur; HTTP request target’ına eklenmez.
- httpOriginForm
- Path ve query birlikte gösterilir. Fragment’in bu değerde bulunmamasını karşılaştır.
Sentetik öğretim metni. Ayrıştırma URL alanlarını veya cookie çiftlerini gösterir; browser policy, storage ya da server session sonucunu üretmez.
Cookie · request’te gönderilen çiftler
hd_language=tr; hd_view=compact- hd_language
- Gönderilen dil tercihi. Bu name/value çifti kimlik veya kitap erişim izni değildir.
- hd_view
- İkinci preference çifti. Request Cookie metni Path, HttpOnly veya SameSite attribute’larını geri taşımaz.
Sentetik öğretim metni. Ayrıştırma URL alanlarını veya cookie çiftlerini gösterir; browser policy, storage ya da server session sonucunu üretmez.
Set-Cookie · response’taki tercih ve scope
hd_language=tr; Path=/- hd_language
- Response yeni bir dil tercihi önerir. Metni okumak browser’ın bunu kabul edip sakladığını kanıtlamaz.
- Path
- Request path eşleşmesi için scope attribute’ı. Request Cookie çiftlerine dahil edilmez; güvenlik izolasyonu sağlamaz.
Sentetik öğretim metni. Ayrıştırma URL alanlarını veya cookie çiftlerini gösterir; browser policy, storage ya da server session sonucunu üretmez.