PracticU

הסבר על Socket.io

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › הסבר על Socket.io
מילון מושגים:
ספרייה - אוסף קוד מוכן, כמו פונקציות ומחלקות, שמפתחים משתמשים בו בתוכניותיהם במקום לכתוב הכול מחדש.
דפדפן - תוכנה שמציגה דפי אינטרנט ומריצה את הקוד שבהם, ומאפשרת לגלוש בין אתרים, למשל Chrome או Firefox.
Node.js - סביבת ריצה שמאפשרת להריץ קוד JavaScript מחוץ לדפדפן, בעיקר בצד השרת.
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
לקוח - תוכנה או מחשב שפונים לשרת ומבקשים ממנו שירות או מידע, למשל דפדפן שמבקש דף אינטרנט.
HTTP - פרוטוקול להעברת דפי אינטרנט ונתונים בין דפדפן לשרת. הגרסה המאובטחת שלו היא HTTPS.
בקשה - פנייה שלקוח שולח לשרת כדי לקבל מידע או לבצע פעולה. השרת מחזיר עליה תגובה.
תגובה - המידע שהשרת מחזיר ללקוח בתשובה לבקשה, הכולל בדרך כלל נתונים וקוד סטטוס.

הסבר על Socket.io
Socket.io היא ספרייה לתקשורת דו-כיוונית בין הדפדפן לשרת. יש לה חלק בשרת עם Node.js וחלק של JavaScript בצד הלקוח. ההרצאה מסבירה את הרעיון והארכיטקטורה לפני שמתחילים לכתוב קוד.
איך זה עובד
1. הבעיה ב-HTTP רגיל: הלקוח תמיד יוזם request והשרת מחזיר response. זה מתאים לבקשות כמו רשימת מסעדות בתל אביב, אבל לא כשהשרת רוצה ליזום הודעה בעצמו.
2. דוגמאות לצורך: Push Notification על הודעה חדשה באימייל, או אתר מכרז שבו לקוח אחר הציע הצעה והשרת רוצה להעביר אותה ללקוח.
3. פתרון ישן: הלקוח שואל את השרת כל שנייה אם יש הודעה חדשה, מה שמעמיס על התקשורת. Socket.io היא אחת הטכניקות שפותרות זאת.
4. סוקטים: הלקוח יוזם חיבור, ונוצר לו socket בצד אחד של קו התקשורת וגם socket בצד השרת. כל socket מחובר רק לסוקט אחד בצד השני. לאחר שהקו קם, אין request ו-response אוטומטיים.
5. תקשורת בשני הכיוונים: הלקוח מזרים מידע דרך הסוקט שלו והוא יוצא בשרת. השרת, בכל זמן, יכול להזרים מידע דרך הסוקט שלו והוא יוצא אצל הלקוח, בלי קשר לתקשורת קודמת.
6. כמה לקוחות: לכל לקוח סוקט משלו, ולשרת יש סוקט נפרד לכל אחד. כשלקוח אחד שולח הודעה, השרת יכול להעביר אותה לכל הלקוחות, גם לזה ששלח אותה. כך בנויים צ'אט או מכרז.
7. המשך הקורס: מרימים את Socket.io קודם בשרת, אחר כך בלקוח, ומחברים ביניהם. בסוף בונים אפליקציית צ'אט פשוטה.
אחרי ההרצאה אפשר להסביר מה ההבדל בין תקשורת HTTP רגילה לבין תקשורת Socket.io, ומתי כדאי להשתמש בה.
השיעור הבא בקורס: שימוש ב-Socket.io בצד שרת

פרקי ההרצאה: הסבר על Socket.io

  1. 00:00

    מהו Socket.io ושני חלקיו

  2. 00:40

    תקשורת HTTP רגילה

  3. 01:35

    הבעיה בהודעות יזומות מהשרת

  4. 02:32

    תקשורת בעזרת Socket.io

  5. 03:07

    סוקט בכל צד של הקו

  6. 03:45

    ביסוס קו תקשורת בין סוקטים

