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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Introducing Mod MDFiles Featured MDFiles popular modules bring files from MDFile to show.
โดย wipaporn พ 13 ก.พ. 2019 6:51 pm บอร์ด English Language
0
30
พ 13 ก.พ. 2019 6:51 pm โดย wipaporn
การใช้งาน Python GUI (Tkinter) : Tkinter widget (Cursors)การแสดงผลตัวชี้เมาส์บน
โดย ธวัชชัย แสนหาญ พ 13 ก.พ. 2019 6:48 pm บอร์ด Python Knowledge
0
59
พ 13 ก.พ. 2019 6:48 pm โดย ธวัชชัย แสนหาญ
Introducing MDFiles Featured modules bring files from MDFile to show
โดย wipaporn พ 13 ก.พ. 2019 6:34 pm บอร์ด English Language
0
23
พ 13 ก.พ. 2019 6:34 pm โดย wipaporn
Introducing Editors XTD Multicontent, a plugin for pulling articles from Master Site into Web Clien.
โดย wipaporn พ 13 ก.พ. 2019 6:05 pm บอร์ด English Language
0
22
พ 13 ก.พ. 2019 6:05 pm โดย wipaporn
Introducing MJUpgrade for upgrading Joomla 1.5 to Joomla 2.5, 3.X
โดย wipaporn พ 13 ก.พ. 2019 6:03 pm บอร์ด English Language
0
19
พ 13 ก.พ. 2019 6:03 pm โดย wipaporn
Introducing the Mod vinaora visitors counter for counting website visits in joomla
โดย wipaporn พ 13 ก.พ. 2019 6:01 pm บอร์ด English Language
0
17
พ 13 ก.พ. 2019 6:01 pm โดย wipaporn
Introducing MVDO plugin for uploading Youtube videos and Clipmass
โดย wipaporn พ 13 ก.พ. 2019 5:58 pm บอร์ด English Language
0
16
พ 13 ก.พ. 2019 5:58 pm โดย wipaporn
Introducing MD Gallery Components for creating photo galleries on Joomla 3.x website
โดย wipaporn พ 13 ก.พ. 2019 5:54 pm บอร์ด English Language
0
15
พ 13 ก.พ. 2019 5:54 pm โดย wipaporn
ถ้าเปรียบชีวิตมี ค่า 100 %
โดย จันนุสรณ์ ดีแก่ พ 13 ก.พ. 2019 5:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
25
พ 13 ก.พ. 2019 5:30 pm โดย จันนุสรณ์ ดีแก่
Plugin MD Watermark 소개, 자동 워터마킹용 플러그
โดย wipaporn พ 13 ก.พ. 2019 3:53 pm บอร์ด korean Language - 한국어
0
21
พ 13 ก.พ. 2019 3:53 pm โดย wipaporn
PayToRead 소개. 플러그인은 일부 텍스트만 보여준다.
โดย wipaporn พ 13 ก.พ. 2019 3:51 pm บอร์ด korean Language - 한국어
0
15
พ 13 ก.พ. 2019 3:51 pm โดย wipaporn
Facebook에 웹 사이트 회원 등록을 돕기 위한 Component MFacebook 소개
โดย wipaporn พ 13 ก.พ. 2019 3:48 pm บอร์ด korean Language - 한국어
0
16
พ 13 ก.พ. 2019 3:48 pm โดย wipaporn
"Module Mrelated Article Specific Category"(저장소 검색 이력)을 소개한다
โดย wipaporn พ 13 ก.พ. 2019 3:46 pm บอร์ด korean Language - 한국어
0
17
พ 13 ก.พ. 2019 3:46 pm โดย wipaporn
MDFiles Categories Module을 소개한다.
โดย wipaporn พ 13 ก.พ. 2019 3:44 pm บอร์ด korean Language - 한국어
0
14
พ 13 ก.พ. 2019 3:44 pm โดย wipaporn
MDFile의 파일을 보여주는 mod mdfile recent 모듈 소개
โดย wipaporn พ 13 ก.พ. 2019 3:41 pm บอร์ด korean Language - 한국어
0
12
พ 13 ก.พ. 2019 3:41 pm โดย wipaporn
Joomla용 MDFile Components를 소개하고, 웹사이트에서 문서 파일을 다운로드하는 것을 돕는다.
โดย wipaporn พ 13 ก.พ. 2019 3:37 pm บอร์ด korean Language - 한국어
0
13
พ 13 ก.พ. 2019 3:37 pm โดย wipaporn
介绍joomla的components mdfile,帮助在网站上下载文档文件。
โดย wipaporn พ 13 ก.พ. 2019 3:32 pm บอร์ด Chinese Language - 简体中文
0
16
พ 13 ก.พ. 2019 3:32 pm โดย wipaporn
介绍mod mdfile recent模块以显示mdfile中的文件
โดย wipaporn พ 13 ก.พ. 2019 3:29 pm บอร์ด Chinese Language - 简体中文
0
14
พ 13 ก.พ. 2019 3:29 pm โดย wipaporn
介绍mod mdfiles categories模块从mdfile中引入类别。
โดย wipaporn พ 13 ก.พ. 2019 3:27 pm บอร์ด Chinese Language - 简体中文
0
10
พ 13 ก.พ. 2019 3:27 pm โดย wipaporn
介绍Module Mrelated Article Specific Category。存储浏览历史记录。
โดย wipaporn พ 13 ก.พ. 2019 3:23 pm บอร์ด Chinese Language - 简体中文
0
9
พ 13 ก.พ. 2019 3:23 pm โดย wipaporn