ความแตกต่างระหว่าง 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 เหมาะสำหรับแอปพลิเคชันที่ต้องการการสื่อสารโดยตรงและต่อเนื่องระหว่างไคลเอนต์และเซิร์ฟเวอร์ คำจำกัดความส่วนใหญ่ที่ฉันเคยเห็นการเรียกแอปแชทเป็นกรณีใช้งานทั่วไป คุณพิมพ์ข้อความ ส่งไปยังเซิร์ฟเวอร์ ทริกเกอร์เหตุการณ์ และเซิร์ฟเวอร์ตอบสนองด้วยข้อมูลโดยไม่ต้อง ping เซิร์ฟเวอร์ซ้ำแล้วซ้ำอีก

พิจารณาสถานการณ์นี้: คุณกำลังออกเดินทางและตัดสินใจเปิด Google Maps คุณอาจทราบแล้วว่า Google Maps ทำงานอย่างไร แต่หากคุณไม่ทราบ Google Maps จะค้นหาตำแหน่งของคุณโดยอัตโนมัติหลังจากที่คุณเชื่อมต่อกับแอปและติดตามทุกที่ที่คุณไป ใช้การรับส่งข้อมูลแบบเรียลไทม์เพื่อติดตามตำแหน่งของคุณตราบเท่าที่การเชื่อมต่อนี้ยังมีชีวิตอยู่ นั่นคือ Web Socket ที่สร้างการสนทนาแบบสองทางอย่างต่อเนื่องระหว่างเบราว์เซอร์และเซิร์ฟเวอร์เพื่อให้ข้อมูลนั้นทันสมัยอยู่เสมอ แอปกีฬาที่มีคะแนนแบบเรียลไทม์อาจใช้ประโยชน์จาก Web Sockets ด้วยวิธีนี้

ความแตกต่างใหญ่ระหว่าง Web Sockets และ Web Workers (และโดยการขยายตามที่เราเห็น Service Workers) คือพวกเขามีสิทธิ์เข้าถึง DOM โดยตรง ในขณะที่ Web Workers (และ Service Workers) ทำงานบนเธรดที่แยกจากกัน Web Sockets เป็นส่วนหนึ่งของเธรดหลัก ซึ่งช่วยให้พวกเขาจัดการ DOM ได้

มีเครื่องมือและบริการที่ช่วยในการสร้างและบำรุงรักษาการเชื่อมต่อ Web Socket ได้แก่: ซ็อกเก็ตคลัสเตอร์, อะซิงก์ API, โคบาล, WebSocket คิง, ช่องทางและ กอริลลา WebSocket. MDN มี รายการวิ่งซึ่งรวมถึงบริการอื่น ๆ.

ข้อมูลเพิ่มเติมเกี่ยวกับ Web Sockets

พนักงานเว็บ

พิจารณาสถานการณ์ที่คุณต้องทำการคำนวณที่ซับซ้อนจำนวนมากในขณะเดียวกันก็เปลี่ยนแปลง DOM JavaScript เป็นแอปพลิเคชันแบบเธรดเดียว และการเรียกใช้สคริปต์มากกว่าหนึ่งตัวอาจขัดขวางอินเทอร์เฟซผู้ใช้ที่คุณพยายามทำการเปลี่ยนแปลง รวมถึงการคำนวณที่ซับซ้อนที่กำลังดำเนินการอยู่

นี่คือจุดที่ Web Workers เข้ามามีบทบาท

Web Workers อนุญาตให้สคริปต์ทำงานในพื้นหลังในเธรดแยกกัน เพื่อป้องกันไม่ให้สคริปต์บล็อกกันบนเธรดหลัก นั่นทำให้พวกเขายอดเยี่ยมสำหรับการเพิ่มประสิทธิภาพของแอปพลิเคชันที่ต้องการการดำเนินการที่เข้มข้น เนื่องจากการดำเนินการเหล่านั้นสามารถทำได้ในพื้นหลังบนเธรดที่แยกจากกันโดยไม่ส่งผลกระทบต่อส่วนต่อประสานผู้ใช้จากการเรนเดอร์ แต่เข้าถึง DOM ได้ไม่เก่งนัก เนื่องจาก Web Worker ทำงานนอกเธรดหลักในเธรดของตัวเอง ไม่เหมือนกับ Web Sockets

