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

HTML5 WebSockets การสอนการใช้งานขั้นพื้นฐาน

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-06 13:43:41

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

WebSockets คืออะไร?

WebSockets เป็นเทคโนโลยีที่ดำเนินการสื่อสารแบบสองทิศทางบนอินเทอร์เฟซ (TCP) และประเภทเทคโนโลยีผลักดัน ในเวลาเดียวกัน WebSockets จะยังคงอยู่บนพื้นฐานของมาตรฐาน W3C

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

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

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

ขั้นตอนที่ 1: รับ WebSocket Server

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

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

jwebsocket (Java)

เว็บซ็อกเก็ต-รูบี้ (ทับทิม)

ซ็อกเก็ต io-node (node.js)

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

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

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

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

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

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

นี่คือไฟล์ client.php ของฉัน:

<! doctype html>
<html>
<head>
<สคริปต์ src =
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<title> ไคลเอนต์ WebSockets </title>
</head>
<body>
<div id = "wrapper">
<div id = "container">
<H1> ไคลเอนต์ WebSockets </h1>
<div id = "chatlog">
</div> <!-#chatlog->
<p id = "ตัวอย่าง"> ลอง 'สวัสดี', 'ชื่อ', 'อายุ', 'วันนี้' </p>
<อินพุต id = "text" type = "text" />>
<button id = "disconnect"> disconnect </ button>
</div> <!-#Container->
</div>
</body>
</html>

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

ขั้นตอนที่ 4: เพิ่ม CSS บางส่วน

ไม่มีรหัสแฟนซีเพียงจัดการกับสไตล์ของแท็ก

