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

ngminhtrung 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

ngminhtrung

29 bài viết.
14 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
25 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...
ngminhtrung viết 2 tháng trước
25 5
White
4 11
Nói thực, tôi cũng không biết gì về (Link) cho đến hôm bị cô bạn (Linh Ngô) đè ra cài ngấu nghiến trên máy và bảo cái này là "bắt buộc" nếu dùng Ma...
ngminhtrung viết 1 tháng trước
4 11
White
4 0
Vẽ Spirograph bằng D3.js Chắc hồi trẻ con ai cũng đã từng một lần nghịch 1 cái thước "sáng tạo" tên là "Spirograph" (/ˈspīrəˌɡraf/). Khi ấy ta đặt...
ngminhtrung viết 30 ngày trước
4 0
Bài viết liên quan
White
2 0
D3.js Biểu diễn dữ liệu dạng tree bằng việc trải nó ra trên bản đồ Series Today I Learn trong vòng 100 ngày thử thách bản thân ngày 15. Mỗi ngày 1...
ngminhtrung viết 13 ngày trước
2 0
White
18 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 hơn 1 năm trước
18 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
29 bài viết.
14 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á!