הרמת שרת WEB לאוויר עם NodeJS

בלי כתוביותעם כתוביות

מילון מושגים:

Node.js - סביבת ריצה שמאפשרת להריץ קוד JavaScript מחוץ לדפדפן, בעיקר בצד השרת.

HTTP - פרוטוקול להעברת דפי אינטרנט ונתונים בין דפדפן לשרת. הגרסה המאובטחת שלו היא HTTPS.

תגובה - המידע שהשרת מחזיר ללקוח בתשובה לבקשה, הכולל בדרך כלל נתונים וקוד סטטוס.

URL - הכתובת שמזהה משאב באינטרנט, למשל דף אתר, וכוללת פרוטוקול, שם מארח ונתיב.

GET - שיטת HTTP לבקשת מידע מהשרת בלי לשנות אותו. הפרמטרים מועברים בדרך כלל בכתובת.

POST - שיטת HTTP לשליחת נתונים לשרת כדי ליצור או לעדכן משאב, למשל שליחת טופס.

HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.

Localhost - שם המפנה למחשב המקומי עצמו (כתובת 127.0.0.1), המשמש לבדיקת שירותים הרצים על אותו מחשב.

הרמת שרת WEB לאוויר עם NodeJS

הסרטון מראה איך מרימים שרת HTTP פשוט ב-Node.js בעזרת מודול ה-http המובנה, בלי להתקין שום דבר.

מודול http

1. require: const http = require('http'). המודול מובנה, ויכול לשמש גם כלקוח וגם כשרת.

2. createServer: מחזירה אובייקט שרת. הפונקציה שמועברת אליה מקבלת request ו-response.

טיפול בבקשה

1. method ו-url: request.method מחזיר GET או POST, ו-request.url מחזיר את הנתיב שנתבקש.

2. תשובה: response.statusCode = 200, ו-response.setHeader('Content-Type', 'text/html'), ואז response.end עם התוכן.

3. הרבה דפים: כשיש הרבה נתיבים, בודקים את request.url בתנאים. נתיב שלא מוכר מחזיר סטטוס 404 וטקסט שהדף לא קיים.

הרצה ובדיקה

1. listen: server.listen(3000) מאזין על פורט 3000.

2. הדפדפן: גלישה ל-localhost:3000 עם נתיב מתאים מציגה את הדף שנבחר.

3. view source: מראה שה-HTML לא תקין, כי הוחזר רק הטקסט בלי תגיות <html>, <head> ו-<body>.

כתיבת HTML כמחרוזת בתוך הקוד מסורבלת, ולכן הסרטון הבא מציג את Express כדרך פשוטה יותר. אחרי הסרטון אפשר להרים שרת שמקבל בקשות ומחזיר תשובות לפי הנתיב.

השיעור הבא בקורס: Express Package

פרקי ההרצאה: הרמת שרת WEB לאוויר עם NodeJS

תמלול ההרצאה: הרמת שרת WEB לאוויר עם NodeJS

הטקסט המלא של הדקות הראשונות בהרצאה «הרמת שרת WEB לאוויר עם NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