ร่างกาย {
Font-Family: Arial, Helvetica, Sans-Serif;
-
#คอนเทนเนอร์{
เส้นขอบ: 5px Solid Grey;
ความกว้าง: 800px;
มาร์จิ้น: 0 อัตโนมัติ;
Padding: 10px;
-
#chatlog {
ช่องว่าง: 5px;
ชายแดน: 1px Solid Black;
-
#chatlog p {
มาร์จิ้น: 0;
-
.เหตุการณ์ {
สี:#999;
-
.คำเตือน{
Font-Weight: ตัวหนา;
สี: #CCC;
-

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

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

กิจกรรม WebSocket:

เราจะใช้สามกิจกรรม WebSocket:

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

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

onClose: เมื่ออินเทอร์เฟซถูกปิด

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

ก่อนอื่นสร้างวัตถุ WebSocket

var socket = ใหม่ websocket (& ldquo; ws: // localhost: 8000/ซ็อกเก็ต/เซิร์ฟเวอร์/startdaemon.php & rdquo;);

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

socket.onopen = function () {
การแจ้งเตือน ("ซ็อกเก็ตเปิดแล้ว!");
-

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

socket.onMessage = function (msg) {
Alert (MSG);
-

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

ขั้นตอนที่ 6: JavaScript

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

$ (เอกสาร) .ready (function () {
if (! ("WebSocket" ในหน้าต่าง)) {
$ (' #chatlog, อินพุต, ปุ่ม, #Examples'). fadeout ("เร็ว");
$ ('<p> โอ้ไม่คุณต้องใช้เบราว์เซอร์ที่รองรับ websockets แล้ว <a href = "Google'> http://www.google.com/chrome"> Google Chrome </a>? </p > '). ภาคผนวก ('#container ');
}อื่น{
// ผู้ใช้มี websockets
เชื่อมต่อ();
ฟังก์ชั่นเชื่อมต่อ () {
// รหัสฟังก์ชันการเชื่อมต่ออยู่ด้านล่าง
-
-

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

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

ซ็อกเก็ต var;
var host = "ws: // localhost: 8000/ซ็อกเก็ต/เซิร์ฟเวอร์/startdaemon.php";

คุณอาจพบว่าทำไมไม่มี HTTP ใน URL? ใช่นี่คือ URL WebSocket ที่ใช้โปรโตคอลที่แตกต่างกัน

ลองทำฟังก์ชั่น Connect () ให้เสร็จสมบูรณ์ด้านล่าง เราสร้าง WebSocket และส่งข้อมูลไปยังฟังก์ชั่นข้อความ () และเราจะอธิบายในภายหลัง เราสร้างฟังก์ชั่น Onopen, OnMessage และ OnClose ของเรา ควรสังเกตว่าเราให้สถานะพอร์ตแก่ผู้ใช้ซึ่งไม่จำเป็น แต่เราวางไว้เป็นหลักเพื่อความสะดวกในการดีบัก

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

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

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

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

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

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

ตอนนี้เรามีปุ่มส่ง แต่เรายังคงต้องฟังผู้ใช้ที่กดกิจกรรมแป้นพิมพ์และเรียกใช้ฟังก์ชั่นการส่ง

$ ('#text'). keypress (ฟังก์ชั่น (เหตุการณ์) {
if (event.keycode == '13') {
ส่ง();
-
-

นี่คือฟังก์ชั่นการส่ง ():

ฟังก์ชั่นส่ง () {
var text = $ ('#text'). val ();
if (text == "") {
ข้อความ ('<p class = "คำเตือน"> โปรดป้อนข้อความ');
กลับ ;
-
พยายาม {
Socket.Send (ข้อความ);
ข้อความ ('<p class = "เหตุการณ์"> ส่ง:'+ข้อความ)
} catch (ข้อยกเว้น) {
ข้อความ ('<p class = "คำเตือน"> ข้อผิดพลาด:' + ข้อยกเว้น);
-
$ ('#text'). val ("");
-

เราต้องการที่นี่:

Socket.Send ();

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

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

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

$ ('#disconnect') คลิก (function () {
Socket.close ();
-


กรอกรหัส JavaScript

$ (เอกสาร) .ready (function () {
if (! ("WebSocket" ในหน้าต่าง)) {
$ (' #chatlog, อินพุต, ปุ่ม, #Examples'). fadeout ("เร็ว");
$ ('<p> โอ้ไม่คุณต้องใช้เบราว์เซอร์ที่รองรับ websockets แล้ว <a href = "Google'> http://www.google.com/chrome"> Google Chrome </a>? </p > '). ภาคผนวก ('#container ');
}อื่น{
// ผู้ใช้มี websockets
เชื่อมต่อ();
ฟังก์ชั่นเชื่อมต่อ () {
ซ็อกเก็ต var;
var host = "ws: // localhost: 8000/ซ็อกเก็ต/เซิร์ฟเวอร์/startdaemon.php";
พยายาม {
var socket = ใหม่ websocket (โฮสต์);
ข้อความ ('<p class = "event"> สถานะซ็อกเก็ต:'+socket.readyState);
socket.onopen = function () {
ข้อความ ('<p class = "event"> สถานะซ็อกเก็ต:'+socket.readyState+'(เปิด)');
-
socket.onMessage = function (msg) {
ข้อความ ('<p class = "ข้อความ"> ได้รับ:'+msg.data);
-
socket.onclose = function () {
ข้อความ ('<p class = "เหตุการณ์"> สถานะซ็อกเก็ต:'+socket.readyState+'(ปิด)');
-
} catch (ข้อยกเว้น) {
ข้อความ ('<p> ข้อผิดพลาด'+ข้อยกเว้น);
-
ฟังก์ชั่นส่ง () {
var text = $ ('#text'). val ();

if (text == "") {
ข้อความ ('<p class = "คำเตือน"> โปรดป้อนข้อความ');
กลับ ;
-
พยายาม {
Socket.Send (ข้อความ);
ข้อความ ('<p class = "เหตุการณ์"> ส่ง:'+ข้อความ)
} catch (ข้อยกเว้น) {
ข้อความ ('<p class = "คำเตือน">');
-
$ ('#text'). val ("");
-
ข้อความฟังก์ชั่น (msg) {
$ ('#chatlog') ผนวก (msg+'</p>');
-
$ ('#text'). keypress (ฟังก์ชั่น (เหตุการณ์) {
if (event.keycode == '13') {
ส่ง();
-
-
$ ('#disconnect') คลิก (function () {
Socket.close ();
-
} // สิ้นสุดการเชื่อมต่อ
} // สิ้นสุดอื่น
-

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

PHP -Q PATH to Server.php

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

ภารกิจเสร็จสิ้นแล้ว!

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

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