שימוש ב-Socket.io בצד לקוח
index.html עם כותרת, כפתורי חיבור ושליחת הודעה, וקובץ index.js עם הפונקציות.script שה-src שלו מצביע לקובץ socket.io.js של הספרייה שנמצאת ב-Node.js. משם מגיע המשתנה io.socket = io.connect(...). אפשר להעביר כתובת שרת כמו localhost:3000, ואם הלקוח מוגש מאותה כתובת אפשר בלי. מגדירים את socket במשתנה גלובלי עם let ומעבירים את החיבור לפונקציה connect שמופעלת מכפתור.socket.emit עם שם האירוע שהשרת מאזין לו, והמידע, למשל hello from the client.socket.emit עם שם אירוע (message from server) והודעה. בדוגמה נשלחה שלוש פעמים כדי להראות שאפשר לשלוח כמה פעמים, ואחר כך הצטמצמה להודעה אחת.socket.on עם אותו שם אירוע, ובפונקציה מקבלים את ההודעה ומוסיפים אותה לדף, כל הודעה ב-div.let ולא ב-const מגדירים את המשתנה socket, כי הערך מוצב בו אחרי היצירה, ובשלב הראשון זה גרם לשגיאה.emit ו-on חייבים לציין את שם האירוע, ושני הצדדים חייבים להשתמש באותה מחרוזת.פרקי ההרצאה: שימוש ב-Socket.io בצד לקוח
תמלול ההרצאה: שימוש ב-Socket.io בצד לקוח
הטקסט המלא של הדקות הראשונות בהרצאה «שימוש ב-Socket.io בצד לקוח» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כעת בואו נבנה את צד הלקוח אז אנחנו מוסיפים אינדקס html בואו נבנה כאן את האינדקס ויש לנו כאן כותרת socket.io בואו נבנה פה איזשהו לחצן send message ויש לנו כאן onclick send message פונקציה שאנחנו רוצים לכתוב בקובץ javascript נצרף index.js נבנה את הפונקציה send message בואו נראה מה אנחנו צריכים בשביל להתחבר עם
צד הקליינט. אז ראשית אנחנו לוקחים כאן באזור הגלובלי socket שווה io.connect זה בעצם הפונקציה שמבצעת את ההתחברות. אנחנו יכולים לתת לה את בדיוק כתובת השרת localhost 3000. אם נניח אנחנו נמצאים בכתובת אחרת נניח שהקליינט הוא לא בדיוק בכתובת שלה, נשאיר את זה רגע בהערה
אבל אם הוא מגיע מאותה כתובת אז אנחנו אוטומטית עושים את זה והוא מתחבר לשרת שלו. אבל מאיפה מגיע המשתנה סוקט הזה, המשתנה io?
המשתנה io נמצא כאן. קודם כל נגדיר כאן קריפט, ניקח src ואנחנו רוצים ללכת לספריית סוקט io שנמצאת אצלנו ב-node.js בתוכה יש socket.io.js ויש לנו את הכובד שלנו Script והכובד שלנו יש לו את השם שלו היה אינדקס.js בצורה כזאת.
האמת אולי אפשר לא בסדר נראה לי שזה יעבוד לפחות בשלב הזה אז יש לנו כאן את ההתחברות עצמה ובעצם יבצע קונקט ואולי עכשיו כשאני חושב על זה נעשה לחצן קונקט.
בואו ניקח פונקציה קונקט, זה יהיה יותר ברור. נעשה שזה יהיה שווה undefined ואז סוקט מקבל את ההתחברות רק כאשר הופצים על קונקט. איך אנחנו שולחים הודעה?
מה שאנחנו רוצים לעשות זה לבצע סוקט הודעה emit. emit שולח לנו את ההודעה. כאן אנחנו חייבים לתת בדיוק את אותה המחרוזת שהסרבר מאזין עליה, זאת.
בואו ניקח את המחרוזת הזאת לפה, ואז מה המידע שאנחנו שולחים? Hello from the client. זאת ההודעה שאני שולח. זה כל הסיפור.
אז כעת מה שיקרה אם אנחנו נריץ את זה, זה שה-client יבצע לחצן אחד לחיצה יבצע התחברות, לחיצה שנייה ישלח הודעה שימו לב שהסרבר עדיין לא שולח הודעות לקליינט תכף נטפל בזה רק הקליינט שולח הסרבר מאזין על שליחת הודעות מהקליינט ומציג אותם על הקונסול
בשלב הזה אני כבר רוצה לבדוק את זה תוכנית רצה בואו ניגש לקובץ html שלנו יש לנו כאן את ה html יש לנו כאן את הקונסול ראשית אני מבצע קונקט, ממתין שנייה ושום דבר לא קורה.
עניין, בואו ננסה לראות אולי יש לנו פה איזושהי שגיאת קונסול כלשהי. מה הוא אומר לנו? בואו ננסה לרפרש, ברור אנחנו לא יכולים קונסט בואו נשים פה let, נריץ את זה שוב פעם קונקט וזה הכל מה שהיה חסר שמה, אנחנו לא יכולים להכניס
ערך ל-const רק ל-let. ערך הכוונה מעבר ל-initialization command. אז הנה אנחנו רואים a client has been connected, total clients 1. בואו נשלח הודעה מה-client הזה, Hello from the client.