ให้เรตสมาชิก: 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
สถาปัตยกรรมของระบบปฏิบัติการ Android
โดย Ik Kat อ 27 มิ.ย. 2017 5:04 pm บอร์ด Mobile Application Developing- Android, iOS
0
1
อ 27 มิ.ย. 2017 5:04 pm โดย Ik Kat
MJFORM error
โดย บุคคลทั่วไป อ 27 มิ.ย. 2017 4:16 pm บอร์ด Programming - PHP
0
4
อ 27 มิ.ย. 2017 4:16 pm โดย บุคคลทั่วไป
วิธีการแก้ปัญหา การดึงข้อมูล จากฐานข้อมูล เมื่อเปลี่ยน charset ใน แท็ก meta
โดย bellzeed อ 27 มิ.ย. 2017 3:54 pm บอร์ด Programming - PHP
0
5
อ 27 มิ.ย. 2017 3:54 pm โดย bellzeed
การเข้าสู่ระบบด้วย Facebook ภายในแอพหรือเว็บไซต์
โดย Ik Kat อ 27 มิ.ย. 2017 3:43 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
8
อ 27 มิ.ย. 2017 3:43 pm โดย Ik Kat
แนะนำ Account Kit การเข้าสู่ระบบด้วยอีเมลและหมายเลขโทรศัพท์มือถือ
โดย Ik Kat อ 27 มิ.ย. 2017 3:18 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
7
อ 27 มิ.ย. 2017 3:18 pm โดย Ik Kat
5 Plugins ที่จำเป็นต้องมีใน WordPress
โดย Ik Kat อ 27 มิ.ย. 2017 2:54 pm บอร์ด Wordpress user Guide Knowledge
0
6
อ 27 มิ.ย. 2017 2:54 pm โดย Ik Kat
OpenERP 7 กับ odoo เวอร์ชั่นล่าสุด มือใหม่ใช้ตัวไหนดีกว่าหรอครับ
โดย falconnut อ 27 มิ.ย. 2017 2:45 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
13
อ 27 มิ.ย. 2017 2:50 pm โดย mindphp
ส่วนประกอบและคุณสมบัติของ Raspberry Pi 2 Model B
โดย bellzeed อ 27 มิ.ย. 2017 2:12 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
14
อ 27 มิ.ย. 2017 2:12 pm โดย bellzeed
รายชื่อโปรแกรมที่สามารถเขียน Python ได้
โดย บัวบุญ จันทะโคตร อ 27 มิ.ย. 2017 1:13 pm บอร์ด Programming - C/C++ & java & Python
0
11
อ 27 มิ.ย. 2017 1:13 pm โดย บัวบุญ จันทะโคตร
วิธีแปลง WordPress ให้เป็น Mobile App โดยใช้ WordApp
โดย Ik Kat อ 27 มิ.ย. 2017 12:42 pm บอร์ด Wordpress user Guide Knowledge
0
5
อ 27 มิ.ย. 2017 12:42 pm โดย Ik Kat
ทำความรู้จักกับ Node.js
โดย บัวบุญ จันทะโคตร อ 27 มิ.ย. 2017 11:56 am บอร์ด HTML CSS
0
17
อ 27 มิ.ย. 2017 11:56 am โดย บัวบุญ จันทะโคตร
วิธีดึงคลิปจาก youtube มาแสดงในเว็ปไซต์ด้วย iframe HTML
โดย Before Dong อ 27 มิ.ย. 2017 11:53 am บอร์ด XML Knowledge
0
7
อ 27 มิ.ย. 2017 11:53 am โดย Before Dong
ทำความรู้จักกับ AngularJS
โดย บัวบุญ จันทะโคตร อ 27 มิ.ย. 2017 11:14 am บอร์ด HTML CSS
0
12
อ 27 มิ.ย. 2017 11:14 am โดย บัวบุญ จันทะโคตร
HTML color Names ที่รองรับหลายเว็ปไซต์
โดย Before Dong อ 27 มิ.ย. 2017 11:12 am บอร์ด XML Knowledge
0
6
อ 27 มิ.ย. 2017 11:12 am โดย Before Dong
งานประจำวันที่ 27 มิถุนายน 2560
โดย Ik Kat อ 27 มิ.ย. 2017 10:43 am บอร์ด MT19 - ปวีณา จันดี
1
7
อ 27 มิ.ย. 2017 10:43 am โดย Ik Kat
วิธีปรับภาพให้คมชัดขึ้นโดย Smart Sharpen ด้วย Photoshop
โดย Before Dong อ 27 มิ.ย. 2017 10:29 am บอร์ด Graphic design
0
7
อ 27 มิ.ย. 2017 10:29 am โดย Before Dong
วิธีทำภาพขาวดำโดย Desaturate ด้วยPhotoshop
โดย Before Dong อ 27 มิ.ย. 2017 10:07 am บอร์ด Graphic design
0
5
อ 27 มิ.ย. 2017 10:07 am โดย Before Dong
งานประจำวันที่ 27 June 17
โดย bellzeed อ 27 มิ.ย. 2017 9:43 am บอร์ด M047 - วิศรุต เรืองอุไร
0
9
อ 27 มิ.ย. 2017 9:43 am โดย bellzeed
งานประจำวันที่ 27 มิถุนายน 2560
โดย บัวบุญ จันทะโคตร อ 27 มิ.ย. 2017 9:31 am บอร์ด M048 - บัวบัญ จันทะโครต
0
15
อ 27 มิ.ย. 2017 9:31 am โดย บัวบุญ จันทะโคตร
งานประจำวันที่ 27 มิถุนายน 2560
โดย Before Dong อ 27 มิ.ย. 2017 9:22 am บอร์ด M046 - อนวัช พริบไหว
0
4
อ 27 มิ.ย. 2017 9:22 am โดย Before Dong