Ghi chú Nodejs. Express, và MongoDB - 02 (HTTP request, response)
TIL
589
@100daysTIL
72
White

Minh-Trung Nguyễn viết ngày 02/02/2018

Ghi chú Nodejs. Express, và MongoDB - 02 (HTTP request, response)

Ghi chú: Series Today I Learn trong vòng 100 ngày thử thách bản thân - ngày 10. Mỗi ngày 1 câu hỏi, 1 câu trả lời (ngắn nhất có thể). Mời cả nhà cũng tham gia. Tag đề nghị: #100daysTIL.


Chậc, hôm nào học được điều mới, từ nhỏ đến lớn, rải rác ở các phần, nhưng note ra để post lên không dễ dàng tí nào. Mới được 10 ngày, 10% hành trình. Cần cố gắng cố gắng cố gắng! Hôm nay vẫn tiếp tục với việc học back-end cho dự án làm project với nhóm freeCodeCamp Hà Nội. Việc chỉ biết về front-end, rồi nhảy trực tiếp vào làm back-end với các bạn trong khi chưa có kiến thức nền tảng không đúng tí nào. Nhìn đống code các bạn viết để C-R-U-D các bản ghi trong database MongoDB, tự hỏi và trả lời một số câu hỏi thông qua kiến thức trên developer.mozilla.org, bài Introduction to the server side

Lập trình back-end là gì?

Lập trình back-end (hay lập trình server-side) để chỉ thứ bổ sung cho lập trình front-end (hay lập trình client-side). Nếu như lập trình front-end quan tâm đến giao diện, đến trải nghiệm người dùng, đến HTML, CSS và JavaScript, thì lập trình back-end quan tâm đến việc chọn lọc và gửi đi dữ liệu chứa trong database phù hợp với yêu cầu của người dùng.

Lập trình back-end thao tác với đối tượng nào?

Do phía server liên tục:

  • nhận các HTTP request từ trình duyệt,
  • xử lý các HTTP request
  • lôi dữ liệu từ database ra xử lý theo yêu cầu
  • tạo HTTP response để phản hồi cho trình duyệt

cho nên có 3 đối tượng chính mà lập trình back-end cần học để làm việc:

  1. HTTP request
  2. HTTP response
  3. Data trong database

Trong Express hay có (req,res), đó có phải là request và response.

Chuẩn:

  • req là object HTTP request, đã được Express định dạng lại để chứa các thông tin của một HTTP request
  • res là object HTTP response, đã được Express định dạng lại để chứa các thông tin của một HTTP response

HTTP resquest trông như thế nào?

HTTP request gồm 2 từ, HTTP và request:

  • HTTP là viết tắt của 1 giao thức, tạm gọi đây là quy định về giao tiếp giữa server với trình duyệt.
  • request là yêu cầu. Tức là 1 yêu cầu của trình duyệt đòi server gửi thông tin để render 1 trang web, hoặc gửi 1 file nhạc, file ảnh.

Đã là giao thức, thì bao giờ cũng phải có các tiêu chuẩn quy định hầm bà làng, có thể thì mới giúp 2 bên hiểu nhau trong nhiều tình huống, không bị hiểu nhầm, hiểu sai.

Trong mỗi HTTP request có gì? Có 1 vài thứ:

  • có URL để trỏ đến tài nguyên trên web server mà trình duyệt đang cần. Tài nguyên là gì? file HTML, JS, CSS, hoặc thậm chí 1 file JSON.
  • bản chất của HTTP request. Bản chất? có vài loại, như GET, POST, PUT, UDPATE, DELETE, HEAD. Mỗi cái tương ứng với 1 loại công việc mà trình duyệt yêu cầu web server đáp ứng.
  • data được encoded bên trong body của HTTP request.

HTTP request thực chất là 1 file text. Tùy vào từng loại HTTP request mà file text khác nhau ít nhiều. Ví dụ bên dưới là cho 1 HTTP request dạng GET. Tuy vậy, trong thực tế, người ta dùng dạng POST trong trường hợp người dùng submit form để gửi thông tin đi, do dạng POST encode thông tin vào body của request thay vì để nó ra ngoài URL giống như GET

GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
Host: developer.mozilla.org
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: https://developer.mozilla.org/en-US/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
Accept-Language: en-US,en;q=0.8,es;q=0.6
Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true

