הייתה נקודת זמן בה לא ציפינו ליותר מדי מדפי אינטרנט. מה שמזכיר לי, אתר הסרטים של Space Jam עדיין נמצא באינטרנט בצורתו המקורית. והוא משתמש בסט מסגרות. לא iFrames. מסגרות .
ג'אם בחלל
JAM SPACE, תווים, שמות וכל האינדיקציות הקשורות הם סימנים מסחריים של האחים וורנר © 1996 www.warnerbros.com
ל- Warner Bros יש כמה עותקים משומשים של Dreamweaver MX.
זה היה 1996. זה 2019. הזמנים השתנו והמשתמשים מצפים להרבה יותר מהאתרים. הם לא רק מצפים שהם ייראו טוב, הם מצפים שהם יהיו מלאים באפליקציות, וזה כולל להיות בזמן אמת.
יישומים בזמן אמת
אפליקציות בזמן אמת הן אלה המגיבות לשינויים בכל מקום במערכת של יישום מחובר - לא רק אלה שבוצעו על ידי המשתמש הנוכחי.
הדוגמה הקנונית בזמן אמת היא יישום העברת הודעות. כמו כשאתה שולח לקבוצת חברים הודעת טקסט על התכנסות לכנפיים ביום שישי. ואז עדכן את כולם דקה אחר דקה בהתקדמות שלך מהעבודה לבר. תודה, טרבור. עכשיו כולנו לכודים בגיהנום הודעות שלא נרשמנו אליו. רק רציתי כמה כנפיים.
כשמדובר באינטרנט, ישנם מספר תבניות, טכנולוגיות, ספריות ושירותים שונים שבהם תוכלו להשתמש בכדי לקבל את הפונקציונליות בזמן אמת השמורה בדרך כלל ליישומים מקומיים. לאחרונה ישבתי עם אנתוני צ'ו שנתן לי 5 דרכים בהן תוכלו לבנות אפליקציות בזמן אמת ב- JavaScript.
אנתוני צ'ו #MSIgniteTheTour (@nthonyChu) | טוויטר
הציוצים האחרונים של אנתוני צ'ו #MSIgniteTheTour (@nthonyChu). עורך דין בענן @ Microsoft. תכלת, ASP .NET, Node.js ... twitter.com
1. סקירה ארוכה
זה כאשר היישום מבקש עדכונים מהשרת על פי לוח זמנים. האפליקציה "סוקרת" את השרת.
זה המקבילה נטו לילדים ששואלים "האם אנחנו כבר שם?" כל חמש דקות. נראה שאנחנו עדיין שם, ילד? שאל אותי פעם נוספת ואני נשבע לך שאזרוק את העותק הזה של "סרט הדבורה" לתעלה ותוכל לבהות מהחלון לעשב כמו שעשינו כשהייתי ילד.
סקרים ארוכים ניתנים ליישום ידני עם כל ספריית HTTP של JavaScript, כגון jQuery או Axios. מעולם לא יישמתי זאת בעצמי. כשעשיתי מחקר למאמר זה גיליתי שהדרך הטובה ביותר לעשות זאת היא להשתמש בפונקציה רקורסיבית עם setTimeout. הסיבה לכך היא שהשימוש setIntervalאינו מתחשב בבקשות שנכשלות או פסק זמן קצוב. אתה יכול בסופו של דבר לקבל חבורה של שיחות אייאקס שכולן מעובדות שלא בסדר.
הנה דוגמה מהמאמר הנחמד ביותר ב- Octave Tech.
(function poll(){ setTimeout(function(){ $.ajax({ url: "server", success: function(data){ //Update your dashboard gauge salesGauge.setValue(data.value); //Setup the next poll recursively poll(); }, dataType: "json"}); }, 30000); })();ישנן גם ספריות כמו פולימר (לא להתבלבל עם פולימר) המיועדות במיוחד לסקרים ארוכים. תשיג את זה? "סקר" ymer? לגרום לזה סקרים? האם הדבר הזה פועל?
אוהד / פולימר
ספריית AJAX / סקרים ארוכים למטרות כלליות. תרום לפיתוח אוהדים / פולימרים על ידי יצירת חשבון ב- GitHub. github.com
סקרים ארוכים זה טוב כי זה עובד בכל דפדפן; אפילו הסופר ותיקים. זה רע כי זה מאוד לא יעיל ולא בדיוק "בזמן אמת". יש לו גם כמה מקרים מוזרים (כמו כשלים בבקשות) שעליך לתכנת כפי שכבר ראינו setInterval.
חלופה טובה יותר לסקרים ארוכים היא אירועים שנשלחו על ידי שרתים או SSE.
2. אירועים המועברים על ידי השרת
אירועים שנשלחו על ידי שרתים (SSE) דומה לסקרים ארוכים ככל שהלקוח מבקש מהשרת מידע. ההבדל הגדול הוא שעם SSE השרת פשוט מחזיק את החיבור פתוח. כאשר מתרחש אירוע ויש מידע שיש לשלוח ללקוח, השרת שולח אירוע ללקוח.
אירועים המועברים על ידי השרת
באופן מסורתי, על דף אינטרנט לשלוח בקשה לשרת לקבל נתונים חדשים; כלומר, הדף מבקש נתונים מ ... developer.mozilla.org
בחזרה לאנלוגיה שלנו "נסיעה מהגיהנום", זה יהיה כאילו הילד יגיד "האם אנחנו כבר שם?", ואז המתין בסבלנות לתגובתך. כעבור ארבע שעות דממה נשגבות אתה מגיע ליעד, מסתובב ואומר "כן". זה התרחיש הכי לא מציאותי שהגעתי אי פעם בחיי.
SSE הוא חלק מממשק EventSourceה- API של הדפדפן . שים לב שעל פי caniuse.com, IE 11 ולא Edge תומכים ב- SSE. זה עושה את זה סוג של טכנולוגיה קשה לבחור, כמה שהיא מעניינת.
החדשות הטובות הן שכמעט כל דפדפן תומך בשקעי אינטרנט.
3. שקעי רשת
Sockets Web היא טכנולוגיה המאפשרת ערוץ תקשורת דו-כיווני אמיתי בין לקוח לשרת. בניגוד לאירועים המועברים על ידי שרתים, המהווים תקשורת בלבד משרת ללקוח, ניתן להשתמש ב- Sockets Web כדי לתקשר בשני הכיוונים.
שקעי רשת הם, אה, די מילוליים. הם לא ממש מסוג ה- API שאיתם אתה רוצה לבנות אפליקציות. בערך כמו שאתה יכול להגיש בקשת HTTP עם האובייקט XHR, אבל OMG NO. חיפשתי בגוגל את "Sample Web Sample" ומצאתי את זה doozy ממסמכי PHP. התקרבתי עד הסוף בכרום ובקושי קיבלתי הכל בצילום מסך יחיד.
וזה רק חלק השרת. אתה עדיין צריך לחבר את הדפדפן.
אז .... זה לא בשבילי.
למרבה המזל, יש המון ספריות המופשטות שקעי רשת עוד יותר כך שאינך צריך לכתוב כל זה. אחת מאותן ספריות נקראת "SignalR".
4. SignalR
SignalR היא ספרייה המיישמת שקעי אינטרנט הן ב- JavaScript והן ב- NET. בשרת אתה יוצר מה שמכונה "רכזת" ב- SignalR. רכזת זו שולחת ומקבלת הודעות מלקוחות.
לאחר מכן הלקוחות מתחברים לרכזת (באמצעות ספריית JavaScript Signal) ומגיבים לאירועים מהרכז, או שולחים אירועים משלהם לרכזת.
SignalR גם חוזר לסקרים ארוכים בכל פעם שקעי אינטרנט אינם זמינים. למרות שזה לא סביר במיוחד אלא אם כן אתה משתמש ב- IE 9 ומטה.
הנה דוגמה להגדרת SignalR בשרת ...
using System; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat { public class ChatHub : Hub { public void Send(string name, string message) { // Call the broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message); } } }בסדר בסדר. אני יודע שזה לא השוואה בין תפוחים לתפוחים עם דוגמת ה- PHP מלמעלה, אבל אני מנסה להצביע כאן על נקודה. פשוט ללכת עם זה. תעשה את זה בשבילי. יש לי בוקר קשה.
אז SignalR עושה את זה יותר כיף לתכנת שקעי אינטרנט, אבל אתה יודע מה יותר כיף מאשר לתכנת אותם? לא מתכנת אותם.
5. Signal Signal תכלת
לעתים קרובות, כשאנחנו רוצים להגדיר יישומים בזמן אמת, בניית שרת Web Socket היא לא בדיוק פעילות עם ערך מוסף. אנחנו עושים את זה, אבל רק בגלל שאנחנו צריכים להשיג את הזמן האמיתי. אנו מעדיפים שזה "פשוט עבד".
Azure SignalR הוא בדיוק זה. זהו רכזת SignalR שתוכלו לצרוך לפי דרישה כשירות. פירוש הדבר שעליך לשלוח ולהגיב לאירועים בלבד - וזה מה שאתה מלכתחילה מלכתחילה.
מה זה Signal SignalR
סקירה כללית של שירות Azure SignalR. docs.microsoft.com
אתה יוצר את SignalR Hub ב- Azure כשירות תכלת ואז פשוט מתחבר אליו מהלקוח ושולח / מקבל הודעות.
ועכשיו אתה יודע ....
בדוק את הראיון למטה עם אנתוני. צילמנו את זה בווגאס בזמן ששנינו היינו בכנס והיה לנו טוב עם פאה שקניתי בעיר המסיבות. 8 $ הטובים ביותר שהוצאתי אי פעם.