มีวิธีใดบ้างในการผลักดันข้อมูลจากเว็บเซิร์ฟเวอร์ไปยังเบราว์เซอร์?


134

แน่นอนว่าฉันรู้จัก Ajax แต่ปัญหาของ Ajax คือเบราว์เซอร์ควรสำรวจเซิร์ฟเวอร์บ่อยๆเพื่อดูว่ามีข้อมูลใหม่หรือไม่ เพิ่มโหลดเซิร์ฟเวอร์

มีวิธีใดที่ดีกว่า (แม้จะใช้ Ajax) นอกเหนือจากการสำรวจเซิร์ฟเวอร์บ่อยๆ


1
ฉันไม่แน่ใจว่ามี เพื่อให้ง่ายขึ้นในแนวคิดสำหรับแอปพลิเคชันฉันเดาว่าคุณสามารถใช้เลเยอร์การขนส่งที่ด้านบนของคำขอการสำรวจและลบความรับผิดชอบในการสำรวจออกจากตรรกะของแอปพลิเคชันของคุณ อาจจะมีคนนำไปใช้แล้ว? <strong> แก้ไข: </strong> เห็นได้ชัดว่ามันเรียกว่า <a href=" en.wikipedia.org/wiki/Reverse_Ajax"> reverse Ajax </a> และ <a href = " en.wikipedia.org/wiki/Comet_ ( Programming) "> ดาวหาง </ a > แต่จนถึงตอนนี้ดูเหมือนว่าคุณต้องใช้งานด้วยตัวเอง ไลบรารี JavaScript สำหรับสิ่งนี้ใคร ๆ ?
Anders Sandvig

1
@Rachel - อัปเดตสดเพื่อให้คุณสามารถเห็นว่าคนอื่นกำลังทำอะไรอยู่ เหมาะสำหรับเว็บไซต์เช่น StackOverflow และสำหรับเว็บแอปพลิเคชันสำหรับการทำงานร่วมกันเช่น Google เอกสาร
Itai Bar-Haim

1
ใครก็ตามที่ทำสิ่งนี้ในปี 2559 อาจพบว่าเว็บซ็อกเก็ตเป็นตัวเลือกที่ดีกว่าสำหรับการสื่อสารประเภทนี้
เงา

คำตอบ:


70

ใช่สิ่งที่คุณกำลังมองหา COMET http://en.wikipedia.org/wiki/Comet_(programming) คำศัพท์อื่น ๆ ของ Google ที่ควรค้นหา ได้แก่ AJAX-push และ reverse-ajax


37

ใช่มันเรียกว่าย้อนกลับอาแจ็กซ์หรือดาวหาง โดยทั่วไปแล้วดาวหางเป็นคำศัพท์ที่ครอบคลุมสำหรับวิธีต่างๆในการเปิดคำขอ HTTP ที่มีอายุยาวนานเพื่อส่งข้อมูลไปยังเว็บเบราว์เซอร์แบบเรียลไทม์ ฉันขอแนะนำStreamHub Push Serverพวกเขามีการสาธิตที่ยอดเยี่ยมและเริ่มต้นได้ง่ายกว่าเซิร์ฟเวอร์อื่น ๆ ดูบทช่วยสอนการเริ่มต้นใช้งาน Comet และ StreamHubสำหรับบทแนะนำสั้น ๆ คุณสามารถใช้ Community Edition ซึ่งดาวน์โหลดได้ฟรี แต่ จำกัด ผู้ใช้พร้อมกัน 20 คน เวอร์ชันเชิงพาณิชย์นั้นคุ้มค่าสำหรับการสนับสนุนเพียงอย่างเดียวรวมทั้งคุณจะได้รับอะแดปเตอร์ไคลเอ็นต์ SSL และเดสก์ท็อป. NET และ Java ขอความช่วยเหลือผ่านGoogle Groupมีบทเรียนมากมายบนเน็ตและมีอะแดปเตอร์ GWT Cometด้วย


1
แน่นอนวิธีที่จะไปเมื่อคุณเริ่มใช้งานด้วยตัวเองคุณจะรู้ว่าต้องทำมากแค่ไหน - การเชื่อมต่อใหม่การสำรวจระยะยาวการสตรีม iframe การรองรับข้ามเบราว์เซอร์ HTTPS ...
Corehpf

2
คำอธิบายว่าดาวหางคืออะไรจะช่วยคำตอบนี้ได้
Kevin Monk

