ให้เรตสมาชิก: 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
สอบถามคะ ข้อมูลในฐานมันไม่ขึ้นเป็นเพราะอะไรต้องแก้ยังไงคะ
โดย moomai จ 10 เม.ย. 2017 6:53 pm บอร์ด Programming - PHP
1
169
จ 10 เม.ย. 2017 6:53 pm โดย moomai
จะดึงข้อมูลมาแสดงหน้าเว็บยังไงอะคะ
โดย Pacharawan KJ จ 10 เม.ย. 2017 9:27 am บอร์ด Programming - PHP
1
72
จ 10 เม.ย. 2017 9:27 am โดย tsukasaz
จะดึงข้อมูลจากMYSQL มาหน้าเว็บแบบตอนกรอกข้อม
โดย Pacharawan KJ จ 10 เม.ย. 2017 9:21 am บอร์ด Programming - PHP
1
63
จ 10 เม.ย. 2017 9:21 am โดย tsukasaz
แก้ปัญหา Consider disabling the Folder Usage Count. directadmin เข้า FILE_MANAGER ไม่ได้
โดย mindphp จ 10 เม.ย. 2017 2:47 am บอร์ด Linux - Web Server
1
38
จ 10 เม.ย. 2017 2:47 am โดย mindphp
หาข้อความที่ต้องการ จาก log ที่รัน Tail -f
โดย mindphp อ 09 เม.ย. 2017 4:29 pm บอร์ด Linux - Web Server
2
44
อ 09 เม.ย. 2017 4:29 pm โดย bom_002
Matlab (แมตแล็บ) คืออะไร
โดย bom_002 ส 08 เม.ย. 2017 5:57 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
51
ส 08 เม.ย. 2017 5:57 pm โดย bom_002
SASS-SCSS
โดย chornma ส 08 เม.ย. 2017 4:43 pm บอร์ด HTML CSS
0
37
ส 08 เม.ย. 2017 4:43 pm โดย chornma
D Programming
โดย chornma ส 08 เม.ย. 2017 4:37 pm บอร์ด Programming - C/C++ & java & Python
0
27
ส 08 เม.ย. 2017 4:37 pm โดย chornma
CMV คือการมีอะไรกันเหรอครับ...
โดย chornma ส 08 เม.ย. 2017 4:22 pm บอร์ด Programming - PHP
0
63
ส 08 เม.ย. 2017 4:22 pm โดย chornma
Artificial Intelligence - M[MODEL]C[CONTROLLER]V[VIEW] [NET]NETWORKING
โดย chornma ส 08 เม.ย. 2017 4:21 pm บอร์ด SQL - Database
1
51
ส 08 เม.ย. 2017 4:21 pm โดย mindphp
ค้นหาไฟล์ ของ user ในเครื่อง Linux ใช้ได้ทั้ง Ubunt CentOS
โดย mindphp ส 08 เม.ย. 2017 2:23 pm บอร์ด Linux - Web Server
1
39
ส 08 เม.ย. 2017 2:23 pm โดย mindphp
PXE booting (พิกซี่ บูตติ้ง) คืออะไร
โดย bom_002 ส 08 เม.ย. 2017 2:21 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
51
ส 08 เม.ย. 2017 2:21 pm โดย bom_002
สอบถามการใช้งาน Joomla ค่ะ ช่องที่ให้กรอก Link A | Link B คืออะไรค่ะ
โดย thatsawan ส 08 เม.ย. 2017 1:36 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
25
ส 08 เม.ย. 2017 1:36 pm โดย thatsawan
หลังจากยื่น ภงด.91/90 จ่ายชำระภาษีได้ถึงเมื่อไหร่ค่ะ
โดย thatsawan ศ 07 เม.ย. 2017 8:05 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
74
ศ 07 เม.ย. 2017 8:05 pm โดย Amp_Audit
ต้องการหารเวลากับระยะทาง ต้องแปลงค่ายังไงคะ
โดย moomai ศ 07 เม.ย. 2017 5:34 pm บอร์ด Programming - PHP
0
54
ศ 07 เม.ย. 2017 5:34 pm โดย moomai
สอนเขียนโปรแกรมผ่าน bluestacks
โดย Pacharawan KJ ศ 07 เม.ย. 2017 10:59 am บอร์ด Programming - PHP
0
43
ศ 07 เม.ย. 2017 10:59 am โดย Pacharawan KJ
สอนเขียนโปรแกรมผ่าน bluestacks
โดย บุคคลทั่วไป ศ 07 เม.ย. 2017 10:55 am บอร์ด Programming - PHP
1
65
ศ 07 เม.ย. 2017 10:55 am โดย บุคคลทั่วไป
รันคำสั่ง sudo yum update เจอ Error บน CentOS Existing lock /var/run/yum.pid
โดย mindphp พฤ 06 เม.ย. 2017 8:22 pm บอร์ด Linux - Web Server
1
38
พฤ 06 เม.ย. 2017 8:22 pm โดย mindphp
ตอนนี้พยายามจะแก้ไข โค๊ด error โดยมันแสดง error
โดย Jsk พฤ 06 เม.ย. 2017 1:16 pm บอร์ด Programming - PHP
1
58
พฤ 06 เม.ย. 2017 1:16 pm โดย mindphp
ขอสูตรคำนวณ pace หน่อยค่ะ
โดย moomai พ 05 เม.ย. 2017 1:53 pm บอร์ด Programming - PHP
2
63
พ 05 เม.ย. 2017 1:53 pm โดย moomai