Websocket ใน HTML 5 เทคโนโลยี ติดต่อเร็ว กว่า Ajax ไม่ต้องรีเฟรชหน้า
Websocket ใน HTML 5 เทคโนโลยี ติดต่อเร็ว กว่า Ajax ไม่ต้องรีเฟรชหน้า

Websocket คือ ถ้าจะอธิบายให้สั้นๆ และได้ใจความ Websocket เป็นเทคโนโลยีเพื่อใช้ การติดต่อสือสารระหว่าง Web server กับ Client แบบ Real Time Client ที่เป็น html5 + Javascript สามารถรับข้อมูลทางผั่ง Server มาแสดงผลได้ ผ่าน Protocol TCP/IP โดยไม่ต้อง Refresh หน้า เช่นเดียวกับ Ajax แต่ Websocket นั้นมีข้อดีกว่า Ajax คือ Websocket ไม่ต้องส่ง Request ใหม่ เพื่อส่งคำรองขอไปยัง server และ รอรับ respond จากทางฝั่ง Server ทำให้ Websocket ประหยัดทั้งเวลา และปริมาณข้อมูลที่ส่งไปมาระหว่าง web server กับ Client โดยการทำงานของ Websocket มันจะรอรับ Message ทางฝั่ง web server อยู่ตลอดเวลา หลังจากที่ได้ส่งคำสั่ง ติดต่อ Websocket Server ไปแล้วในครั้งแรก และมันจะรอรับ Message จนกระทั้งจะสั่ง Close หรือหยุดการติดต่
ลองดูตัวอย่างโค้ด HTML + Websocket

<!DOCTYPE html>

<meta charset="utf-8" />

<title>WebSocket Test By Mindphp.com</title>

<script language="javascript" type="text/javascript">

  var wsUri = "ws://echo.websocket.org/";
  var output;

  function init()
  {
    output = document.getElementById("output");
    testWebSocket();
  }

  function testWebSocket()
  {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) };
  }

  function onOpen(evt)
  {
    writeToScreen("CONNECTED");
    doSend("WebSocket rocks");
  }

  function onClose(evt)
  {
    writeToScreen("DISCONNECTED");
  }

  function onMessage(evt)
  {
      alert(evt);
    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
    websocket.close();
  }

  function onError(evt)
  {
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
  }

  function doSend(message)
  {
    writeToScreen("SENT: " + message); 
    websocket.send(message);
  }

  function writeToScreen(message)
  {
    var pre = document.createElement("p");
    pre.style.wordWrap = "break-word";
    pre.innerHTML = message;
    output.appendChild(pre);
  }

  window.addEventListener("load", init, false);

</script>

<h2>WebSocket Test</h2>
<input id="text" name="text" type="text" size="36">
<label>
<input type="submit" name="button" id="button" value=" Send " onClick=" doSend(document.getElementById('text').value);">
</label>
<div id="output"></div>

</html> 

เรียกน้ำย่อยวันนี้แค่นี้ก่อน วันหลังจะเอาความรู้เรื่อง เทคโนโลยี ตัวนี้มาลงอีกครับ พูดคุยกันได้ที่เว็บบอร์ด Pogramming - PHP

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อัพเดดคืบหน้า แนะนำ Feature - คู่มือ - vdo สอนใช้งาน
โดย mindphp ศ 06 มิ.ย. 2025 7:19 pm บอร์ด AsiaTest - Developer
0
1
ศ 06 มิ.ย. 2025 7:19 pm โดย mindphp View Topic อัพเดดคืบหน้า แนะนำ Feature - คู่มือ - vdo สอนใช้งาน
บันทึกประชุมกับทางลูกค้า สรุปความต้องการ
โดย mindphp ศ 06 มิ.ย. 2025 7:19 pm บอร์ด AsiaTest - Developer
0
1
ศ 06 มิ.ย. 2025 7:19 pm โดย mindphp View Topic บันทึกประชุมกับทางลูกค้า สรุปความต้องการ
สอบถาม Verification ของ google developer ติดขั้นตอน Homepage requirement
โดย eange08 พฤ 29 พฤษภาคม 2025 1:24 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
4688
พฤ 05 มิ.ย. 2025 1:51 pm โดย eange08 View Topic สอบถาม Verification ของ google developer ติดขั้นตอน Homepage requirement
ไข้หวัดใหญ่อาการหนักแค่ไหน ค่ารักษาเท่าไหร่
โดย Ellache จ 26 พฤษภาคม 2025 2:36 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
3601
จ 26 พฤษภาคม 2025 2:36 pm โดย Ellache View Topic ไข้หวัดใหญ่อาการหนักแค่ไหน ค่ารักษาเท่าไหร่
เรียก API ไม่ได้ ไม่มีการตอบสนองใดๆกลับมา
โดย MBMoo ศ 23 พฤษภาคม 2025 2:18 pm บอร์ด Programming - C/C++ & java & Python
2
4355
ศ 23 พฤษภาคม 2025 2:44 pm โดย MBMoo View Topic เรียก API ไม่ได้ ไม่มีการตอบสนองใดๆกลับมา
เริ่มต้นสร้าง LINE Front-end Framework (LIFF) อย่างง่าย
โดย tsukasaz ศ 23 พฤษภาคม 2025 11:27 am บอร์ด Microsoft Office Knowledge & line & Etc
0
1740
ศ 23 พฤษภาคม 2025 11:27 am โดย tsukasaz View Topic เริ่มต้นสร้าง LINE Front-end Framework (LIFF) อย่างง่าย
เปลี่ยนเงินฝากมาเป็นประกันออมทรัพย์ดีกว่าอย่างไร
โดย Ellache พ 21 พฤษภาคม 2025 2:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
1355
พ 21 พฤษภาคม 2025 2:40 pm โดย Ellache View Topic เปลี่ยนเงินฝากมาเป็นประกันออมทรัพย์ดีกว่าอย่างไร
ปรับการ Zoom In Zoom Out ที่ Reponsive Design Mode ของ Safari ทำอย่างไร
โดย Buck Kittisak พ 21 พฤษภาคม 2025 12:17 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
1489
พ 21 พฤษภาคม 2025 12:17 pm โดย Buck Kittisak View Topic ปรับการ Zoom In Zoom Out ที่ Reponsive Design Mode ของ Safari ทำอย่างไร