1
@ Satir: เพิ่มคำอธิบายอย่างรวดเร็ว คำตอบอื่น ๆ มีลิงก์ไปยังบทความ Wikipedia
Nosrama

32

ทุกวันนี้คุณควรใช้ WebSockets นี่คือมาตรฐานปี 2011 ที่อนุญาตให้เริ่มการเชื่อมต่อกับ HTTP จากนั้นอัปเกรดเป็นการสื่อสารโดยใช้ข้อความไคลเอ็นต์เซิร์ฟเวอร์สองทิศทาง

คุณสามารถเริ่มการเชื่อมต่อจากจาวาสคริปต์ได้อย่างง่ายดาย:

var ws = new WebSocket("ws://your.domain.com/somePathIfYouNeed?args=any");
ws.onmessage = function (evt) 
{
  var message = evt.data;
  //decode message (with JSON or something) and do the needed
};

การจัดการฝั่งแยกขึ้นอยู่กับสแต็ก tenchnology ของคุณ


2
Vs เซิร์ฟเวอร์ส่งเหตุการณ์: stackoverflow.com/questions/5195452/…
Ciro Santilli 郝海东冠状病六四事件法轮功

8
ฉันเห็นด้วยอย่างยิ่ง ... การใช้ HTTP สำหรับการสื่อสารแบบสองทิศทางก็เหมือนกับการคิดในการเรียก REST เพื่อให้ Mario กระโดดขึ้นไปบนกระดองเต่า ... คุณไม่จำเป็นต้องร้องขอและรอการตอบสนองสำหรับปุ่มธรรมดาที่ผลักดันผู้คน .... คุณก็ไม่ทำ HTTP คือโปรโตคอลเอกสาร Hyper TEXT Transfer Protocol Ajax Push เป็นวิธีที่ซับซ้อนอย่างไม่น่าเชื่อในการหลีกเลี่ยง HTTP เพื่อทำสิ่งที่ WebSocket ทำโดยการออกแบบ เลิกโง่และใช้เครื่องมือที่เหมาะสมกับงาน
Nick Steele

คุณชอบจุดไข่ปลามากและบางครั้งก็เป็นรูปแบบใหม่ของจุดสี่จุดซึ่งฉันจะเรียกว่า "จุดไข่ปลา"!
imbatman

10

ดูดาวหาง (เป็นการสวมรอยว่า Ajax เป็นสารทำความสะอาดและดาวหางก็เช่นกัน) ซึ่งโดยพื้นฐานแล้วคือ "reverse Ajax" โปรดทราบว่าสิ่งนี้ต้องใช้การเชื่อมต่อเซิร์ฟเวอร์ที่มีอายุการใช้งานยาวนานเพื่อให้ผู้ใช้แต่ละรายได้รับการแจ้งเตือนดังนั้นโปรดระวังผลกระทบด้านประสิทธิภาพเมื่อเขียนแอปของคุณ

http://en.wikipedia.org/wiki/Comet_( การเขียนโปรแกรม)


6

ดาวหางเป็นสิ่งที่คุณต้องการอย่างแน่นอน ขึ้นอยู่กับข้อกำหนดด้านภาษา / กรอบงานของคุณมีไลบรารีเซิร์ฟเวอร์ที่แตกต่างกัน ตัวอย่างเช่นWebSync เป็นเซิร์ฟเวอร์ดาวหางรวม IIS สำหรับนักพัฒนา ASP.NET/C#/IISและยังมีเซิร์ฟเวอร์แบบสแตนด์อโลนอื่น ๆ อีกมากมายเช่นกันหากคุณต้องการการผสานรวมกับภาษาอื่น ๆ


5

ฉันขอแนะนำอย่างยิ่งให้ลงทุนกับดาวหางสักหน่อย แต่ฉันไม่รู้ว่ามีการใช้งานจริงหรือไลบรารีที่คุณสามารถใช้ได้

สำหรับ "แผงควบคุม callcenter" ของเว็บแอปที่เกี่ยวข้องกับการอัปเดตเอเจนต์และสถานะการเรียกคิวสำหรับ Callcenter แบบสดเราได้พัฒนาโซลูชันภายในที่ใช้งานได้ แต่อยู่ห่างไกลจากไลบรารีที่คุณสามารถใช้ได้

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

