การเปิดการเชื่อมต่อ WebSocket
เชื่อมต่อกับเซิร์ฟเวอร์ WebSocket
การเปิดการเชื่อมต่อ WebSocket เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
WebSockets คืออะไร
WebSockets ให้การเชื่อมต่อแบบต่อเนื่องและสื่อสารได้สองทิศทางระหว่างเบราว์เซอร์กับเซิร์ฟเวอร์ผ่านการเชื่อมต่อ TCP เดียว แตกต่างจากคำขอและการตอบกลับแบบ HTTP ตรงที่ทั้งสองฝ่ายสามารถส่งข้อความได้ทุกเมื่อ จึงเหมาะอย่างยิ่งสำหรับแชต ฟีดแบบเรียลไทม์ และเกม
รูปแบบ ws และ wss
URL ของ WebSocket ใช้ ws:// (ไม่เข้ารหัส) หรือ wss:// (เข้ารหัสด้วย TLS) ในระบบจริงควรเลือกใช้ wss:// เสมอ เช่นเดียวกับ https
const url = "wss://example.com/socket";การสร้างการเชื่อมต่อ
สร้างซ็อกเก็ตด้วย new WebSocket(url) กระบวนการจับมือจะเริ่มทันที แต่การเชื่อมต่อจะยังไม่พร้อมจนกว่าจะเปิดสำเร็จ
const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);เหตุการณ์ onopen
onopen จะทำงานเมื่อกระบวนการจับมือเสร็จสมบูรณ์ หลังจากนั้นเท่านั้นจึงจะส่งข้อมูลได้อย่างปลอดภัย
socket.onopen = (event) => {
console.log("Connection established");
socket.send("Hello server");
};ทางเลือก addEventListener
คุณสามารถใช้ addEventListener แทนคุณสมบัติ on* เพื่อผูกตัวจัดการหลายรายการได้
socket.addEventListener("open", () => {
console.log("open via listener");
});readyState ของการเชื่อมต่อ
readyState รายงานวงจรชีวิตดังนี้: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3)
if (socket.readyState === WebSocket.OPEN) {
socket.send("ready!");
}โพรโทคอลย่อย
อาร์กิวเมนต์ตัวที่สองใช้เจรจาโพรโทคอลย่อย เซิร์ฟเวอร์จะเลือกโพรโทคอลหนึ่งรายการ และคุณสามารถอ่านค่า socket.protocol ได้หลังจากเปิดการเชื่อมต่อ
const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);ต้นทางเดียวกันและเนื้อหาผสม
หน้าที่โหลดผ่าน https จะเปิดได้เฉพาะการเชื่อมต่อ wss:// เท่านั้น การเปิด ws:// จะถูกบล็อกเนื่องจากเป็นเนื้อหาผสม ดังนั้นควรวางแผน URL ให้เหมาะสม
ประเภทข้อมูลไบนารี
ตั้งค่า binaryType เป็น "blob" (ค่าเริ่มต้น) หรือ "arraybuffer" เพื่อควบคุมวิธีรับเฟรมไบนารี
socket.binaryType = "arraybuffer";ไคลเอ็นต์พื้นฐาน
เมื่อนำทุกอย่างมารวมกัน: เปิดการเชื่อมต่อ บันทึกสถานะ และล้างทรัพยากร
const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");การหมดเวลาของการเชื่อมต่อ
WebSockets ไม่มีการหมดเวลาสำหรับการเชื่อมต่อในตัว ให้ใช้ตัวจับเวลาที่ปิดซ็อกเก็ตหาก onopen ยังไม่ทำงานภายในเวลาที่กำหนด
const socket = new WebSocket(url);
const timer = setTimeout(() => {
if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบพื้นฐานการเชื่อมต่อ
ทบทวน: การเปิดการเชื่อมต่อ
คุณเรียนรู้รูปแบบ ws/wss สร้างซ็อกเก็ตด้วย new WebSocket จัดการ onopen ตรวจสอบ readyState เจรจาโพรโทคอลย่อย และเพิ่มการหมดเวลาสำหรับการเชื่อมต่อแล้ว ต่อไป: การส่งและรับข้อความ
คำถามที่พบบ่อย
บทเรียน “การเปิดการเชื่อมต่อ WebSocket” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเปิดการเชื่อมต่อ WebSocket” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเปิดการเชื่อมต่อ WebSocket”
เชื่อมต่อกับเซิร์ฟเวอร์ WebSocket คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การเปิดการเชื่อมต่อ WebSocket” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเปิดการเชื่อมต่อ WebSocket
- การส่งและรับข้อความ
- วงจรชีวิตและข้อผิดพลาดของการเชื่อมต่อ
- กลยุทธ์การเชื่อมต่อใหม่