หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

บทช่วยสอนการใช้งานพื้นฐานของ HTML5 WebSockets

ผู้เขียน：Eve Cole เวลาอัปเดต：2010-10-07 18:43:37

หนึ่งในคุณสมบัติใหม่ที่ยอดเยี่ยมใน HTML5 คือ WebSockets ซึ่งช่วยให้เราสามารถพูดคุยกับเซิร์ฟเวอร์โดยไม่ต้องร้องขอ AJAX วันนี้ Bin Go จะให้คุณเรียกใช้ WebSocket ผ่านฝั่งเซิร์ฟเวอร์ของสภาพแวดล้อม PHP สร้างไคลเอนต์และส่งและรับข้อมูลฝั่งเซิร์ฟเวอร์ผ่านโปรโตคอล WebSockets

WebSockets คืออะไร?

WebSockets เป็นเทคโนโลยีสำหรับการสื่อสารสองทางบนอินเทอร์เฟซ (TCP) ประเภทเทคโนโลยี PUSH ในเวลาเดียวกัน WebSockets จะยังคงเป็นไปตามมาตรฐาน W3C จนถึงขณะนี้เบราว์เซอร์ Chrome และ Safari เวอร์ชันล่าสุดรองรับ WebSockets แล้ว

WebSockets จะมาแทนที่อะไร? WebSockets สามารถแทนที่ Long Polling (เทคโนโลยีการพุชเซิร์ฟเวอร์ PHP) ซึ่งเป็นแนวคิดที่น่าสนใจ ไคลเอนต์ส่งคำขอไปยังเซิร์ฟเวอร์ ตอนนี้ เซิร์ฟเวอร์จะไม่ตอบสนองต่อข้อมูลที่ไม่พร้อม โดยจะเปิดการเชื่อมต่อไว้จนกว่าข้อมูลล่าสุดจะพร้อมส่ง ขอ. . สิ่งนี้มีข้อดีคือ ลดเวลาแฝงของการเชื่อมต่อใด ๆ และลดความจำเป็นในการสร้างการเชื่อมต่อใหม่เมื่อมีการเปิดอยู่แล้ว แต่ Long-Polling ไม่ใช่เทคโนโลยีที่หรูหรา ยังคงเป็นไปได้ที่คำขอระงับจะเกิดขึ้น ดังนั้นจึงจำเป็นต้องสร้างการเชื่อมต่อใหม่

แอปพลิเคชัน AJAX บางตัวใช้เทคนิคข้างต้น ซึ่งมักมีสาเหตุมาจากการใช้ทรัพยากรต่ำ

ลองจินตนาการดูว่าจะเป็นเรื่องดีอะไรหากเซิร์ฟเวอร์เริ่มทำงานในตอนเช้าและส่งข้อมูลไปยังไคลเอนต์ที่ต้องการรับโดยไม่ต้องตั้งค่าพอร์ตการเชื่อมต่อล่วงหน้า! ยินดีต้อนรับสู่โลกแห่งเทคโนโลยี PUSH!

ขั้นตอนที่ 1: รับเซิร์ฟเวอร์ WebSocket

บทช่วยสอนนี้จะเน้นไปที่การสร้างไคลเอ็นต์มากกว่าการดำเนินการฝั่งเซิร์ฟเวอร์และการดำเนินการอื่นๆ

ฉันใช้ XAMPP บน Windows 7 เพื่อเรียกใช้ PHP ในเครื่อง phpwebsockets เป็นเซิร์ฟเวอร์ PHP WebSocket (จากประสบการณ์ของฉัน เวอร์ชันนี้มีปัญหาเล็กน้อย ฉันได้แก้ไขเวอร์ชันดังกล่าวและอัปโหลดไฟล์ต้นฉบับเพื่อแชร์กับทุกคน) เวอร์ชันต่างๆ ด้านล่างนี้สามารถใช้ WebSocket ได้ หากเวอร์ชันใดไม่ได้ผล คุณสามารถลองใช้เวอร์ชันอื่นได้ หรือดำเนินการต่อด้วยบทช่วยสอนด้านล่าง

jWebSocket (จาวา)

เว็บซ็อกเก็ตทับทิม (ทับทิม)

ซ็อกเก็ต IO-โหนด (node.js)

เริ่มต้นเซิร์ฟเวอร์ Apache

ขั้นตอนที่ 2: แก้ไข URL และพอร์ต

แก้ไขเซิร์ฟเวอร์ตามการติดตั้งครั้งก่อนของคุณ นี่คือตัวอย่างจาก setup.class.php:

