תרגיל 24 - תוכנת צ'אט - חלק 2
פרקי ההרצאה: תרגיל 24 - תוכנת צ'אט - חלק 2
תמלול ההרצאה: תרגיל 24 - תוכנת צ'אט - חלק 2
הטקסט המלא של הדקות הראשונות בהרצאה «תרגיל 24 - תוכנת צ'אט - חלק 2» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו ממשיכים לעשות את הצ'אט שלנו ובואו נראה מה עשינו עד עכשיו ויש לנו את הממשק הגרפי של הצ'אט שיש לנו מקום לכתוב היסטוריה כאילו כל ההיסטוריה של ההודעות ומקום להודעה חדשה וכפתור של לשלוח את זה לשרת אנחנו ממשיכים לבנות את הצ'אט כשאנחנו לוחצים send הדף בעצם לא קורה לו כלום הוא נשאר במקום לא מתרפרש וזה שולח עם אג'קס לשרת,
והשרת שומר את המידע בתוך הדאטאבייס. בואו נראה, הנה יש לנו כרגע בדאטאבייס את ההודעות האלו, שימו לב, יש לנו מזהה של יוזר, יש לנו יוזר איי-די, יש לנו יוזר מספר 111 ו-222.
היוזר איי-די זה מזהה של יוזר שאנחנו הולכים לייצר משהו אקראי לכל משתמש חדש שנכנס, וזה יישמר כקוקי. קוקי זה משהו שאנחנו נותנים ליוזר. כשאנחנו מקבלים בקשה מהיוזר, מחזירים לו קוקי, והקוקי הזה, יוזר מביא לנו חזרה כשהוא נכנס לדף עוד פעם.
קוקי זה כמו כרטיס כזה, שכששילמת בקופה אתה מקבל כרטיס, ועם הכרטיס אתה יכול ללכת לדלת אחרת ולהיכנס לאנשהו. זאת אומרת שקוקי נשמר אצל היוזר.
כמו שאתם רואים, יש לי פה קוקי ממשהו אחר שעשיתי שזה שפה שהיוזר בחר נניח רוסית השפה של האתר אינטרנט כשאתה בוחר זה באתר שיש לו הרבה שפות אז קוקי נשמר מקומית בתוך הדפדפן וכשיוזר גולש עוד פעם לאתר
הוא מביא את הקוקי הזה לאתר והאתר יודע מידע לגביו לדוגמה הוא יודע שעברת בדיקה של שם וסיסמה או איזה שפה אתה מעדיף עכשיו מאיפה הקוקי הזה מלכתחילה מגיע?
הוא מגיע מלכתחילה מהשרת. זאת אומרת, השרת נותן לך את הקוקי ואתה מביא לו אותה בחזרה. למה? כי השרת של HTTP עקרונית הוא סטייטלס, כאילו, הוא לא זוכר מי אתה.
הוא טיפל בבקשה שלך ושכח אותך. אז אתה לא רוצה שהוא ישכח אותך, אז כדי לפתור את הבעיה הזאת, בסוף הבקשה, בסוף הטיפול, נותנים איזשהו קוקי, שומרים בדאטאבייס, השרת שומר בדאטאבייס או בזיכרון של השרת עצמו בקשר לו את הקוקי שלך, וכשתבוא עוד פעם הוא יזהה אותך, אוקיי?
כמו חותמת כזאת ששמים על היד למי ששילם כסף. אז הקוקי הזה יש לו תוקף ואנחנו יכולים לקבוע לכמה זמן, ואנחנו יכולים גם למחוק אותו. ברגע שנמחק אותו, אז השרת לא יזהה אותנו.
משתמשים בקוקי הזה לדוגמה בעימות של שם וסיסמה. אתה עובר בדיקה של שם וסיסמה, אתה מקבל קוקי. אחרי שקיבלת קוקי, אתה עם הקוקי הזה יכול להיכנס לדפים שמובטחים ובכניסה לדף מובטח בודקים שהקוקי שלך בתוקף והוא תקין.
כך עובדות כל מערכות האבטחה. היתרון של קוקי שגם אם תסגור דפדפן ותפתח אותו, הקוקי יישאר עד שהוא לא יפוג תוקף שנקבע בשרת.
לדוגמה פייסבוק לא מבקשים ממני שם וסיסמה בכניסה לאתר כי הם ביקשו ממני פעם אחת ומאז שמרו את הקוקי ואני נכנס לפייסבוק כל פעם אוטומט. למה אוטומט? כי יש לי את הקוקי שלו.
אם יגנבו לי את הקוקי, אז כאילו גנבו לי את השם והסיסמה. אז לכן גם קוקי נורא חשוב שלא יגנבו אותו. בגלל זה פייסבוק, לדוגמה, בגלל שהם יודעים שיש בעיית אבטחה שאפשר לגנוב את הקוקי, כי זה סך הכל קובץ טקסט בהרדיסק, אז כשאתה משנה איזה שהם פרטים בחשבון שלך, כמו כתובת מייל,
הם מבקשים שתכניס את הסיסמה. הם לא סומכים על זה שיש לך את הקוקי. אז קוקי זה משהו נוח ששרת שולח לקליינט והקליינט שומר אצלו עד לתאריך מסוים או עד סוף הסשן, סשן זה חלונית שפתוחה, ומביא חזרה לשרת את הקוקי הזה וככה שרת יודע שאתה זה אתה, או מה העדפות שלך, או כל מיני דברים כאלו.
וזה נובע מהעובדה ששרת וב ברגע שהוא טיפל בבקשה שלך הוא שכח הכל עליך. הוא קיבל בקשה, טיפל בה, שחרר תשובה וזהו, הוא סטייטלס, אין לו מצבים, אין לו סטייטים. הוא לא זוכר שהוא היה איתך בשיחה לפני כן, הוא מסיים איתך את השיחה ומוחק את הכל מהזיכרון שלו.
כך עובד שרת ה-Web ובשביל לפתור את הבעיה הזאת ימצאו אותו קוקי. למעשה יש עוד דברים אחרים אבל אנחנו לא ניכנס אליהם.
אני מדבר על זה שב-HTML 5 הופיע גם Local Storage, אחסון מקומי, ההבדל בין לוקל סטורג' לקוקי שקוקי תמיד תמיד אוטומט נשלח לשרת לפי הדומיין, לפי שם האתר, קוקי אוטומט נשלח, דפדפן תמיד תמיד שולח את הקוקי לשרת שממנו זה הגיע.
וזה כמו דאטאבייס כזה קטן מקומי, ויש דאטאבייס אמיתי וגדול שנקרא לוקל סטורג' שזה ב-HTML 5 הופיע. אוקיי, אנחנו עכשיו רוצים, מה לעשות? אנחנו רוצים לעשות ליוזר חדש שהגיע, לייצר לו קוקי ומספר אקראי לשמור את זה בדאטה בייס ולפי הקוקי הזה לשלוף את ההיסטוריה שלו ואם בן אדם במשך 90 יום עוד פעם נכנס לצ'אט שלנו אנחנו ממשיכים שיחה מאותה נקודה
רוצים לתת לו קוקי ל-90 יום בואו נעשה את זה אז מה אנחנו עושים אנחנו בעצם מתחילים מזה שאנחנו בודקים האם הבקשה של היוזר יהיה עם קוקי או בלי קוקי אם זה הגיע עם קוקי אז אנחנו שולפים משם את היוזר איי-די שלו את המספר המזהה שלו אם לא אנחנו מייצרים לו מספר אקראי מזהה אקראי אז בואו נתחיל כדי לעבוד עם קוקי יש מחלקה מוכנה קלאס
מוכן מחלקה מוכנה שיודעת לטפל בקוקי שנקראת קוקי הדר קוקי הדר ו-values זה המחלקה והיא נמצאת בתוך הניימספייס שנקרא system.net.http.headers הניימספייס למעשה זה קיבוץ ביחד קבוצה של מחלקות זאת אומרת יש לנו הרבה מאוד מחלקות הרבה מאוד מחלקות שמהם אנחנו מייצרים אובייקטים
אנחנו צריכים לכווץ אותם ביחד לניימספייסים לקבוצות לדוגמה המחלקה שלי היא בתוך ניימספייס שנקרא chat.controllers בגלל שיש כל כך הרבה אובייקטים כדי שהם גם השמות לא יחזרו על עצמם לא יהיה לנו כפל של שמות וגם יהיה לנו נוח לזהות אותם לכל כל אובייקט יש לו כמו משפחה שאליה הוא שייך
המשפחה הזאת, הקבוצה הזאת, זה השם המלא שלו, ואתם יכולים לראות שאנחנו יכולים לכתוב את השם המלא שלו, כולל ה-Namespace.
אבל במקום לכתוב את זה כל פעם ככה ארוך ידנית, שם משפחה של האובייקט הזה, את ה-Namespace שלו, אנחנו עושים למעלה Using.
יפה. וברגע שיש לנו את ה-Using, אנחנו יכולים להשתמש רק בשם המקוצר של המחלקה. עכשיו, מהמחלקה אפשר לבנות אובייקטים בזיכרון, ואם יש לו משהו סטטי בתוך המחלקה אפשר ישירות להשתמש בזה.
אנחנו נעשה אובייקט שנקרא קוקי ונעשה מופע בזיכרון של המחלקה הזאת. ניצור את האובייקט הזה וניקח את הערך שלו ישירות מתוך הבקשה שהגיעה לשרת. יש אובייקט שנקרא request והוא מכיל את הבקשה שהגיעה לשרת ובפנים יש header הכותרת ויש את ה-content, את התוכן.
לוקחים מתוך הכותרות את הקוקי'ס ומתוך הקוקי'ס לוקחים את הקוקי'ס המזהה שלנו ואם יש כמה ניקח רק את הקוקי'ס הראשונה בלבד אוקיי אז למעשה יצרנו עכשיו אובייקט בזיכרון משתנה שקוראים לו קוקי'ס ויש שם בפנים את הקוקי'ס שהוגיע מתוך הבקשה שהגיעה לשרת מתוך הרקווסט שהגיע לשרת עכשיו צריך לבדוק האם זה באמת קיים כי אם
זה קיים זה משתמש קיים ואם אם זה לא קיים זה משתמש חדש יכול להיות שהיא בכלל אין שמה קוקי אין קוקי רק למי שפעם ראשונה נכנס לצ'אט שלנו אז אנחנו בודקים האם קוקי הוא נעל או לא נעל האם הוא קיים או שהוא לא קיים סימן קריאה שווה זה אומר לא נעל לא נעל זה אומר שהוא קיים ושווה שווה נעל זה אומר שהוא לא קיים יפה אנחנו אומרים שהוא לא נעל מה זה אומר לא נעל זה אומר שהקוקי אכן קיים
ואם הוא אכן קיים זה יוזר שכבר היה אצלנו בדאטאבייס היה לפני כן. אנחנו כותבים Existing Client ואם הוא לא היה כותבים New Client, New User.
כשיהיה לנו משתמש חדש אנחנו ניצור לו מזהה חדש, קוקי חדש, נשמור אותו בדאטאבייס ונשלח לו, תכף נעשה את הכל. טוב, בואו נתחיל.
אנחנו נעשה עכשיו משתנה שנקרא Current User, User הנוכחי וה-ID שלנו זה יהיה String, זה יהיה טקסט וה-current user ID הזה ניקח אותו או מתוך קוקי אם זה משתמש קיים.
זה אומר שאנחנו הולכים לתוך הקוקי ולוקחים את ה-value שלו, את הערך שלו. מה זה ה-value? יש את השם ויש את ה-value, את הערך. אז אנחנו לוקחים מתוך העמודה את ה-value.
יופי, לקחנו, זה לי מקרה שזה משתמש קיים. ומה צריך עכשיו לעשות? עכשיו צריך להכניס את זה לתוך ההודעה, לתוך המסג'. למעשה בתוך ההודעה שהגיעה מהקליינט כבר יש לנו את ה-user ID ואנחנו לא רוצים את ה-user ID שיגיע בתוך ההודעה, אנחנו רוצים שהוא יגיע מתוך ה-cookie.
למה? כי ההודעה הזאת וכל הערכים שלה נמחקים ברגע שאתה סוגר את החלונית, את הדפדפן. רק ה-cookie נשמר. אז בגלל שה-cookie נשמר וכל שאר המידע הולך לאיבוד, אנחנו רוצים שה-user ID יישמר ולכן אנחנו ניקח אותו לא מתוך ההודעה, שנשלחת אלא מתוך הקוקי אז בואו נגזור את זה ונלך לשרת ונגיד שההודעה שהגיעה הצ'אט מסאג'
הזה זה ההודעה בצ'אט שהגיעה השדה של היוזר איידי יהיה מתוך הקוקי היא מתוך קרנט יוזר איידי יפה מאוד אז למעשה לקחנו הוצאנו מכאן את היוזר איידי והוספנו אותו בחזרה בשרת מתוך הקוקי אנחנו בונים את הצ'אט מסאג' הזה כמו שצריך כי אנחנו הולכים לשמור אותו בדעתנו אם נלחץ F12 על ההודעה, נראה את ההגדרה של הקלאס ונראה מאיזה שדות הקלאס הזה מורכב.
יפה מאוד. אנחנו רוצים להרכיב את האובייקט ChatMessage כמו שצריך, לשמור אותו בדאטאבייס. אתם רואים, אנחנו למטה שומרים אותו בדאטאבייס, ולכן אנחנו מרכיבים אותו כמו שצריך עכשיו.
בואו עכשיו נטפל במשתמש חדש. אם יש לנו משתמש חדש, אנחנו נעשה מספר אקראי. נעשה מספר אקראי קודם כל עושים אובייקט של מספר אקראי ועכשיו אנחנו נשתמש באובייקט הזה בשביל לעשות הגרלה של מספר אקראי נניח בין 10,000 ל-100,000 המספר האקראי הזה זה בעצם המזהה של היוזר ועכשיו צריך את היוזר ה-id החדש הזה שהגרלנו להכניס לתוך ההודעה בגלל שזה אותו דבר כמו ב-if למעלה עשיתי את
זה מחוץ ללולאה מחוץ ל-if כדי לא לכתוב פעמיים אותו קוד אז כתבנו ש-Chat Message