תמלול ההרצאה: הסבר על Socket.io

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

  1. 00:04

    אנחנו מגיעים לנושא חדש לגמרי בשם Socket.io. בואו קודם כל נבין מה זה Socket.io. Socket.io זו ספרייה שמאפשרת תקשורת דו-כיוונית בין הדפדפן לבין הסרבר שלנו.

  2. 00:21

    היא בנויה משני חלקים. חלק אחד, יש לה את החלק של הספרייה בסרבר בעזרת Node.js, והחלק השני זה ספרייה של JavaScript שנמצאת בצד הלקוח.

  3. 00:36

    אז בואו נבין רגע מה זה מאפשר לנו. ראשית בואו נזכר מה זה אומר תקשורת HTTP רגילה. יש לנו סרבר כמובן השירות שלנו האתר שלנו לא משנה מה נמצא בסרבר סייד ויש לנו את הקליינט שיש לו דפדפן או כל תוכנה אחרת שהיא קליינט סייד.

  4. 00:57

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

  5. 01:14

    רק אז הסרבר יודע שמישהו פנה אליו, הוא כמובן יודע איזה קליינט זה, ומחזיר לו ריספונס ואז הקליינט מקבל את הריספונס.

  6. 01:23

    אוקיי, מה הבעיה? אז ברוב הגדול של המקרים אין פה שום בעיה. לקוח רוצה דף של כל המסעדות בתל אביב, אין בעיה, אז הוא עושה ריקווסט לסרבר, הסרבר מוציא את המידע מהדאטאבייס ומחזיר לו ואז הלקוח רואה את כל המסעדות בתל אביב.

  7. 01:41

    מעולה. אבל יש מקרים לוגיים שהדבר הזה לא מספק אותנו. לדוגמה, מה בקשר לכל הנושא של פושט נוטיפיקיישנס?

  8. 01:52

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

  9. 02:08

    אז בעבר פתרו את הסיטואציה הזאת בכל מיני דרכים. לדוגמה קליינט כל שנייה יוזם ריקווסט ללקוח רק בשביל לשאול: יש לך הודעה חדשה? הסרוור אומר לו: לא. יש לך הודעה חדשה?

  10. 02:22

    לא. יש לך הודעה חדשה? לא. וזה כמובן מעיק על התקשורת ביניהם. ויש עוד כל מיני טכניקות שניסו בשביל לפתור את הסיטואציה. אחת מהן שהיא מאוד מאוד נפוצה היום וכמובן ממומשת ב-Node.js, בין היתר היא Socket.io Communication.

  11. 02:40

    אז מה זה בעצם Socket.io? יש לנו את הסרבר שלנו, יש לנו את הקליינט, וכאשר הקליינט רוצה עכשיו לתקשר בעזרת הטכניקה הזאת של Socket.io, אז הוא יוצר משהו שנקרא Socket.

  12. 02:54

    Socket בתרגום חופשי ושקע. זה בעצם נקודת התקשורת ל-socket שנמצא בצד השני אחד בלבד.

  13. 03:07

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

  14. 03:30

    אז כל לקוח יש לו סוקט אחד ויש לו את הסוקט שמייצג אותו בצד של השרת אם יהיה לי כמה לקוחות לכל לקוח יהיה את הסוקט שלו וכל הסוקטים האלה מחוברים לסוקט שלהם כל אחד שלהם בצד של השרת אנחנו נראה את זה בשלב מאוחר יותר.

  15. 03:50

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

  16. 04:10

    רק ביססנו קו תקשורת, התחברנו.

לקורס המלא: קורס NodeJS אונליין בעברית

ההרצאה הקודמת: שימוש ב-Cache עבור טבלאות של MySQL

ההרצאה הבאה: שימוש ב-Socket.io בצד שרת

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React