ไคลเอนต์เว็บของเราเชื่อมต่อผ่าน HTTP ไปยังเว็บเซิร์ฟเวอร์นี้และขอรูปถ่ายสุดท้าย (เข้ารหัสใน XML) แสดงแล้วไปอีกครั้งเพื่อขอรูปถ่ายใหม่ เว็บเซิร์ฟเวอร์ ณ จุดนี้สามารถ:

  • ส่งคืนรูปภาพใหม่หากมี
  • บล็อกไคลเอ็นต์เป็นเวลาหลายวินาที (30 ในการตั้งค่าของเรา) รอให้เหตุการณ์บางอย่างดำเนินการและเปลี่ยนรูปถ่าย หากไม่มีการสร้างเหตุการณ์ ณ จุดนั้นระบบจะส่งคืนรูปภาพเดิมเพียงเพื่อให้การเชื่อมต่อมีชีวิตอยู่และไม่ทำให้ไคลเอนต์หมดเวลา

ด้วยวิธีนี้เมื่อลูกค้าทำการสำรวจจะได้รับการตอบกลับภายใน 0 ถึง 30 วินาทีสูงสุด หากสร้างเหตุการณ์ใหม่แล้วจะได้รับทันที) มิฉะนั้นจะบล็อกจนกว่าจะมีการสร้างเหตุการณ์ใหม่

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

หากมีใครสามารถนำเสนอการใช้งานที่มีน้ำหนักเบาได้จริงก็เยี่ยมมาก!


5

ทางเลือกที่น่าสนใจสำหรับดาวหางคือการใช้ซ็อกเก็ตใน Flash


5

อีกวิธีหนึ่งที่เป็นมาตรฐานคือSSE (เหตุการณ์ที่เซิร์ฟเวอร์ส่งหรือที่เรียกว่า EventSourceตามหลังวัตถุ JavaScript)


ข้อมูลจำเพาะ W3C เวอร์ชันล่าสุดw3.org/TR/2009/WD-eventsource-20091029เปลี่ยนเส้นทางไปยังhtml.spec.whatwg.org/multipage/comms.html#server-sent-events
Ciro Santilli 郝海东冠状病六四事件法轮功


2

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


2

คุณสามารถใช้แอปพลิเคชัน Flash / Flex บนไคลเอนต์ด้วย BlazeDS หรือ LiveCycle ที่ฝั่งเซิร์ฟเวอร์ ข้อมูลสามารถส่งไปยังไคลเอนต์โดยใช้การเชื่อมต่อ RTMP โปรดทราบว่า RTMP ใช้พอร์ตที่ไม่ได้มาตรฐาน แต่คุณสามารถกลับไปใช้การสำรวจได้อย่างง่ายดายหากพอร์ตถูกบล็อก


2

เป็นไปได้ที่จะบรรลุสิ่งที่คุณมุ่งหวังผ่านการใช้การเชื่อมต่อ http แบบต่อเนื่อง

ลองอ่านบทความดาวหางที่ wikipedia ซึ่งเป็นจุดเริ่มต้นที่ดี

คุณไม่ได้ให้ข้อมูลมากนัก แต่หากคุณกำลังมองหาการสร้างไซต์ที่ขับเคลื่อนด้วยเหตุการณ์บางประเภท (a'la digg spy) หรือบางสิ่งบางอย่างตามแนวนั้นคุณอาจกำลังมองหาการใช้ IFRAME ที่ซ่อนอยู่ซึ่งเชื่อมต่อกับ URL ที่การเชื่อมต่อไม่เคยปิดจากนั้นคุณจะส่งสคริปต์แท็กจากเซิร์ฟเวอร์ไปยังไคลเอนต์เพื่อดำเนินการอัปเดต


2

อาจคุ้มค่าที่จะลองใช้Meteor Serverซึ่งเป็นเว็บเซิร์ฟเวอร์ที่ออกแบบมาสำหรับ COMET นีซสาธิตและมันยังถูกใช้โดยtwitterfall


1

เมื่อเปิดการเชื่อมต่อกับเซิร์ฟเวอร์แล้วจะสามารถเปิดต่อได้และเซิร์ฟเวอร์สามารถพุชเนื้อหาเมื่อนานมาแล้วฉันเคยใช้multipart/x-mixed-replaceแต่สิ่งนี้ใช้ไม่ได้ใน IE

ฉันคิดว่าคุณสามารถทำสิ่งที่ชาญฉลาดได้ด้วยการสำรวจความคิดเห็นที่ทำให้มันทำงานได้ดีขึ้นเช่นการผลักดันโดยการไม่ส่งเนื้อหาส่วนหัวที่ไม่มีการเปลี่ยนแปลง แต่เปิดการเชื่อมต่อทิ้งไว้ แต่ฉันไม่เคยทำเช่นนี้





โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.