ฟังก์ชั่นสาธารณะ __construct($host='localhost',$port=8000,$max=100)
-
$this->createSocket($host,$พอร์ต);
-

เรียกดูไฟล์และทำการเปลี่ยนแปลงตามความเหมาะสม

ขั้นตอนที่ 3: เริ่มสร้างไคลเอนต์

มาสร้างเทมเพลตพื้นฐานกันดีกว่า นี่คือไฟล์ client.php ของฉัน:

<!DOCTYPE html>
<html>
<หัว>
<สคริปต์ src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</สคริปต์>
<title>ไคลเอ็นต์ WebSockets</title>
</หัว>
<ร่างกาย>
<div id="wrapper">
<div id="คอนเทนเนอร์">
<h1>ไคลเอ็นต์ WebSockets</h1>
<div id="chatLog">
</div><!-- #chatLog -->
<p id="examples">เช่น ลอง 'สวัสดี', 'ชื่อ', 'อายุ', 'วันนี้'</p>
<input id="text" type="text" />
<button id="disconnect">ยกเลิกการเชื่อมต่อ</button>
</div><!-- #คอนเทนเนอร์ -->
</div>
</ร่างกาย>
</html>

เราได้สร้างเทมเพลตพื้นฐาน: คอนเทนเนอร์บันทึกการแชท กล่องป้อนข้อมูล และปุ่มยกเลิกการเชื่อมต่อ

ขั้นตอนที่ 4: เพิ่ม CSS

ไม่มีรหัสแฟนซี เพียงแค่จัดการสไตล์ป้ายกำกับ