Web Worker เป็นอ็อบเจ็กต์ที่รันไฟล์สคริปต์โดยใช้ a Worker วัตถุเพื่อดำเนินงาน และเมื่อเราพูดถึงคนงาน พวกเขามักจะแบ่งออกเป็นสามประเภท:

• คนงานที่ทุ่มเท: ผู้ปฏิบัติงานที่ทุ่มเทสามารถเข้าถึงได้โดยสคริปต์ที่เรียกมันเท่านั้น มันยังคงทำงานของผู้ปฏิบัติงานเว็บทั่วไป เช่น สคริปต์มัลติเธรด
• คนงานร่วม: คนงานที่ใช้ร่วมกันเป็นสิ่งที่ตรงกันข้ามกับคนงานที่ทุ่มเท สามารถเข้าถึงได้โดยสคริปต์หลายตัวและสามารถทำงานใด ๆ ที่ผู้ปฏิบัติงานเว็บดำเนินการได้ตราบเท่าที่อยู่ในโดเมนเดียวกับผู้ปฏิบัติงาน
• พนักงานบริการ: พนักงานบริการทำหน้าที่เป็นพร็อกซีเครือข่ายระหว่างแอป เบราว์เซอร์ และเซิร์ฟเวอร์ ทำให้สคริปต์ทำงานแม้ในกรณีที่เครือข่ายออฟไลน์ เราจะไปที่นี้ในหัวข้อถัดไป

ข้อมูลเพิ่มเติม Web Workers

พนักงานบริการ

มีบางสิ่งที่เราไม่สามารถควบคุมได้ในฐานะนักพัฒนา และหนึ่งในนั้นคือการเชื่อมต่อเครือข่ายของผู้ใช้ เครือข่ายใดที่ผู้ใช้เชื่อมต่อคือสิ่งที่เป็นอยู่ เราสามารถทำได้ดีที่สุดเพื่อเพิ่มประสิทธิภาพแอปของเราเท่านั้นเพื่อให้ทำงานได้ดีที่สุดเท่าที่จะทำได้ในการเชื่อมต่อใดๆ ที่เกิดขึ้น

พนักงานบริการเป็นหนึ่งในสิ่งที่เราสามารถทำได้เพื่อเพิ่มประสิทธิภาพการทำงานของแอปอย่างค่อยเป็นค่อยไป พนักงานบริการนั่งอยู่ระหว่างแอป เบราว์เซอร์ และเซิร์ฟเวอร์ โดยให้การเชื่อมต่อที่ปลอดภัยซึ่งทำงานในพื้นหลังบนเธรดที่แยกต่างหาก ต้องขอบคุณ - คุณเดาได้ - Web Workers ตามที่เราได้เรียนรู้ในหัวข้อที่แล้ว Service Workers เป็นหนึ่งในสามประเภทของ Web Workers

เหตุใดคุณจึงต้องการพนักงานบริการที่อยู่ระหว่างแอปของคุณกับเบราว์เซอร์ของผู้ใช้ อีกครั้ง เราไม่สามารถควบคุมการเชื่อมต่อเครือข่ายของผู้ใช้ได้ สมมติว่าการเชื่อมต่อเกิดขึ้นโดยไม่ทราบสาเหตุ ซึ่งจะทำให้การสื่อสารระหว่างเบราว์เซอร์และเซิร์ฟเวอร์เสียหาย ทำให้ไม่สามารถส่งข้อมูลไปมาได้ พนักงานบริการจะรักษาการเชื่อมต่อ โดยทำหน้าที่เป็น async proxy ที่สามารถดักฟังคำขอและดำเนินการงานต่างๆ ได้ แม้ว่าการเชื่อมต่อเครือข่ายจะขาดหายไป

