DAY 44 HTML and HTTP Server Interaction Notes

HTML and HTTP Server Interaction Notes

I. Text Type (HTML) Processing

1. Content-Type Setting

   The server sets Content-Type: text/html;charset=utf-8 for HTML files via the send_head function to ensure proper display of Chinese characters (e.g., "Looking ahead to 2026, China's real estate policies..." in 01.html).

   Code snippet:

   case FILE_HTML:  
       http_cmd[2] = "Content-Type: text/html;charset=utf-8\r\n";  
       break;  

2. HTML File Features

   • 03.html: Login form page, submits data to the /login path via the form tag, including username (username) and password (userpass) input fields.
   • 01.html: Login success page, containing text, headings, lists, image references (1.jpg, 2.png), hyperlinks, and other HTML elements.
   • 02.html: Redirect page with a red background, accessible via the "go to 2" link in 01.html.
   • 04.html: Login failure page, displaying a "Wrong password" prompt.

II. JPEG Type Processing

1. Identification and Response

   The server identifies JPEG files by checking the URL suffix (.jpg), sets Content-Type: image/jpeg, and sends the corresponding file (e.g., 1.jpg referenced in 01.html).

   Code snippet:

   else if (strlen(url) > 4 && 0 == strcmp(&url[strlen(url) - 4], ".jpg"))  
   {  
       send_file(conn, url + 1, FILE_JPG); // url+1 removes the prefix "/" to directly access the filename  
   }  

2. Notes

   • Ensure JPEG files (e.g., 1.jpg) are in the same directory as the server program; otherwise, the open function will report an error.
   • The server retrieves the file size via the file_size function and sets content-length in the response header for the client to receive the complete file.

III. Short Dialogue (Single Request-Response)

1. Interaction Flow

   The client (browser) and server interact in a "short dialogue" mode:

   • The client sends an HTTP request (e.g., GET /login?username=zhangsan&userpass=123 HTTP/1.1).
   • The server parses the URL, verifies parameters, and returns the corresponding file (01.html or 04.html).
   • After responding, the server closes the connection via close(conn) (Connection: keep-closed).

2. Code Implementation

   The main loop accepts connections via accept, processes the request, and immediately closes the connection:

   while (1)  
   {  
       int conn = accept(listfd, (SA)&cli, &len);  
       // Process request (recv, parse URL, send_file)  
       close(conn); // Short dialogue: close connection after one request  
   }  

IV. Long Dialogue (Persistent Connection)

1. Current Limitations

   The existing code does not support long dialogues because the response header sets Connection: keep-closed, and the connection is actively closed after each request.

2. Implementation Approach

   To support long dialogues (handling multiple requests on the same connection), modifications are needed:

   • Set the response header to Connection: keep-alive.
   • The server does not immediately close conn but continues to receive requests from the same connection in a loop (until the client disconnects).
     Example pseudo-code:

   // Modify Connection in send_head  
   http_cmd[4] = "Connection: keep-alive\r\n";  
   
   // Process multiple requests in a loop  
   while (1) {  
       int ret = recv(conn, buf, sizeof(buf), 0);  
       if (ret <= 0) break;  
       // Parse and process request...  
   }  
   close(conn);  

V. Summary

• The server distinguishes request types (HTML, JPG, PNG, etc.) via URL parsing and sets the correct Content-Type.
• Short dialogues are suitable for simple requests, easy to implement but less efficient; long dialogues require persistent connections and are ideal for multiple consecutive requests (e.g., pages with multiple image resources).
• HTML files form an interaction loop with the server via form elements, hyperlinks, etc. (e.g., login flow).