ההבדל בין Web Sockets, Web Workers ו-Service Workers

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

אז בואו נפרק אותם יחד ונבדיל בין Web Sockets, Web Workers ו-Service Workers. לא במובן המטופש שבו אנחנו עושים צלילה עמוקה ומקבלים חוויה מעשית עם כל אחד - יותר כמו עוזר קטן לסמן בפעם הבאה I אתה צריך רענון.

הפניה מהירה

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

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

שקעי רשת

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

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

המשמעות היא שכאשר החיבור הראשוני מתבצע, יש לנו תקשורת לקוח-שרת שבה חיבור יזום ונשמר חי עד שהלקוח או השרת יבחרו לסיים אותו על ידי שליחת CloseEvent. זה הופך את Web Sockets לאידיאלי עבור יישומים הדורשים תקשורת רציפה וישירה בין לקוח לשרת. רוב ההגדרות שראיתי מכנות אפליקציות צ'אט כמקרה שימוש נפוץ - אתה מקליד הודעה, שולח אותה לשרת, מפעיל אירוע, והשרת מגיב בנתונים מבלי שתצטרך לעשות פינג לשרת שוב ושוב.

שקול את התרחיש הזה: אתה בדרך החוצה ואתה מחליט להפעיל את מפות Google. אתה בטח כבר יודע איך Google Maps עובד, אבל אם לא, הוא מוצא את המיקום שלך אוטומטית לאחר שאתה מתחבר לאפליקציה ועוקב אחריו בכל מקום שאתה הולך. הוא משתמש בשידור נתונים בזמן אמת כדי לעקוב אחר המיקום שלך כל עוד החיבור הזה חי. זהו שקע אינטרנט שמקים שיחה דו-כיוונית מתמשכת בין הדפדפן לשרת כדי לשמור על עדכניות הנתונים. אפליקציית ספורט עם תוצאות בזמן אמת עשויה גם לעשות שימוש ב-Web Sockets בדרך זו.

ההבדל הגדול בין Web Sockets ל-Web Workers (ובהרחבה כפי שנראה, Service Workers) הוא שיש להם גישה ישירה ל-DOM. בעוד ש-Web Workers (ו-Service Workers) פועלים על שרשורים נפרדים, Web Sockets הם חלק מהשרשור הראשי שנותן להם את היכולת לתפעל את ה-DOM.

ישנם כלים ושירותים שיעזרו ליצור ולתחזק חיבורי Web Socket, כולל: SocketCluster, AsyncAPI, בוקר, WebSocket King, ערוצים, ו Gorilla WebSocket. ל-MDN יש א רשימת ריצה הכוללת שירותים אחרים.

מידע נוסף על Web Sockets

עובדי רשת

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

כאן נכנסים לתמונה ה-Web Workers.

Web Workers מאפשרים לסקריפטים לפעול ברקע בשרשורים נפרדים כדי למנוע מסקריפטים לחסום אחד את השני בשרשור הראשי. זה עושה אותם נהדרים לשיפור הביצועים של יישומים הדורשים פעולות אינטנסיביות מכיוון שניתן לבצע פעולות אלו ברקע על שרשורים נפרדים מבלי להשפיע על ממשק המשתמש מהעיבוד. אבל הם לא כל כך מעולים בגישה ל-DOM מכיוון שבניגוד ל-Web Sockets, עובד אינטרנט פועל מחוץ לשרשור הראשי בשרשור שלו.

Web Worker הוא אובייקט שמבצע קובץ סקריפט באמצעות a Worker מתנגד לבצע את המשימות. וכשאנחנו מדברים על עובדים, הם נוטים להתחלק לאחד משלושה סוגים:

• עובדים מסורים: עובד מסור נמצא בהישג יד רק על ידי התסריט שקורא לזה. הוא עדיין מבצע את המשימות של עובד אינטרנט טיפוסי, כמו סקריפטים מרובי-השרשורים שלו.
• עובדים משותפים: עובד משותף הוא ההפך מעובד מסור. ניתן לגשת אליו באמצעות סקריפטים מרובים והוא יכול לבצע כמעט כל משימה שעובד אינטרנט מבצע כל עוד הם קיימים באותו תחום כמו העובד.
• עובדי שירות: Service Worker פועל כפרוקסי רשת בין אפליקציה, הדפדפן והשרת, ומאפשר להפעיל סקריפטים גם במקרה שהרשת לא מקוונת. אנחנו הולכים להגיע לזה בסעיף הבא.

מידע נוסף על Web Workers

עובדי שירות

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

Service Workers הם אחד הדברים שאנו יכולים לעשות כדי לשפר בהדרגה את הביצועים של אפליקציה. עובד שירות יושב בין האפליקציה, הדפדפן והשרת, ומספק חיבור מאובטח שפועל ברקע בשרשור נפרד, הודות ל - ניחשתם נכון - Web Workers. כפי שלמדנו בסעיף האחרון, Service Workers הם אחד משלושה סוגים של Web Workers.

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

זהו המניע העיקרי של מה שמכונה לעתים קרובות פיתוח "לא מקוון-ראשון".. אנחנו יכולים לאחסן נכסים במטמון המקומי במקום ברשת, לספק מידע קריטי אם המשתמש עובר לא מקוון, לשלוף מראש דברים כדי שיהיו מוכנים כשהמשתמש צריך אותם, ולספק נפילות בתגובה לשגיאות רשת. הם אסינכרוניים לחלוטין, אבל בניגוד ל-Web Sockets, אין להם גישה ל-DOM מכיוון שהם פועלים על השרשורים שלהם.

הדבר הגדול הנוסף שצריך לדעת על Service Workers הוא שהם מיירטים כל בקשה ותגובה מהאפליקציה שלך. ככאלה, יש להם כמה השלכות אבטחה, בעיקר שהם פועלים לפי מדיניות של אותו מקור. אז, זה אומר שאין להפעיל שירות עובד מ-CDN או שירות של צד שלישי. הם גם דורשים חיבור HTTPS מאובטח, מה שאומר שתזדקק לאישור SSL כדי שיפעלו.

מידע נוסף על עובדי שירות

גלישה את

זה הסבר ברמה גבוהה במיוחד של ההבדלים (והדמיון) בין Web Sockets, Web Workers ו-Service Workers. שוב, הטרמינולוגיה והמושגים דומים מספיק כדי לערבב אחד עם השני, אבל אני מקווה שזה נותן לך מושג טוב יותר איך להבחין ביניהם.

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

מאפיין	מה זה	ריבוי חוטים?	HTTPS?	גישה ל-DOM?
שקע אינטרנט	יוצר חיבור דו-כיווני פתוח ומתמשך בין הדפדפן לשרת כדי לשלוח ולקבל הודעות דרך חיבור יחיד המופעל על ידי אירועים.	פועל על השרשור הראשי	לא דרוש	יש
עובד אינטרנט	מאפשר לסקריפטים לרוץ ברקע בשרשורים נפרדים כדי למנוע מסקריפטים לחסום אחד את השני בשרשור הראשי.	פועל על חוט נפרד	דרוש	לא
עובד שירות	סוג של Web Worker שיוצר שירות רקע הפועל בתווך לטיפול בבקשות רשת בין הדפדפן לשרת, גם במצבים לא מקוונים.	פועל על חוט נפרד	דרוש	לא