Chú ý:

  • Dòng 1 và dòng 2 chứa hầu hết các thông tin ta cần
  • Dòng 1:
    • Phương thức của giao tiếp: GET.
    • Đích đến của URL: /en-US/search.
    • Tham số của URL: q=client%2Bserver%2Boverview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev
    • Phiên bản của giao thức: HTTP/1.1
  • Dòng 2: Website đích: developer.mozilla.org
  • Dòng cuối: client-side cookies.
  • Ngoài ra, còn có các thông tin khác như:
    • Trình duyệt gửi request: Mozilla Firefox (Mozilla/5.0).
    • Trình duyệt chấp nhận nén định dạng gzip
    • Trình duyệt chấp nhật các chuẩn ký tự của ISO-8859-1,UTF-8;q=0.7,*;q=0.7 và ngôn ngữ như de,en;q=0.7,en-us;q=0.3.

Như vậy, web framework như Express.js sẽ biến đoạn plain text trên thành 1 object ký hiệu là req, để từ đó ta truy suất thông tin thông qua các method và properties của req.

HTTP response trông như thế nào?

HTTP response thì mang trong mình nó 2 thứ:

  • Code status, để báo hiệu cho trình duyệt biết là request nó gửi đi được xử lý thành công hay không.
  • Dữ liệu mà trình duyệt cần.

Ví dụ 1 HTTP response nhé:

HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Vary: Accept,Cookie, Accept-Encoding
Content-Type: text/html; charset=utf-8
Date: Wed, 07 Sep 2016 00:11:31 GMT
Keep-Alive: timeout=5, max=999
Connection: Keep-Alive
X-Frame-Options: DENY
Allow: GET
X-Cache-Info: caching
Content-Length: 41823

<!DOCTYPE html>
<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
<head prefix="og: http://ogp.me/ns#">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
  ...

Trong đó:

  • Dòng 1: Mã của response, ỏ đây là 200 OK, báo hiệu là request đã được trả về thành công.
  • Dòng 5: Response chứa text/html, định dạng ký tự chuẩn UTF-8.
  • Dòng cuối: Độ lớn của thong điệp (41823)
  • Phần cuối: Nội dung tex/html để trình duyệt hiển thị. Đem copy paste đoạn cuối này file HTML rồi mở trong trình duyệt ta sẽ dược trang web mình yêu cầu.

Có cách nào tự xem HTTP response và HTTP request cho trang mình đang mở?

Có. Hãy thử 1 trong 4 cách:

  • Sử dụng Fiddler application,
  • Sử dụng web sniffers (ví dụ Websniffer)
  • Browser extensions lnhư HttpFox.
  • Tính năng theo dõi network của trình duyệt (nếu có)

Kết luận

Web framework như Express.js giúp việc đọc các HTTP request, và gửi đi HTTP respose dễ dàng hơn, thay vì phải viết các đoạn code dài lê thê xử lý plain text nói trên, ta có các đoạn code chỉ là tung hứng giữa các object HTTP request và HTTP response.

Từ việc tung hứng với:

  • object HTTP request, ta sẽ quyết định xem yêu cầu của trình duyệt là gì, nhắm vào tài nguyên nào, từ đó router sẽ phân luồng và gọi đến các middleware (handle function) tương ứng.
  • Handle function nào được gọi thì bản thân nó đã liên kết với 1 database model nào đó. Lập trình viên đưa vào các method, tự nó sẽ biết truy vấn vào dữ liệu, để trả về dữ liệu mà trình duyệt đang đi tìm.
  • Lúc nào framework sẽ tạo tiếp object HTTP response, trả về cho trình duyệt tại cổng đã định trước.
  • Trình duyệt sẽ đem cái object HTTP response đó để làm tiếp việc của nó. Ví dụ như HTTP respose chứa 1 file JSON chứa thông tin cua 1 bài viết, thì trình duyệt (thông qua front-end framework) sẽ render nó thành 1 trang web nhất định.

ngminhtrung 01-02-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Minh-Trung Nguyễn

58 bài viết.
72 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
44 15
Đăng lại một bài đã viết từ cách đây mấy tháng. Chủ đề này đã có không ít, nhưng chẳng hiểu sao lượng bài tự viết của dân lập trình người Việt ta v...
Minh-Trung Nguyễn viết 3 tháng trước
44 15
White
27 5
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
Minh-Trung Nguyễn viết 7 tháng trước
27 5
White
16 4
Về bước tìm và xử lý dữ liệu của Việt Nam phục vụ Data Visualization nền web Làm việc với D3js được nửa năm, một trong những điều bận lòng là chưa...
Minh-Trung Nguyễn viết 2 tháng trước
16 4
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 27 ngày trước
0 2
White
19 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 2 năm trước
19 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 12 tháng trước
1 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
58 bài viết.
72 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!