ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Android Studio การสร้าง Context Menu ใน Activity
โดย Four พฤ 11 ม.ค. 2018 2:56 pm บอร์ด Mobile Application Developing- Android, iOS
0
23
พฤ 11 ม.ค. 2018 2:56 pm โดย Four
ทำความรู้จัก BIOS
โดย Jom07 พฤ 11 ม.ค. 2018 2:48 pm บอร์ด Software testing
0
20
พฤ 11 ม.ค. 2018 2:48 pm โดย Jom07
การใช้ animate() ใน jQuery
โดย Parichat พฤ 11 ม.ค. 2018 2:34 pm บอร์ด Jquery & Ajax Knowledge
0
22
พฤ 11 ม.ค. 2018 2:34 pm โดย Parichat
Android Studio การใช้งาน Class TextView
โดย Four พฤ 11 ม.ค. 2018 2:07 pm บอร์ด Mobile Application Developing- Android, iOS
0
17
พฤ 11 ม.ค. 2018 2:07 pm โดย Four
GOOGLE MAP API คืออะไร
โดย Jom07 พฤ 11 ม.ค. 2018 2:01 pm บอร์ด Mobile Application Developing- Android, iOS
0
27
พฤ 11 ม.ค. 2018 2:01 pm โดย Jom07
Android Studio การใช้งาน Class ImageView
โดย Four พฤ 11 ม.ค. 2018 1:12 pm บอร์ด Mobile Application Developing- Android, iOS
0
23
พฤ 11 ม.ค. 2018 1:12 pm โดย Four
การใช้ Sliding ใน jQuery
โดย Parichat พฤ 11 ม.ค. 2018 12:09 pm บอร์ด Jquery & Ajax Knowledge
0
18
พฤ 11 ม.ค. 2018 12:09 pm โดย Parichat
ทำไมถึงควรจะใช้ AppMakr
โดย Jom07 พฤ 11 ม.ค. 2018 12:08 pm บอร์ด Mobile Application Developing- Android, iOS
0
22
พฤ 11 ม.ค. 2018 12:08 pm โดย Jom07
ทำไม URL Joomla ของผมถึงไม่มี .html ต่อท้ายครับ
โดย Before Dong พฤ 11 ม.ค. 2018 11:40 am บอร์ด Joomla Development
1
32
พฤ 11 ม.ค. 2018 1:27 pm โดย tsukasaz
การใช้ method text(), html()และ val() ใน jQuery
โดย Parichat พฤ 11 ม.ค. 2018 11:14 am บอร์ด Jquery & Ajax Knowledge
0
33
พฤ 11 ม.ค. 2018 11:14 am โดย Parichat
AppMakr คืออะไร
โดย Jom07 พฤ 11 ม.ค. 2018 11:05 am บอร์ด Mobile Application Developing- Android, iOS
0
23
พฤ 11 ม.ค. 2018 11:05 am โดย Jom07
Android Studio การใช้งาน Class EditText
โดย Four พฤ 11 ม.ค. 2018 10:56 am บอร์ด Mobile Application Developing- Android, iOS
0
25
พฤ 11 ม.ค. 2018 10:56 am โดย Four
เมื่อ Sale ต้องเดินทางไปหาลูกค้า
โดย Before Dong พฤ 11 ม.ค. 2018 10:55 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
พฤ 11 ม.ค. 2018 10:55 am โดย Before Dong
การใช้ method append() ใน jQuery
โดย Parichat พฤ 11 ม.ค. 2018 10:51 am บอร์ด Jquery & Ajax Knowledge
0
15
พฤ 11 ม.ค. 2018 10:51 am โดย Parichat
ข้อดีของการสร้าง Emulator
โดย Jom07 พฤ 11 ม.ค. 2018 10:42 am บอร์ด Mobile Application Developing- Android, iOS
0
19
พฤ 11 ม.ค. 2018 10:42 am โดย Jom07
งานประจำวันที่ 11 มกราคม 2561
โดย Four พฤ 11 ม.ค. 2018 9:55 am บอร์ด MT22 - อิษยา งามสอาด
1
18
พฤ 11 ม.ค. 2018 10:57 am โดย Four
งานประจำวันที่ 11 มกราคม 2561
โดย Jom07 พฤ 11 ม.ค. 2018 9:52 am บอร์ด MT23 - สุพรรษา พูลตา
1
20
พฤ 11 ม.ค. 2018 10:43 am โดย Jom07
งานประจำวันที่ 11 มกราคม 2561
โดย Parichat พฤ 11 ม.ค. 2018 9:41 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
12
พฤ 11 ม.ค. 2018 6:56 pm โดย Parichat
phpBB 3.2.2 ออกแล้ว support memcache
โดย mindphp พฤ 11 ม.ค. 2018 8:33 am บอร์ด PHP News
1
23
พฤ 11 ม.ค. 2018 8:34 am โดย mindphp
สอบถามโค้ด phpBB เรื่องการเข้ารหัสแบบ Password
โดย AePongsak พ 10 ม.ค. 2018 5:00 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
65
พฤ 11 ม.ค. 2018 11:16 am โดย thatsawan