בניית צ'אט באתר
allSockets, להוסיף סוקט בכל התחברות ולרוץ עליו בלולאה עם emit. אבל אין צורך, כי socketServer.sockets כבר מכיל את כל הסוקטים המחוברים, וקוראים לו emit ישירות.Connect וכפתור Disconnect שקורא לפונקציה disconnect של הסוקט. כותרת צ'אט, תיבת טקסט עם placeholder של "message" וכפתור Send בתוך form, כשהשדה מסומן required כדי לחייב להקליד משהו.id, קוראים את value שלה ושולחים עם emit. אחר כך מאפסים את התיבה וחוזרים עם focus אליה.div בשם divMessages מקבל את ההודעות שמתקבלות מהשרת, עם ירידת שורה בין הודעה להודעה. מעצבים אותו ב-styles.css: רוחב 90 אחוז, גובה 300 פיקסלים, מסגרת של פיקסל אחד, ו-margin ו-padding של 10.form מנסה לבצע submit ומרענן את הדף, ולכן צריך להגדיר אותו כ-type="button".div (divMessages) מנעה את הצגת ההודעות עד שתוקנה.פרקי ההרצאה: בניית צ'אט באתר
תמלול ההרצאה: בניית צ'אט באתר
הטקסט המלא של הדקות הראשונות בהרצאה «בניית צ'אט באתר» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
בואו ניקח את האפליקציה הזאת ונהפוך אותה לצ'אט. כל הלקוחות יכולים לדבר עם כל הלקוחות. הצ'אט הכי פשוט שיכול להיות. אבל כאשר לקוח שלח לנו הודעה, קודם כל הוא התחבר ואז הוא שלח הודעה, אנחנו החזרנו לו את ההודעה.
איך אנחנו מחזירים את ההודעה לכל הלקוחות? אז שיטה אחת תהיה לפתוח פה, ניקח לזה All Sockets, וזה פשוט יכול להיות איזשהו מערך, וברגע שלקוח מתחבר נוסיף ל-all sockets את ה-socket אליו, זה בעצם הפקודה שמוסיפה למערך את ה-socket שקיבלנו פה, ואז במקום לשלוח לו את ההודעה נרוץ על כל ה-sockets
של כל המערך, const, נקרא לזה s of all sockets, נבצע s נקודה אמית ואז אנחנו שולחים את ההודעה לכל הלקוחות המחוברים כמובן ברגע שאנחנו מתנתקים אז אנחנו צריכים לחפש את אותו הסוקט ולהיפטר ממנו אבל אין לנו צורך לעשות את זה בואו רגע נוריד את כל הקודים האלה
מפני שיש לנו את socket server.sockets שאנחנו רואים פה, זה כל הסוקטים המחוברים. כל מה שאנחנו צריכים לעשות זה emit מכל הסוקטים המחוברים.
אז זה בעצם זהה ללולאה שדיברנו עליה מקודם. עכשיו ה-server תומך סליחה, הסרבר תומך בשליחה של ההודעה לכל הלקוחות. בואו טיפה נשכלל את זה, כאן יהיה Client has been connected, Total Clients, Client has been disconnected, זה בסדר, Client Message זה בסדר, אבל ניפטר מזה ופשוט
נשלח לו את אותה המודעה. Client שלח לי איזושהי הודעה, הדפסתי אותה על הקונסול ואני שולח אותה לכל הלקוחות. פה סיימנו את צעד בואו נעבור וטיפה נצ'קלל את צד הקליינט נעשה פה עוד לחצן של דיסקונקט יש לנו פה דיסקונקט אחלה בואו ניקח כאן איזה בר נעשה פה אולי סוקט אייר צ'אט איזושהי הודעה
כזאת ויש לנו פה את הלחצן send ניקח input טקסט בוקס ניקח פלייס הולדר נשים פה מסג׳ נעטוף את כל הסיפור הזה באיזשהו פורם האמת אפשר לעטוף לא נעטוף את הכל נעטוף רק את זה פורם ואז מה שאנחנו יכולים לעשות ולשים כאן רקוויירד ואז זה אומר שאי אפשר ללחוץ על הלחצן כי הוא נמצא בתוך פורום בלי באמת
למלא איזושהי ולידציה קטנטנה כזאת ועכשיו כאן נעשה איזה דיב של כל המסג'ז שאליה אנחנו בעצם רוצים להוסיף את המסג' שהיוזר שלח ניתן לה אולי טיפה סטיילינג אחרת יהיה לנו קשה לראות את זה סטיילס נקודה css ונצרף את הסטיילס css לפה ויש לנו לינק רייל טייל שיט ויש לנו פה href שווה סטיילס css מעולה אפשר להיפטר גם
מרווחים מיותרים ונראה לי שזה יעשה את העבודה אורייט בואו ניגש לאינדקס יש לנו פה את הלחצן קונקס בסדר, בואו נשכפל ללחצן ה-disconnect שב-disconnect אנחנו קוראים לפונקציה disconnect דרך הסוקט בצורה כזאת, אין צורך בשום דבר כאן.
דבר נוסף, יש לנו את ה-send message ויש לנו את זה. send message שולחת את ההודעה, ההודעה צריכה להיות ההודעה שהתקבלה מתיבת הטקסט, אז בואו ניקח כאן const וניתן לתיבת הטקסט id text box message ואז יש לנו document get element תביא לי תיבת הטקסט
ואני רוצה לשלוח את הvalue שנכנס בתיבה. זה שולח לנו את ההודעה, אפשר מיד אחר כך to clear it. בואו נלך לvalue אכפס אותו ופוקוס בשביל שהפוקוס ייכנס בחזרה לתיבה.
מה עוד אפשר לבצע?