Latest web development tutorials
×

HTML หลักสูตร

HTML หลักสูตร HTML แนะนำโดยย่อ HTML บรรณาธิการ HTML รากฐาน HTML ธาตุ HTML คุณสมบัติ HTML พาดหัว HTML ย่อหน้า HTML จัดรูปแบบข้อความ HTML ลิงค์ HTML หัว HTML CSS HTML ภาพ HTML ตาราง HTML รายการ HTML กลุ่ม HTML แบบ HTML ฟอร์ม HTML กรอบ HTML สี HTML ชื่อสี HTML ค่าสี HTML ต้นฉบับ HTML หน่วย Character HTML URL HTML รายการที่รวดเร็ว HTML ย่อ บทนำ XHTML

HTML5

HTML5 หลักสูตร HTML5 สนับสนุนเบราว์เซอร์ HTML5 องค์ประกอบใหม่ HTML5 Canvas HTML5 inline SVG HTML5 MathML HTML5 ลากและวาง HTML5 สถานที่ตั้งทางภูมิศาสตร์ HTML5 วีดีโอ(Video) HTML5 ความถี่คลื่นเสียน(Audio) HTML5 Input ชนิด HTML5 องค์ประกอบของแบบฟอร์ม HTML5 คุณสมบัติของฟอร์ม HTML5 องค์ประกอบความหมาย HTML5 Web หน่วยความจำ HTML5 Web SQL HTML5 แอพลิเคชันแคช HTML5 Web Workers HTML5 SSE HTML5 WebSocket HTML5 ทดสอบ HTML(5)ข้อมูลจำเพาะรหัส

HTML สื่อ

HTML สื่อ(Media) HTML วิดเจ็ต HTML ความถี่คลื่นเสียน(Audio) HTML เครื่องเล่นวีดีโอ(Videos) HTML ตัวอย่าง

HTML คู่มืออ้างอิง

HTML รายการแท็ก(ตามลำดับตัวอักษร) HTML รายการแท็ก(ฟังก์ชั่นการจัดเรียง) HTML คุณสมบัติ HTML เหตุการณ์ HTML ผ้าใบ HTML ความถี่คลื่นเสียน/วีดีโอ HTML มีประสิทธิภาพ DOCTYPES HTML ชื่อสี HTML ตัวเลือกสี HTML ชุดอักขระ HTML ASCII HTML ISO-8859-1 HTML สัญญลักษณ์ HTML URL การเข้ารหัส HTML รหัสภาษา HTTP ข่าว HTTP ทาง แป้นพิมพ์ลัด

HTML5 เหตุการณ์เซิร์ฟเวอร์ส่ง (เหตุการณ์เซิร์ฟเวอร์ได้ส่ง)

เซิร์ฟเวอร์ HTML5 ส่งเหตุการณ์ (event เซิร์ฟเวอร์ส่ง) ช่วยให้หน้าเว็บจะได้รับการอัปเดตจากเซิร์ฟเวอร์


เซิร์ฟเวอร์ส่งกิจกรรม - ส่งข้อความทาง

เหตุการณ์เซิร์ฟเวอร์ส่งเป็นเว็บไซต์โดยอัตโนมัติได้รับการอัปเดตจากเซิร์ฟเวอร์

ก่อนหน้านี้ยังสามารถทำได้โดยมีเงื่อนไขว่าหน้าต้องถามว่ามีการอัพเดท เซิร์ฟเวอร์จะส่งเหตุการณ์การปรับปรุงจะมาถึงโดยอัตโนมัติ

ตัวอย่าง: การปรับปรุง Facebook / Twitter, การปรับปรุงการประเมินค่าบล็อกใหม่ผลการแข่งขันและอื่น ๆ


สนับสนุนเบราว์เซอร์

Internet ExplorerFirefoxOperaGoogle ChromeSafari

เบราว์เซอร์ที่สำคัญทั้งหมดได้รับการสนับสนุนโดยเซิร์ฟเวอร์จะส่งกรณีที่นอกเหนือไปจาก Internet Explorer


รับเซิร์ฟเวอร์ส่งการแจ้งเตือนเหตุการณ์

วัตถุ EventSource จะใช้ในการได้รับการแจ้งเตือนเหตุการณ์ที่ส่งมาจากเซิร์ฟเวอร์:

ตัวอย่าง

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br>";
};

ลอง»

ตัวอย่างการวิเคราะห์:

  • EventSource สร้างวัตถุใหม่แล้วส่ง URL ที่กฎระเบียบของการปรับปรุงของหน้า (ในกรณีนี้ "demo_sse.php")
  • แต่ละคนได้รับการปรับปรุงเหตุการณ์ OnMessage เกิดขึ้น
  • เมื่อมีเหตุการณ์เกิดขึ้น OnMessage, ข้อมูลที่ได้รับจะถูกผลักเข้าไปใน ID "ผล" องค์ประกอบใน

การตรวจหาการสนับสนุนเซิร์ฟเวอร์ได้ทำกิจกรรม

ตัวอย่างต่อไปนี้เราเขียนโค้ดเพิ่มเติมบางอย่างในการตรวจสอบเบราว์เซอร์ไปยังเซิร์ฟเวอร์เพื่อส่งเหตุการณ์ได้รับการสนับสนุนโดย:

ถ้า (typeof (EventSource)! == "ไม่ได้กำหนด")
{
// เบราว์เซอร์รองรับเซิร์ฟเวอร์ส่ง
//รหัสบาง .....
}
อื่น
{
// เบราว์เซอร์ไม่สนับสนุนเซิร์ฟเวอร์ส่ง ..
}


ตัวอย่างของรหัสด้านเซิร์ฟเวอร์

ที่จะทำให้ตัวอย่างข้างต้นคุณสามารถเรียกคุณยังจะต้องมีความสามารถที่จะส่งข้อมูลไปปรับปรุงเซิร์ฟเวอร์ (เช่น PHP และ ASP)

ไวยากรณ์กระแสเหตุการณ์ฝั่งเซิร์ฟเวอร์เป็นเรื่องง่ายมาก ส่วนหัว "เนื้อหา-Type" ตั้งค่า "text / เหตุการณ์กระแส" ตอนนี้คุณสามารถเริ่มต้นการส่งไหลเหตุการณ์

ตัวอย่าง

<php?
ส่วนหัว ( 'Content-Type: ข้อความ / เหตุการณ์สตรีม');
ส่วนหัว (Cache-Control: ไม่มี -cache ');

$ เวลา = วันที่ ( 'R' );
echo "ข้อมูล: ครั้งเซิร์ฟเวอร์ : {$} เวลา \ n \ n";
ล้าง ();
?>

โค้ด ASP (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

คำอธิบายรหัสสินค้า:

  • ส่วนหัว "เนื้อหา-Type" ตั้งค่า "text / เหตุการณ์กระแส"
  • เผื่อไม่ได้หน้าแคช
  • วันที่การส่งออก (เสมอ "ข้อมูล" ที่จุดเริ่มต้น)
  • รีเฟรชหน้าเว็บเพื่อการส่งออกข้อมูล

วัตถุ EventSource

ในตัวอย่างข้างต้นที่เราใช้ในการรับข้อความ Event OnMessage แต่คุณยังสามารถใช้กิจกรรมอื่น ๆ :

事件 描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误