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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
介绍Component mFaceBook以帮助在Facebook上注册网站成员资
โดย wipaporn พ 13 ก.พ. 2019 3:20 pm บอร์ด Chinese Language - 简体中文
0
7
พ 13 ก.พ. 2019 3:20 pm โดย wipaporn
介绍Paytoread。插件只显示一些文本。
โดย wipaporn พ 13 ก.พ. 2019 3:17 pm บอร์ด Chinese Language - 简体中文
0
6
พ 13 ก.พ. 2019 3:17 pm โดย wipaporn
介绍插件MD水印(MD水印插件),自动水印插件
โดย wipaporn พ 13 ก.พ. 2019 3:15 pm บอร์ด Chinese Language - 简体中文
0
6
พ 13 ก.พ. 2019 3:15 pm โดย wipaporn
Introducing Plugin MD Watermark, plug for automatic watermarking
โดย wipaporn พ 13 ก.พ. 2019 3:11 pm บอร์ด English Language
0
9
พ 13 ก.พ. 2019 3:11 pm โดย wipaporn
Introducing PayToRead. The plugin shows only some text.
โดย wipaporn พ 13 ก.พ. 2019 3:08 pm บอร์ด English Language
0
10
พ 13 ก.พ. 2019 3:08 pm โดย wipaporn
Introducing Component MFacebook to help with website membership registration with Facebook
โดย wipaporn พ 13 ก.พ. 2019 3:06 pm บอร์ด English Language
0
7
พ 13 ก.พ. 2019 3:06 pm โดย wipaporn
Introducing Mrelated Article Specific Category Module (Storage browsing history).
โดย wipaporn พ 13 ก.พ. 2019 3:03 pm บอร์ด English Language
0
10
พ 13 ก.พ. 2019 3:03 pm โดย wipaporn
Introducing Mod MDFiles Categories Module Bring Categories from MDFile.
โดย wipaporn พ 13 ก.พ. 2019 2:59 pm บอร์ด English Language
0
9
พ 13 ก.พ. 2019 2:59 pm โดย wipaporn
Introducing the Mod MDFile recent module to show files from MDFile
โดย wipaporn พ 13 ก.พ. 2019 2:56 pm บอร์ด English Language
0
8
พ 13 ก.พ. 2019 2:56 pm โดย wipaporn
Introducing MDFile Components for Joomla, helping to download document files on the website.
โดย wipaporn พ 13 ก.พ. 2019 2:49 pm บอร์ด English Language
0
12
พ 13 ก.พ. 2019 2:49 pm โดย wipaporn
Features Review : Components MDFile membantu memuat turun fail dokumen di laman web.
โดย abdkode พ 13 ก.พ. 2019 2:37 pm บอร์ด Bahasa Language
0
13
พ 13 ก.พ. 2019 2:37 pm โดย abdkode
อัพเดทเลย! Joomla เวอร์ชั่น 3.9.3 แก้ไขเรื่องความปลอดภัยและข้อผิดพลาด
โดย tsukasaz พ 13 ก.พ. 2019 11:37 am บอร์ด PHP News
0
25
พ 13 ก.พ. 2019 11:37 am โดย tsukasaz
การยกเลิกการแบนอีเมลล์ พร้อมวิธีการยกเลิกการแบนอีเมลล์ สามารถทำได้อย่างไร สำหรับผู้ดูแลระบบ
โดย จันนุสรณ์ ดีแก่ พ 13 ก.พ. 2019 10:46 am บอร์ด phpBB user Guide Knowledge
0
20
พ 13 ก.พ. 2019 10:46 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 13 กุมภาพันธ์ 2562
โดย wipaporn พ 13 ก.พ. 2019 10:24 am บอร์ด MP10 - วิภาพร กะลาสี
1
12
พ 13 ก.พ. 2019 6:55 pm โดย wipaporn
งานประจำวันที่ 13 กุมภาพันธ์ 2562
โดย Four พ 13 ก.พ. 2019 10:07 am บอร์ด M077 - อิษยา งามสอาด
1
9
พ 13 ก.พ. 2019 11:49 am โดย Four
Features Review : Mod MDFile recent Module yang menunjukkan fail yang diupload
โดย abdkode อ 12 ก.พ. 2019 6:45 pm บอร์ด Bahasa Language
0
15
อ 12 ก.พ. 2019 6:45 pm โดย abdkode
R - mdsoft_member_royalty ระบบจัดระดับสมาชิก ปรับ Level ลูกค้าอัตโนมัติ
โดย thatsawan อ 12 ก.พ. 2019 6:14 pm บอร์ด สิริกิตติรัตน์ - Developer
1
4
พฤ 14 ก.พ. 2019 10:51 pm โดย thatsawan
เงินต้นเดือน
โดย จันนุสรณ์ ดีแก่ อ 12 ก.พ. 2019 5:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
22
อ 12 ก.พ. 2019 5:46 pm โดย จันนุสรณ์ ดีแก่
Q - recaptcha ไม่แสดงในหน้าเว็บเมื่อติดตั้งใน Joomla เวอร์ชัน 4
โดย Parichat อ 12 ก.พ. 2019 5:45 pm บอร์ด Joomla Dev
7
14
พ 13 ก.พ. 2019 4:47 pm โดย Parichat
การใช้งาน Python GUI (Tkinter) : Tkinter widget (Anchors)การควบคุมตําแหน่ง
โดย ธวัชชัย แสนหาญ อ 12 ก.พ. 2019 4:57 pm บอร์ด Python Knowledge
0
51
อ 12 ก.พ. 2019 4:57 pm โดย ธวัชชัย แสนหาญ