ข้ามไปเนื้อหาหลัก

เจาะลึกเบื้องหลังเครื่องมือแชร์ Terminal ในเบราว์เซอร์จาก Ttyd, TermPair และ sshx

พาไปสำรวจกลไกเบื้องหลังเครื่องมือแชร์หน้าจอคอมมานด์ไลน์ผ่านเว็บอย่าง ttyd, TermPair และ sshx ที่แก้ปัญหาเดียวกันด้วยสถาปัตยกรรมต่างกันสุดขั้ว

เรียบเรียงโดย AI
Inewgen
27 Jul 2026ที่มา: Dev.to4 นาทีอ่าน (0 ครั้ง)อัปเดตล่าสุด 29 Aug 2026
แชร์
เจาะลึกเบื้องหลังเครื่องมือแชร์ Terminal ในเบราว์เซอร์จาก Ttyd, TermPair และ sshx

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

ขนาดตัวอักษร
  • การแชร์หน้าจอ 4K ผ่านวิดีโอคอลทำให้ตัวหนังสืออ่านยาก เครื่องมือแชร์ Terminal จึงเป็นทางออกที่ดีกว่า
  • การทำงานของ PTY (Pseudoterminal) ทำหน้าที่จำลองเทอร์มินัลยุค 1965 ระหว่างเคอร์เนลและเชลล์
  • ttyd เลือกใช้ C และ libwebsockets รวมโค้ดเว็บทั้งหมดไว้ในไบนารีเดียวแบบเรียบง่าย
  • TermPair และ sshx แก้ปัญหาความปลอดภัยด้วยการเข้ารหัสแบบ End-to-End ผ่าน URL Hash

เวลาที่คุณกำลังดีบักปัญหาอะไรสักอย่างบนเครื่องเซิร์ฟเวอร์ แล้วเพื่อนร่วมงานดันบอกว่า "ขอดูหน้าจอหน่อยสิ" สิ่งที่คุณมักจะต้องทำคือการเปิดวิดีโอคอลแชร์หน้าจอ 4K เพื่อให้เพื่อนมานั่งเพ่งตัวอักษรโมโนสเปซขนาด 11 พิกเซลที่ถูกบีบอัดจนเละเทะไม่เป็นท่า แต่จริงๆ แล้วมันมีวิธีที่ดีกว่านั้นและมีใช้งานมาหลายปีแล้ว

เครื่องมืออย่าง ttyd, TermPair และ sshx ช่วยยกหน้าจอเทอร์มินัลจริงของคุณไปไว้ในเบราว์เซอร์ของคนอื่นได้โดยตรง เป็นตัวหนังสือจริงๆ คลุมดำก๊อปปี้ได้จริงๆ ผู้พัฒนาเจ้าของโปรเจกต์ git-lrc จึงเกิดความสงสัยว่าเครื่องมือเหล่านี้ทำได้อย่างไร เลยเข้าไปโคลนซอร์สโค้ดทั้งสามตัวมานั่งอ่านจนพบว่าพวกมันแก้ปัญหาเดียวกันด้วยวิธีที่แตกต่างกันอย่างสิ้นเชิงและน่าสนใจมากๆ

developer writing code linux terminal

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

ก่อนที่เรื่องฝั่งเว็บจะเริ่มเข้าใจได้ คุณต้องทำความรู้จักกับแนวคิดหนึ่งก่อน นั่นคือ Pseudoterminal หรือ PTY เวลาที่คุณรัน bash ในแอปพลิเคชันเทอร์มินัล ตัว bash ไม่ได้คุยกับคีย์บอร์ดของคุณโดยตรง แต่เคอร์เนลจะสร้างคู่ไฟล์ดิสกริปเตอร์ที่เชื่อมโยงกันขึ้นมาเพื่อจำลองเทอร์มินัลจริงจากปี 1965 โดยฝั่งหนึ่งเรียกว่า master ส่วนอีกฝั่งเรียกว่า slave

เทอร์มินัลเอมูเลเตอร์ของคุณจะถือฝั่ง master ไว้ ส่วน bash ถือฝั่ง slave โดยที่ bash ไม่มีทางรู้เลยว่ามันกำลังถูกหลอกอยู่ ทุกอย่างที่คุณพิมพ์ลงในฝั่ง master จะปรากฏเป็นอินพุตคีย์บอร์ดของ bash และทุกสิ่งที่ bash พิมพ์ออกมาก็จะวิ่งย้อนกลับผ่านฝั่ง master ออกมาเช่นกัน เครื่องมือแชร์เทอร์มินัลก็คือโปรแกรมที่เข้ามาถือฝั่ง master เอาไว้แล้วส่งต่อไบต์ข้อมูลเหล่านั้นไปยังที่อื่นที่น่าสนใจกว่าหน้าต่างบนแล็ปท็อปของคุณ

