ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 
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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
c# mvc เก็บและอ่านค่าที่หน้า web ใช้งานบ่อยๆลง cache ลดการ query db ทุกครั้ง
โดย jataz2 อ 18 เม.ย. 2017 11:36 am บอร์ด Programming - C/C++ & java & Python
0
33
อ 18 เม.ย. 2017 11:36 am โดย jataz2
ภาพหน้าปก youtube ขนาดเท่าไหร่ จะทำภาพปกเอง
โดย Akk Chu จ 17 เม.ย. 2017 7:40 pm บอร์ด HTML CSS
3
55
จ 17 เม.ย. 2017 7:40 pm โดย aeclubwoi
รบกวนช่วยแก้ปัญหา datagridview ใน c#
โดย บุคคลทั่วไป จ 17 เม.ย. 2017 7:25 pm บอร์ด Programming - C/C++ & java & Python
1
31
จ 17 เม.ย. 2017 7:25 pm โดย บุคคลทั่วไป
macro fillform / submit หน้าเว็บอัตโนมัติ ทำงานซ้ำๆ แทนการกดด้วยมือทุกครั้ง (iMacros)
โดย jataz2 จ 17 เม.ย. 2017 3:04 pm บอร์ด Programming - C/C++ & java & Python
0
24
จ 17 เม.ย. 2017 3:04 pm โดย jataz2
ต้องการให้ข้อมูลแสดงผล ตอนแรกขึ้น error ว่า Warnin
โดย Jsk อ 16 เม.ย. 2017 7:59 pm บอร์ด Programming - PHP
2
42
อ 16 เม.ย. 2017 7:59 pm โดย Jsk
ประโยชน์ของเม็ดบัว
โดย phpburiram ส 15 เม.ย. 2017 11:16 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
ส 15 เม.ย. 2017 11:16 pm โดย phpburiram
เข้า phpMyadmin Error Cannot start session without errors
โดย mindphp ศ 14 เม.ย. 2017 1:07 am บอร์ด Linux - Web Server
2
44
ศ 14 เม.ย. 2017 1:07 am โดย Jubtot Kkn
เข้า phpMyadmin Error Cannot start session without errors
โดย mindphp ศ 14 เม.ย. 2017 1:04 am บอร์ด Linux - Web Server
0
23
ศ 14 เม.ย. 2017 1:04 am โดย mindphp
เจอปัญหา หลังจาก custombuild ด้วย เวอร์ชั่นที่ต่างกัน
โดย mindphp พฤ 13 เม.ย. 2017 8:11 pm บอร์ด Linux - Web Server
1
26
พฤ 13 เม.ย. 2017 8:11 pm โดย mindphp
อัพเกรด php ใน directadmin เจอ Error #centOS 6 64-bit: /usr/lib64/libcrypto.so.10:
โดย mindphp พฤ 13 เม.ย. 2017 8:07 pm บอร์ด Linux - Web Server
0
23
พฤ 13 เม.ย. 2017 8:07 pm โดย mindphp
จะปิดการแสดงผล Copyright อย่างไรครับ Joomla Extension
โดย toonytoony2004 พ 12 เม.ย. 2017 10:06 pm บอร์ด Joomla Development
2
53
พ 12 เม.ย. 2017 10:06 pm โดย toonytoony2004
วันที่12ทุกปีวันอะไร
โดย beebeejooey พ 12 เม.ย. 2017 9:18 am บอร์ด Programming - PHP
0
49
พ 12 เม.ย. 2017 9:18 am โดย beebeejooey
FreeBSD Unix
โดย P.Sirawit อ 11 เม.ย. 2017 11:22 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
70
อ 11 เม.ย. 2017 11:22 pm โดย P.Sirawit
FreeBSD Unix
โดย บุคคลทั่วไป อ 11 เม.ย. 2017 11:05 pm บอร์ด Programming - PHP
0
44
อ 11 เม.ย. 2017 11:05 pm โดย บุคคลทั่วไป
WiMAX (ไวแมกซ์) คืออะไร
โดย bom_002 อ 11 เม.ย. 2017 7:06 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
44
อ 11 เม.ย. 2017 7:06 pm โดย bom_002
สอบถามเรื่อง fetch ข้อมูลจากฐานข้อมูลมาแสดง โดย Get จากไอดีที่เลิอก ข้อมูลแบบ Select ทำไม่เป็นอ่าครับ
โดย AePongsak อ 11 เม.ย. 2017 5:46 pm บอร์ด Programming - PHP
5
99
อ 11 เม.ย. 2017 5:46 pm โดย AePongsak
สอบถามค่ะ หน้าแก้ไขถ้าไม่มีการแก้ไขข้อมูล กด submit แล้วไม่บันทึกต้องทำยังไง
โดย moomai อ 11 เม.ย. 2017 5:04 pm บอร์ด Programming - PHP
1
58
อ 11 เม.ย. 2017 5:04 pm โดย thatsawan
ฟังก์ชันค้นข้อมูลจาก DB ตามเงื่อนไข โดยใช้ IONIC
โดย บุคคลทั่วไป อ 11 เม.ย. 2017 4:27 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
0
44
อ 11 เม.ย. 2017 4:27 pm โดย บุคคลทั่วไป
สอบถามค่ะ ต้องการแสดงข้อมูลเป็นไอดีใหม่เมื่อมีการแก้ไขต้องทำยังไงคะ
โดย moomai อ 11 เม.ย. 2017 12:55 pm บอร์ด Programming - PHP
9
102
อ 11 เม.ย. 2017 12:55 pm โดย thatsawan
สอบถามค่ะ ต้องการแสดงข้อมูลเป็นไอดีใหม่เมื่อมีการแก้ไขต้องทำยังไงคะ
โดย moomai อ 11 เม.ย. 2017 12:53 pm บอร์ด Programming - PHP
0
37
อ 11 เม.ย. 2017 12:53 pm โดย moomai