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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 4 กุมภาพันธ์ 2562
โดย Sitikoriyoh จ 04 ก.พ. 2019 11:05 am บอร์ด M078 - ซีตีกอรีเย๊าะห์ สุไลมัน
0
11
จ 04 ก.พ. 2019 11:05 am โดย Sitikoriyoh
Work on hand ซีตีกอรีเย๊าะห์ สุไลมัน M078
โดย Sitikoriyoh จ 04 ก.พ. 2019 11:05 am บอร์ด M078 - ซีตีกอรีเย๊าะห์ สุไลมัน
0
3
จ 04 ก.พ. 2019 11:05 am โดย Sitikoriyoh
Work's on hand วิภาพร กะลาสี mo78
โดย wipaporn จ 04 ก.พ. 2019 11:05 am บอร์ด MP10 - วิภาพร กะลาสี
3
26
ศ 15 ก.พ. 2019 6:12 pm โดย Parichat
Work's on Hand อิษยา งามสอาด M077
โดย Four จ 04 ก.พ. 2019 11:05 am บอร์ด M077 - อิษยา งามสอาด
5
44
ศ 15 ก.พ. 2019 6:24 pm โดย Four
Python GUI พลิกภาพจากซ้าย-ขวา
โดย ichimarusoichi จ 04 ก.พ. 2019 11:04 am บอร์ด Programming - C/C++ & java & Python
0
45
จ 04 ก.พ. 2019 11:04 am โดย ichimarusoichi
งานประจำวันที่ 4 กุมภาพันธ์ 2562
โดย Four จ 04 ก.พ. 2019 10:59 am บอร์ด M077 - อิษยา งามสอาด
1
16
จ 04 ก.พ. 2019 11:00 am โดย Four
Python tkinter แปลงภาพให้เป็นสีเทา
โดย ichimarusoichi จ 04 ก.พ. 2019 10:48 am บอร์ด Programming - C/C++ & java & Python
0
47
จ 04 ก.พ. 2019 10:48 am โดย ichimarusoichi
อยากทราบวิธีการ ตรวจสอบว่า ผู้ใช้งาน เป็น Admin หรือไม ใน phpbb
โดย Ittichai_chupol จ 04 ก.พ. 2019 10:18 am บอร์ด Programming - PHP
0
53
จ 04 ก.พ. 2019 10:18 am โดย Ittichai_chupol
อยากทราบวิธีการ ดึงค่า post_id ที่พึงเพิ่มเข้ามาล่าสุด ใน phpbb
โดย Ittichai_chupol ส 02 ก.พ. 2019 2:24 pm บอร์ด Programming - PHP
1
79
ส 02 ก.พ. 2019 3:36 pm โดย mindphp
อยากทราบวิธีการ ดึงค่า topic_id ที่พึงเพิ่มเข้ามาล่าสุด ใน phpbb
โดย Ittichai_chupol ส 02 ก.พ. 2019 2:22 pm บอร์ด Programming - PHP
2
105
ส 02 ก.พ. 2019 5:19 pm โดย mindphp
เหตุผลของการทำงาน
โดย จันนุสรณ์ ดีแก่ ศ 01 ก.พ. 2019 5:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
63
ศ 01 ก.พ. 2019 5:50 pm โดย จันนุสรณ์ ดีแก่
Python tkinter openimg and saveimg
โดย ichimarusoichi ศ 01 ก.พ. 2019 5:41 pm บอร์ด Programming - C/C++ & java & Python
0
59
ศ 01 ก.พ. 2019 5:41 pm โดย ichimarusoichi
Python tkinter สร้างปุ่มเมนูเพื่อเปิดไฟล์ภาพ
โดย ichimarusoichi ศ 01 ก.พ. 2019 4:54 pm บอร์ด Programming - C/C++ & java & Python
0
83
ศ 01 ก.พ. 2019 4:54 pm โดย ichimarusoichi
Python tkinter เปิดไฟล์ภาพ-หมุนภาพ-กลับสู่ภาพเดิม
โดย ichimarusoichi ศ 01 ก.พ. 2019 4:12 pm บอร์ด Programming - C/C++ & java & Python
0
64
ศ 01 ก.พ. 2019 4:12 pm โดย ichimarusoichi
วิธีการสร้าง Extension สำหรับสร้างนามแฝง ใน phpbb
โดย Ittichai_chupol ศ 01 ก.พ. 2019 4:03 pm บอร์ด Programming - PHP
0
58
ศ 01 ก.พ. 2019 4:03 pm โดย Ittichai_chupol
อย่ากทราบวิธีการ ตรวจสอบว่า ผู้ที่ใช้งานเป้น Admin หรือไม ใน phpbb
โดย Ittichai_chupol ศ 01 ก.พ. 2019 2:22 pm บอร์ด Programming - PHP
0
49
ศ 01 ก.พ. 2019 2:22 pm โดย Ittichai_chupol
อยากทราบวิธีการสร้าง code ให้มีจำนวนตาม เลขที่กรอก ใน phpbb
โดย Ittichai_chupol ศ 01 ก.พ. 2019 2:15 pm บอร์ด Programming - PHP
0
50
ศ 01 ก.พ. 2019 2:15 pm โดย Ittichai_chupol
ทำความรู้จักกับรูปแบบวันที่ พร้อมตัวอย่างสำหรับการตั้งค่า สำหรับผู้ใช้งานทั่วไป
โดย จันนุสรณ์ ดีแก่ ศ 01 ก.พ. 2019 12:04 pm บอร์ด phpBB user Guide Knowledge
0
45
ศ 01 ก.พ. 2019 12:04 pm โดย จันนุสรณ์ ดีแก่
google sheet จะเขียนโค๊ดสร้างปุ่มสั่งพิมพ์ยังไงครับ
โดย KruOhm ศ 01 ก.พ. 2019 11:31 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
68
ศ 01 ก.พ. 2019 11:31 am โดย KruOhm
[Extension phpBB3.1.1] Magic OGP links: thumbnails and descriptions แสดงภาพขนาดย่อพร้อมคำอธิบาย
โดย จันนุสรณ์ ดีแก่ ศ 01 ก.พ. 2019 10:33 am บอร์ด phpBB 3.1 Extension Review
0
49
ศ 01 ก.พ. 2019 10:33 am โดย จันนุสรณ์ ดีแก่