WEB / PROTOCOL LAB
Open the boundaries of HTTP and state.
Follow HTTP outcomes separately from browser state. Then inspect Cookie and Set-Cookie fields separately.
Follow messages separately from state changes.
Follow how an HTTP response leads to a browser outcome and why the cookie jar and session store remain separate.
- Step through the request flow
Use Next in the first scene to follow the request and response. Read the active actor’s state and separate response receipt from the browser’s subsequent work.
- Compare response and cookie fields
Choose the other outcome under Scenario and steps. Open HTTP response, Cookie and Set-Cookie examples in the artifact reader and compare where status, body and attributes appear.
- Find the state owner
Follow cookie jar and server session store steps in the second scene. Use Inspect another actor to compare both sides’ state; open a linked cookie or session lesson for detail.
You can explain an HTTP outcome, a local browser step and a server session decision separately, rather than treating message arrival as completion of all work.
Read every scenario without motion
Record found
- The intent starts in the browser
The intent to open a book has not reached the server. Other actors do not know this request.
- Browser
- Card pending
- Application
- No request
- Local data source
- No query
- The HTTP request arrived
The method and resource selection reached the application. No record has been read yet.
- Browser
- Waiting for response
- Application
- GET /api/book received
- Local data source
- No query
- The handler runs locally
The application selects a route, interprets input and prepares a read. This stage is not another network message.
- Browser
- Waiting for response
- Application
- Handler → readBook
- Local data source
- No query
- The read reached persistence
Data access in this example is a local call in the same process. The separate card shows logical responsibility, not another database host or network packet.
- Browser
- Waiting for response
- Application
- Waiting for read result
- Local data source
- readBook request received
- The data layer determines a result
The Atlas Notları record was found. A row existing does not mean the browser has learned anything.
- Browser
- Waiting for response
- Application
- Waiting for read result
- Local data source
- Result: Atlas Notları
- The read result is in the application
The application received the result; serialization and HTTP status selection are its responsibility.
- Browser
- Waiting for response
- Application
- Result: book row
- Local data source
- Read complete
- The HTTP response was prepared
The application prepares a JSON representation and 200 status. The browser has not received this response.
- Browser
- Waiting for response
- Application
- 200 + JSON ready
- Local data source
- Read complete
- Response headers reached the browser
fetch() may resolve when status and headers are available. The body need not be complete and the DOM need not be updated.
- Browser
- 200 headers; body pending
- Application
- Response sent
- Local data source
- Read complete
- The body was read and interpreted
Application code awaits a separate async body read such as response.json(). JSON being available does not automatically update the card.
- Browser
- 200 JSON ready; UI unchanged
- Application
- Response sent
- Local data source
- Read complete
- Application code updated the UI
Code reads the body and updates the DOM. HTTP receipt and the UI update are separate stages.
- Browser
- UI: Atlas Notları
- Application
- Request complete
- Local data source
- Read complete
Record missing
- The intent starts in the browser
The intent to open a book has not reached the server. Other actors do not know this request.
- Browser
- Card pending
- Application
- No request
- Local data source
- No query
- The HTTP request arrived
The method and resource selection reached the application. No record has been read yet.
- Browser
- Waiting for response
- Application
- GET /api/book received
- Local data source
- No query
- The handler runs locally
The application selects a route, interprets input and prepares a read. This stage is not another network message.
- Browser
- Waiting for response
- Application
- Handler → readBook
- Local data source
- No query
- The read reached persistence
Data access in this example is a local call in the same process. The separate card shows logical responsibility, not another database host or network packet.
- Browser
- Waiting for response
- Application
- Waiting for read result
- Local data source
- readBook request received
- The data layer determines a result
This controlled case has no record. The application will choose the HTTP status later.
- Browser
- Waiting for response
- Application
- Waiting for read result
- Local data source
- Result: no record
- The read result is in the application
The application received the result; serialization and HTTP status selection are its responsibility.
- Browser
- Waiting for response
- Application
- Result: null
- Local data source
- Read complete
- The HTTP response was prepared
The application prepares a JSON representation and 404 status. The browser has not received this response.
- Browser
- Waiting for response
- Application
- 404 + JSON ready
- Local data source
- Read complete
- Response headers reached the browser
fetch() may resolve when status and headers are available. The body need not be complete and the DOM need not be updated.
- Browser
- 404 headers; body pending
- Application
- Response sent
- Local data source
- Read complete
- The body was read and interpreted
Application code awaits a separate async body read such as response.json(). JSON being available does not automatically update the card.
- Browser
- 404 JSON ready; UI unchanged
- Application
- Response sent
- Local data source
- Read complete
- Application code updated the UI
Code checks the status and displays a not-found message. A 404 does not necessarily reject the fetch Promise.
- Browser
- UI: book not found
- Application
- Request complete
- Local data source
- Read complete
READ THE EXAMPLE TOGETHER
Two HTTP outcomes and local processing traces
Select a field and examine what it supports and where the evidence ends.
Read the raw artifact and field explanations
{
"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 teaching representation, not raw DevTools capture; an empty CRLF line separates headers and body.
- Content-Length / bodyUtf8Bytes
- Body octets without compression, potentially different from Unicode character count.
- X-Lab-Request-Id / requestId
- Custom example correlation field, not an HTTP standard.
- trace[].actor / event / transport
- Server processing and local adapter calls, not network protocol records.
- browserExpected
- Distinct expected outcomes for HTTP Response, body reading and view.
Synthetic selected-header representation, not a complete RFC-compliant server transcript or claimed lab output. Date and other browser headers are omitted. HTTP/2–3 framing, packetization, DNS/TLS and real persistence are not modeled. If the real lab uses another correlation header, its implementation contract governs.
URL · path, query and fragment
https://books.example:8443/catalog/atlas?lang=tr&tag=network&tag=web#summary- host
- Host includes the explicit port: books.example:8443. Hostname remains books.example.
- origin
- An HTTP(S) origin is formed from scheme, hostname and effective port; path or query does not change this boundary.
- tag
- The query contains the tag name twice. Both fields are preserved; a single get result does not represent all values.
- hash
- The #summary fragment is present in the URL; it is not appended to the HTTP request target.
- httpOriginForm
- Path and query are shown together. Compare this value with the fragment, which is absent here.
Synthetic teaching text. Parsing shows URL fields or cookie pairs; it does not produce browser policy, storage or server session results.
Cookie · pairs sent in a request
hd_language=tr; hd_view=compact- hd_language
- A sent language preference. This name/value pair is neither an identity nor a book access permission.
- hd_view
- A second preference pair. Request Cookie text does not carry Path, HttpOnly or SameSite attributes back.
Synthetic teaching text. Parsing shows URL fields or cookie pairs; it does not produce browser policy, storage or server session results.
Set-Cookie · preference and scope in a response
hd_language=tr; Path=/- hd_language
- The response proposes a language preference. Reading the text does not prove the browser accepted and stored it.
- Path
- A scope attribute for request path matching. It is absent from request Cookie pairs and does not provide security isolation.
Synthetic teaching text. Parsing shows URL fields or cookie pairs; it does not produce browser policy, storage or server session results.