ร่างกาย {
ตระกูลฟอนต์:Arial, Helvetica, sans-serif;
-
#คอนเทนเนอร์{
เส้นขอบ: 5px สีเทาทึบ;
ความกว้าง:800px;
ระยะขอบ:0 อัตโนมัติ;
ช่องว่างภายใน:10px;
-
#บันทึกแชท{
ช่องว่างภายใน:5px;
ขอบ: 1px สีดำทึบ;
-
#chatLog p {
ระยะขอบ:0;
-
.เหตุการณ์{
สี:#999;
-
.คำเตือน{
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#CCC;
-

ขั้นตอนที่ 5: WebSocket

กิจกรรม ก่อนอื่นให้เราลองและทำความเข้าใจแนวคิดของเหตุการณ์ WebSocket:

เหตุการณ์ WebSocket:

เราจะใช้เหตุการณ์ WebSocket สามเหตุการณ์:

onopen: เมื่อเปิดอินเทอร์เฟซ

onmessage: เมื่อได้รับข้อความ

onclose: เมื่อปิดอินเทอร์เฟซ

เราจะบรรลุเป้าหมายนี้ได้อย่างไร?

ขั้นแรกให้สร้างวัตถุ WebSocket

var socket = WebSocket ใหม่ ("ws://localhost:8000/socket/server/startDaemon.php");

จากนั้นตรวจพบเหตุการณ์ดังนี้

socket.onopen = ฟังก์ชั่น () {
alert("ซ็อกเก็ตถูกเปิดแล้ว!");
-

ทำสิ่งนี้เมื่อเราได้รับข้อมูล:

socket.onmessage = ฟังก์ชั่น (ผงชูรส) {
alert(msg); //เยี่ยมมาก!
-

แต่เรายังคงพยายามหลีกเลี่ยงการใช้การแจ้งเตือน และตอนนี้เราสามารถรวมสิ่งที่เราเรียนรู้เข้ากับหน้าลูกค้าได้

ขั้นตอนที่ 6: จาวาสคริปต์

ขั้นแรกเราใส่โค้ดลงในฟังก์ชัน document.ready ของ jQuery จากนั้นเราจะตรวจสอบว่าเบราว์เซอร์ของผู้ใช้รองรับ WebSocket หรือไม่ หากไม่รองรับ เราจะเพิ่มลิงก์ไปยังหน้า Chrome

$(เอกสาร).ready(function() {
if(!("WebSocket" ในหน้าต่าง)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('<p>โอ้ ไม่นะ คุณต้องมีเบราว์เซอร์ที่รองรับ WebSockets แล้ว <a href="Google'>http://www.google.com/chrome">Google Chrome</a> ล่ะ</p >').appendTo('#คอนเทนเนอร์');
}อื่น{
//ผู้ใช้มี WebSockets
เชื่อมต่อ();
ฟังก์ชั่นเชื่อมต่อ () {
//โค้ดฟังก์ชันการเชื่อมต่ออยู่ด้านล่าง
-
-

อย่างที่คุณเห็น หากเบราว์เซอร์ของผู้ใช้รองรับ WebSocket เราจะดำเนินการฟังก์ชันเชื่อมต่อ() นี่คือฟังก์ชันหลัก เราจะเริ่มสร้างกิจกรรมเปิด ปิด และรับ

เราจะกำหนด URL บนเซิร์ฟเวอร์ของเรา

ซ็อกเก็ต var;
var โฮสต์ = "ws://localhost:8000/socket/server/startDaemon.php";

คุณอาจพบว่าไม่มี http ใน URL? ใช่ นี่คือ WebSocket URL โดยใช้โปรโตคอลอื่น

เรามาต่อด้วยฟังก์ชัน Connect() เราใส่โค้ดลงในบล็อก try/catch เพื่อที่ว่าหากมีปัญหากับโค้ด เราก็สามารถแจ้งให้ผู้ใช้ทราบได้ เราสร้าง WebSocket และส่งข้อมูลไปยังฟังก์ชัน message() ซึ่งจะอธิบายในภายหลัง เราสร้างฟังก์ชัน onopen, onmessage และ onclose ของเรา ควรสังเกตว่าเราระบุสถานะพอร์ตสำหรับผู้ใช้ ซึ่งไม่จำเป็น แต่เราใส่ไว้เพื่ออำนวยความสะดวกในการแก้ไขข้อบกพร่องเป็นหลัก

กำลังเชื่อมต่อ = 0
เปิด = 1
ปิด = 2
ฟังก์ชั่นเชื่อมต่อ () {
พยายาม{
ซ็อกเก็ต var;
var โฮสต์ = "ws://localhost:8000/socket/server/startDaemon.php";
var socket = WebSocket ใหม่ (โฮสต์);
message('<p class="event">สถานะซ็อกเก็ต: '+socket.readyState);
socket.onopen = ฟังก์ชั่น () {
message('<p class="event">สถานะซ็อกเก็ต: '+socket.readyState+' (เปิด)');
-
socket.onmessage = ฟังก์ชั่น (ผงชูรส) {
message('<p class="message">ได้รับ: '+msg.data);
-
socket.onclose = ฟังก์ชั่น () {
message('<p class="event">สถานะซ็อกเก็ต: '+socket.readyState+' (ปิด)');
-
} จับ (ข้อยกเว้น){
ข้อความ('<p>ข้อผิดพลาด'+ข้อยกเว้น);
-
-

ฟังก์ชัน message() นั้นง่ายมาก โดยจะเติมข้อความที่เราต้องการแสดงให้กับผู้ใช้ในคอนเทนเนอร์บันทึกการแชท เราสร้างคลาสที่เหมาะสมสำหรับแท็กย่อหน้า (<p>) ในฟังก์ชันเหตุการณ์ซ็อกเก็ต และเรามีเพียงแท็กปิดย่อหน้าในฟังก์ชันข้อความ

ข้อความฟังก์ชั่น (ผงชูรส) {
$('#chatLog').append(msg+'</p>');
-

ผลลัพธ์ปัจจุบัน

หากคุณปฏิบัติตามบทช่วยสอนข้างต้นทีละขั้นตอน เยี่ยมมาก เราได้สร้างเทมเพลต HTML/CSS สร้างและสร้างการเชื่อมต่อ Websocket และอัปเดตความคืบหน้าของผู้ใช้โดยการสร้างการเชื่อมต่อ

ขั้นตอนที่ 7: ส่งข้อมูล

ตอนนี้เรามีปุ่มส่ง แต่เรายังต้องตรวจสอบเหตุการณ์เมื่อผู้ใช้กดแป้นพิมพ์และเรียกใช้ฟังก์ชันส่ง '13' ด้านล่างคือรหัส ASCII ที่สอดคล้องกับปุ่ม Enter

$('#text').keypress(function(event) {
ถ้า (event.keyCode == '13') {
ส่ง();
-
-

นี่คือฟังก์ชัน send():

ฟังก์ชั่นส่ง () {
ข้อความ var = $('#text').val();
ถ้า(ข้อความ==""){
message('<p class="warning">กรุณากรอกข้อความ');
กลับ ;
-
พยายาม{
socket.send (ข้อความ);
message('<p class="event">ส่งแล้ว: '+text)
} จับ (ข้อยกเว้น){
ข้อความ ('<p class = "คำเตือน"> ข้อผิดพลาด:' + ข้อยกเว้น);
-
$('#text').val("");
-

ด้านล่างเราต้องการ:

ซ็อกเก็ต.ส่ง();

โค้ดพิเศษทำหน้าที่ดังต่อไปนี้: ตรวจจับว่าผู้ใช้คลิกกลับมาหลังจากไม่ได้ป้อนอะไรเลย ล้างช่องป้อนข้อมูล และดำเนินการฟังก์ชัน message() หรือไม่

ขั้นตอนที่ 8: ปิดซ็อกเก็ต

การปิดซ็อกเก็ตนั้นค่อนข้างง่าย เพียงเพิ่มตัวฟังเหตุการณ์การคลิกสำหรับปุ่มตัดการเชื่อมต่อ

$('#disconnect').คลิก(ฟังก์ชั่น(){
ซ็อกเก็ต.ปิด();
-

กรอกโค้ด JavaScript ให้สมบูรณ์

$(เอกสาร).ready(function() {
if(!("WebSocket" ในหน้าต่าง)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('<p>โอ้ ไม่นะ คุณต้องมีเบราว์เซอร์ที่รองรับ WebSockets แล้ว <a href=" Google'>http://www.google.com/chrome">Google Chrome</a> ล่ะ</p >').appendTo('#คอนเทนเนอร์');
}อื่น{
//ผู้ใช้มี WebSockets
เชื่อมต่อ();
ฟังก์ชั่นเชื่อมต่อ () {
ซ็อกเก็ต var;
var โฮสต์ = "ws://localhost:8000/socket/server/startDaemon.php";
พยายาม{
var socket = WebSocket ใหม่ (โฮสต์);
message('<p class="event">สถานะซ็อกเก็ต: '+socket.readyState);
socket.onopen = ฟังก์ชั่น () {
message('<p class="event">สถานะซ็อกเก็ต: '+socket.readyState+' (เปิด)');
-
socket.onmessage = ฟังก์ชั่น (ผงชูรส) {
message('<p class="message">ได้รับ: '+msg.data);
-
socket.onclose = ฟังก์ชั่น () {
message('<p class="event">สถานะซ็อกเก็ต: '+socket.readyState+' (ปิด)');
-
} จับ (ข้อยกเว้น){
ข้อความ('<p>ข้อผิดพลาด'+ข้อยกเว้น);
-
ฟังก์ชั่นส่ง () {
ข้อความ var = $('#text').val();

ถ้า(ข้อความ==""){
message('<p class="warning">กรุณากรอกข้อความ');
กลับ ;
-
พยายาม{
socket.send (ข้อความ);
message('<p class="event">ส่งแล้ว: '+ข้อความ)
} จับ (ข้อยกเว้น){
ข้อความ('<p class="warning">');
-
$('#text').val("");
-
ข้อความฟังก์ชั่น (ผงชูรส) {
$('#chatLog').append(msg+'</p>');
-
$('#text').keypress(function(event) {
ถ้า (event.keyCode == '13') {
ส่ง();
-
-
$('#disconnect').คลิก(ฟังก์ชั่น(){
ซ็อกเก็ต.ปิด();
-
}//สิ้นสุดการเชื่อมต่อ
}//จบอย่างอื่น
-

ขั้นตอนที่ 9: เราจำเป็นต้องป้อนบรรทัดคำสั่งเพื่อเรียกใช้เซิร์ฟเวอร์ WebSocket XAMPP ให้ตัวเลือกเชลล์ที่สะดวกยิ่งขึ้น คลิกที่ปุ่ม 'shell' ของแผงควบคุม XAMPP และป้อน:

เส้นทาง php -qtoserver.php

ตอนนี้คุณมีเซิร์ฟเวอร์ WebSocket ทำงานแล้ว!

คุณทำเสร็จแล้ว!

เมื่ออ่านเพจแล้ว จะมีการพยายามสร้างการเชื่อมต่อ WebSocket และผู้ใช้สามารถป้อนข้อมูลและรับข้อมูลจากเซิร์ฟเวอร์ได้ ขอขอบคุณที่อดทนรอในการอ่านบทช่วยสอนนี้ ฉันหวังว่าคุณจะได้เรียนรู้ความรู้ที่เป็นประโยชน์จากบทช่วยสอน HTML5 WebSocket นี้น่าตื่นเต้นจริงๆ คุณสามารถเรียนรู้เกี่ยวกับการพัฒนาล่าสุดของ HTML5 WebSocket ผ่านทาง WebSocket API

บทความที่เกี่ยวข้อง