00:02
אז אחרי שראינו את הפרוטוקול תקשורת של ה-HTTP אנחנו רוצים להרים סרבר לאוויר. זה אחד השימושים הכי נפוצים של Node.js. Node.js הרי זאת מערכת שנמצאת בסרבר סייד, היא משרתת את הלקוחות, היא מהווה סרבר ללקוחות.
00:22
אנחנו רוצים לקבל מהלקוח בקשה ולהחזיר לו תשובה. לצורך כך היה חשוב לנו להבין את פרוטוקול התקשורת HTTP. בואו קודם כל נראה מה אנחנו צריכים לעשות בשביל באמת להוות סרבר.
00:37
בואו ניקח מודול קיים בתוך Node.js שנקרא HTTP. אז אנחנו מבצעים require של HTTP, המודול הזה קיים, אנחנו לא צריכים להתקין שום דבר בשבילו.
00:51
מודול HTTP מסוגל להוות גם קליינט וגם סרבר, מה זאת אומרת? אני יכול בעזרת HTTP לבקש בקשה מאתר אחר כאילו שאני Client Side, כאילו שאני עכשיו יוזם את ה-Request ואני יכול כ-Server Side to Create Server ולהיות זה שמקבל את הבקשות מקליינטים.
01:19
Node.js יכולה גם בשרת שלי, יכול גם לגלוש לשרת אחר ולקבל תשובה ואז הוא יהווה קליינט והוא יכול גם להוות סרבר ולקבל בקשות מלקוחות ולהחזיר להם תשובות.
01:33
אנחנו כרגע הולכים להתעסק עם להיות סרבר, זה הדבר המרכזי שאנחנו מהווים בתור Node.js. אבל כמובן שבהמשך בנושא מאוחר יותר אנחנו נראה איך אנחנו בתור Node.js גם יכולים לבקש בקשות מאתרים אחרים, למה לנו בעצם לעשות את זה?
01:52
אולי אנחנו רוצים לבקש בקשות משרתים אחרים לקבל מידע בעצם מהם. את זה אנחנו נראה בהמשך ואז אנחנו נהווה Client Side.
02:04
אנחנו נשתמש ב-HTTP בשביל כאילו להיות הקליינט שמבקש את הבקשה. כרגע אנחנו רוצים להיות סרבר כי זה מה שאנחנו ברוב הזמן בנות.ג'י.אס.
02:14
מקבלים בקשה מקליינט, מאבדים אותה, מחזירים תשובה. אז אנחנו קוראים לפונקציה CreateServer. פונקציה קריט סרבר שכבר אנחנו הולכים לבנות אותה מחזירה לנו אובייקט בואו נקרא לו סרבר והאובייקט הזה מהווה לנו את השרת האמיתי אנחנו צריכים עכשיו לבצע server.listen ולהאזין על איזה שהוא פורט מסוים בוא נניח ניקח
02:44
פורט 3000 זה פורט שהרבה פעמים משתמשים איתו צריך דוגמאות ב-node.js זה אומר שאם גולשים לשרת שלנו ובתוך השרת שלנו נכנסים לפה עוד 3,000 אז אנחנו נמצאים שם, מאזינים ומקבלים את הבקשה.
03:00
אבל רגע, מה אנחנו צריכים לעשות כשאנחנו מקבלים את הבקשה? הרי יכולים לבקש מלא סוגים שונים של דפים ורוצים לקבל דף של ניוז ודף של ספורט ודף של חדשות כאלה וחדשות אחרות, אז איך אנחנו יכולים לדעת מה בעצם מבקשים מאיתנו?
03:19
אנחנו צריכים לבנות כאן פונקציה, בואו נבנה אותה. שהפונקציה הזאת מקבלת אובייקט שמתאר את ה-request ועוד אובייקט שמתאר את ה-response.
03:32
ב-request יש את כל המידע של המסמך request שראינו אותו בסרטון הקודם, וב-response יש את כל המידע שאני הולך להחזיר ללקוח.
03:42
עכשיו אנחנו צריכים להתחיל לראות רגע לאן בדיוק גלשו אלינו. בואו נניח שאם גלשו אלינו, בואו ניקח request.method זה בעצם ה-verb שדיברנו עליו בסרטון הקודם שמתאר את סוג הבקשה האם זה get או האם זה post.
04:04
בואו נניח שאם הבקשה היא get זה אומר שרוצים איזה שהוא דף מסוים וגם אם ה-request.url, url זה החלק של הדף בלבד, בואו נגיד שגולשים לדף News Sports Football HTML. אז אנחנו רוצים כאן להחזיר ליוזר, בואו ניקח קונסט פייג' שווה ונחזיר לו נניח h1, Football News, בואו נסגור h1. איך אנחנו עכשיו מחזירים לו
04:47
את התשובה הזאת? ריספונס מחזיק את כל מה שאנחנו רוצים להחזיר, נקודה right הנה הדף שאנחנו רוצים להחזיר אבל רגע מה עם הסטטוס ומה עם ההדרים שיש אז אנחנו יכולים לשלוט עליהם על ידי זה שאנחנו אומרים לו רספונס נקודה סטטוס קוד הכל בסדר הוא 200 ורספונס נקודה סט הדר בוא תוסיף לי הדר שהשם שלו זה content type והסוג שלו זה טקסט html
05:25
כי אני מחזיר לך בעצם html אז זה הסוג נתונים שאני מחזיר לך. דרך אגב יכול להיות שבי דיפולט זה 200 וטקסט html אז יכול להיות שאנחנו בכלל לא היינו צריכים להגדיר אותם כי זה הדיפולט אבל כרגע רק לצורך הדוגמה אני אראה איך אני כן מגדיר לו סטטוס והדר ספציפיים משלי.
05:52
הנה התוכן של הדף, בואו האמת נשים את זה כאן, נסדר את זה טיפה. ומה שאנחנו רוצים לעשות זה, זה בדיוק מה שאנחנו רוצים להחזיר בחזרה, אבל רגע, אולי גלשו לדף אחר.
06:09
בואו ניקח את כל זה, נשכפל, ואולי רצו גט, אבל רצו בסקטבול html. חדשות לגבי בסקטבול ולא פוטבול.
06:25
בואו נניח שאנחנו עכשיו רוצים פה לרשום בסקטבול