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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 10 มกราคม 2561
โดย Four พ 10 ม.ค. 2018 9:48 am บอร์ด MT22 - อิษยา งามสอาด
1
34
พ 10 ม.ค. 2018 12:40 pm โดย Four
งานประจำวันที่ 10 มกราคม 2561
โดย Jom07 พ 10 ม.ค. 2018 9:47 am บอร์ด MT23 - สุพรรษา พูลตา
1
27
พ 10 ม.ค. 2018 10:51 am โดย Jom07
งานประจำวันที่ 10 มกราคม 2561
โดย Parichat พ 10 ม.ค. 2018 9:43 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
16
พ 10 ม.ค. 2018 6:16 pm โดย Parichat
สอบถาม เรื่อง Join ตารางของ phpbb
โดย AePongsak อ 09 ม.ค. 2018 7:09 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
24
อ 09 ม.ค. 2018 7:39 pm โดย mindphp
สอบถามเรื่อง ต้องการแปลง Password ของ phpbb ออกมาในรูปแบบจริง
โดย AePongsak อ 09 ม.ค. 2018 6:12 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
31
อ 09 ม.ค. 2018 7:05 pm โดย AePongsak
Public Cloud คืออะไร
โดย kubarnaza อ 09 ม.ค. 2018 5:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
35
อ 09 ม.ค. 2018 5:39 pm โดย kubarnaza
ทำความรู้จักกับ Cloud Server
โดย kubarnaza อ 09 ม.ค. 2018 4:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
อ 09 ม.ค. 2018 4:25 pm โดย kubarnaza
ความแตกต่างของ SQL Database และ Firebase Database
โดย Four อ 09 ม.ค. 2018 4:24 pm บอร์ด Mobile Application Developing- Android, iOS
0
32
อ 09 ม.ค. 2018 4:24 pm โดย Four
GPS Tracking Real Time คืออะไร
โดย Jom07 อ 09 ม.ค. 2018 4:23 pm บอร์ด IOT - Internet of things
0
23
อ 09 ม.ค. 2018 4:23 pm โดย Jom07
การใช้งาน Gradients ใน CSS
โดย Parichat อ 09 ม.ค. 2018 3:40 pm บอร์ด CSS Knowledge
0
27
อ 09 ม.ค. 2018 3:40 pm โดย Parichat
GPS Tracking Off-Line คืออะไร
โดย Jom07 อ 09 ม.ค. 2018 3:38 pm บอร์ด IOT - Internet of things
0
25
อ 09 ม.ค. 2018 3:38 pm โดย Jom07
การใช้งาน Box Model ใน CSS
โดย Parichat อ 09 ม.ค. 2018 3:01 pm บอร์ด CSS Knowledge
0
27
อ 09 ม.ค. 2018 3:01 pm โดย Parichat
การเรียกใช้งาน Google Maps Android API อย่างง่ายบน Android Studio
โดย Four อ 09 ม.ค. 2018 2:47 pm บอร์ด Mobile Application Developing- Android, iOS
0
27
อ 09 ม.ค. 2018 2:47 pm โดย Four
การใช้งาน Padding ใน CSS
โดย Parichat อ 09 ม.ค. 2018 2:44 pm บอร์ด CSS Knowledge
0
33
อ 09 ม.ค. 2018 2:44 pm โดย Parichat
GPS Navigator คืออะไร
โดย Jom07 อ 09 ม.ค. 2018 2:32 pm บอร์ด IOT - Internet of things
0
21
อ 09 ม.ค. 2018 2:32 pm โดย Jom07
การใช้งาน class "container" ในBootstrap
โดย Parichat อ 09 ม.ค. 2018 2:27 pm บอร์ด Booststap Knowledge
0
29
อ 09 ม.ค. 2018 2:27 pm โดย Parichat
Firebase คืออะไร
โดย Four อ 09 ม.ค. 2018 2:24 pm บอร์ด Mobile Application Developing- Android, iOS
0
19
อ 09 ม.ค. 2018 2:24 pm โดย Four
การใช้งาน JSON
โดย Four อ 09 ม.ค. 2018 1:36 pm บอร์ด XML Knowledge
0
30
อ 09 ม.ค. 2018 1:36 pm โดย Four
ระบบการทำงาน GPS Tracker รุ่น ID5 ระบบ GPS+
โดย Jom07 อ 09 ม.ค. 2018 1:30 pm บอร์ด IOT - Internet of things
0
22
อ 09 ม.ค. 2018 1:30 pm โดย Jom07
GPS สามารถประยุกต์ใช้งานอะไรบ้าง
โดย Jom07 อ 09 ม.ค. 2018 1:28 pm บอร์ด IOT - Internet of things
0
21
อ 09 ม.ค. 2018 1:28 pm โดย Jom07