การเข้าใจกลไก PTY (Pseudoterminal) ช่วยให้เราเห็นภาพว่าทำไมเครื่องมืออย่าง ttyd หรือ sshx ถึงไม่ต้องไปยุ่งกับตัวโปรแกรมเชลล์โดยตรง แต่วางตัวเองอยู่ตรงกลางระหว่างเคอร์เนลกับโปรแกรมที่รันอยู่ ทำให้สามารถดักจับและส่งต่อข้อมูลอินพุต/เอาต์พุตได้อย่างแนบเนียน พร้อมทั้งรองรับการปรับขนาดหน้าจอผ่านคำสั่ง ioctl และ TIOCSWINSZ เพื่อให้โปรแกรมอย่าง vim แสดงผลได้อย่างถูกต้องไม่เพี้ยนเมื่อหน้าจอเบราว์เซอร์เปลี่ยนขนาด

ไม่อยากพลาดข่าวใหม่?

สมัครรับสรุปข่าวสารใหม่ทางอีเมล ไม่บ่อยจนรำคาญ

โฆษณา

สำหรับ ttyd นั้นเรียกได้ว่าเป็นโปรแกรมสายมินิมอลของแท้ ทำงานด้วยกระบวนการ C ตัวเดียวที่สร้างขึ้นบน libwebsockets และ libuv โดยทำหน้าที่เป็นทั้งเว็บเซิร์ฟเวอร์และโฮสต์เทอร์มินัลในตัว ไม่มีรีเลย์ ไม่ต้องมีไคลเอนต์แยก และไม่มีการแลกเปลี่ยนคีย์ความปลอดภัย โปรโตคอลของมันเรียบง่ายมากคือใช้ '0' บวกกับคีย์บอร์ดที่คุณพิมพ์ส่งขึ้นไป และ '0' บวกกับเอาต์พุตเทอร์มินัลส่งลงมา

นอกจากนี้ยังมีระบบ PAUSE และ RESUME เพื่อป้องกันกรณีที่ไฟล์ขนาดใหญ่ถูกพิมพ์รัวออกมาจนเร็วกว่าที่เบราว์เซอร์จะแสดงผลทัน ฝั่งแอปพลิเคชัน Preact และ xterm.js จะถูกมัดรวม บีบอัด และฝังเข้าไปในไบนารี C เป็นอาเรย์ของไบต์ ทำให้ได้ไฟล์รัน executable เดี่ยวๆ โดยไม่ต้องมีโฟลเดอร์ไฟล์สถิตให้วุ่นวาย แต่ข้อแลกเปลี่ยนคือหากแก้ไฟล์ .tsx ต้องรันคำสั่งคอมไพล์ใหม่ทุกครั้ง

ในส่วนของความปลอดภัย ttyd จะถูกตั้งค่าเป็นโหมดอ่านอย่างเดียวเป็นค่าเริ่มต้น คุณต้องใส่พารามิเตอร์ -W เพิ่มถ้าต้องการให้ผู้ชมพิมพ์ข้อความโต้ตอบได้ โมเดลความปลอดภัยของ ttyd คือคุณต้องเชื่อใจเซิร์ฟเวอร์เพราะเซิร์ฟเวอร์นั้นอยู่บนเครื่องของคุณเอง ข้อมูลที่วิ่งผ่านสายจะเป็นแบบ plaintext ยกเว้นว่าคุณจะเปิดใช้งาน TLS

ประเด็นต่อมาคือทันทีที่คุณต้องการแชร์เทอร์มินัลกับใครสักคนที่อยู่คนละมุมโลก คุณจำเป็นต้องมีตัวกลางที่มี IP สาธารณะ ซึ่งตัวกลางนั้นจะสามารถอ่านทุกสิ่งที่คุณพิมพ์ได้ TermPair และ sshx จึงเลือกใช้แนวทางที่ต่างออกไปโดยทำให้เซิร์ฟเวอร์ทำหน้าที่เป็น blind relay คือส่งต่อเฉพาะข้อมูลที่เข้ารหัสลับ (ciphertext) ระหว่างโฮสต์และเบราว์เซอร์ โดยที่ตัวเซิร์ฟเวอร์เองไม่มีทางถอดรหัสได้เลย

เมื่อไคลเอนต์ทำการเข้ารหัสและเบราว์เซอร์ต้องถอดรหัส ทั้งคู่จึงต้องมีคีย์เดียวกัน แต่เซิร์ฟเวอร์ต้องไม่มีคีย์นั้น ในขณะที่เบราว์เซอร์ถูกโหลดมาจากเซิร์ฟเวอร์ แล้วเราจะส่งความลับไปยังหน้าเว็บที่ส่งมาจากเซิร์ฟเวอร์ได้อย่างไร? คำตอบคือการใช้ URL Hash เช่น https://sharemyclau.de/s/abc123#key-goes-right-here โดยทุกอย่างที่อยู่หลังเครื่องหมาย # จะไม่ถูกส่งไปกับคำขอ HTTP แต่จะค้างอยู่ในแถบที่อยู่ของเบราว์เซอร์เท่านั้น

ที่มา: Dev.to

ความคิดเห็น

แสดงความคิดเห็น
0/2000

พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้