นี่คือตัวขับเคลื่อนหลักของสิ่งที่มักเรียกกันว่า การพัฒนา "ออฟไลน์ก่อน". เราสามารถจัดเก็บทรัพย์สินไว้ในแคชภายในเครื่องแทนเครือข่าย ให้ข้อมูลที่สำคัญหากผู้ใช้ออฟไลน์ ดึงข้อมูลล่วงหน้าเพื่อให้พร้อมเมื่อผู้ใช้ต้องการ และจัดเตรียมทางเลือกสำรองเพื่อตอบสนองต่อข้อผิดพลาดของเครือข่าย พวกมันเป็นแบบอะซิงโครนัสอย่างสมบูรณ์ แต่ไม่เหมือนกับ Web Sockets พวกมันไม่สามารถเข้าถึง DOM ได้ เนื่องจากพวกมันทำงานบนเธรดของตัวเอง

สิ่งสำคัญอีกอย่างที่ควรรู้เกี่ยวกับ Service Workers คือพวกเขาสกัดกั้นทุกคำขอและการตอบสนองจากแอปของคุณ ด้วยเหตุนี้ พวกเขาจึงมีนัยด้านความปลอดภัยบางประการ โดยเฉพาะอย่างยิ่งพวกเขาปฏิบัติตามนโยบายที่มาเดียวกัน นั่นหมายความว่าไม่มีการเรียกใช้งานบริการจาก CDN หรือบริการของบุคคลที่สาม พวกเขายังต้องการการเชื่อมต่อ HTTPS ที่ปลอดภัย ซึ่งหมายความว่าคุณจะต้องมีใบรับรอง SSL เพื่อให้ทำงานได้

ข้อมูลพนักงานบริการเพิ่มเติม

ตัดขึ้น

นั่นคือคำอธิบายระดับสูงของความแตกต่าง (และความคล้ายคลึงกัน) ระหว่าง Web Sockets, Web Workers และ Service Workers อีกครั้ง คำศัพท์และแนวคิดมีความคล้ายคลึงกันมากพอที่จะผสมผสานเข้าด้วยกัน แต่หวังว่านี่จะช่วยให้คุณมีความคิดที่ดีขึ้นเกี่ยวกับวิธีแยกแยะความแตกต่างเหล่านั้น

เราเริ่มต้นด้วยตารางอ้างอิงฉบับย่อ นี่คือสิ่งที่เหมือนกัน แต่ขยายออกเล็กน้อยเพื่อเปรียบเทียบที่หนาขึ้น

ลักษณะ	มันคืออะไร	มัลติเธรด?	HTTPS?	การเข้าถึง DOM?
เว็บซ็อกเก็ต	สร้างการเชื่อมต่อแบบสองทางแบบเปิดและต่อเนื่องระหว่างเบราว์เซอร์และเซิร์ฟเวอร์เพื่อส่งและรับข้อความผ่านการเชื่อมต่อเดียวที่เกิดจากเหตุการณ์	ทำงานบนเธรดหลัก	ไม่จำเป็นต้องใช้	ใช่
พนักงานเว็บ	อนุญาตให้สคริปต์ทำงานในพื้นหลังในเธรดแยกกัน เพื่อป้องกันไม่ให้สคริปต์บล็อกกันบนเธรดหลัก	ทำงานบนเธรดแยกต่างหาก	ต้อง	ไม่
บริการคนทำงาน	Web Worker ประเภทหนึ่งที่สร้างบริการพื้นหลังที่ทำหน้าที่มิดเดิลแวร์สำหรับจัดการคำขอเครือข่ายระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ แม้ในสถานการณ์ออฟไลน์	ทำงานบนเธรดแยกต่างหาก	ต้อง	ไม่