วิธีแชร์ localhost ของคุณ

ก่อนเริ่ม

เครื่องที่คุณจะแชร์ต้องมีสองอย่างนี้ก่อน:

• ติดตั้ง Node.js เวอร์ชัน 18 ขึ้นไป เช็กด้วยคำสั่ง: node --version
• โปรเจกต์ของคุณรันอยู่แล้วในเครื่อง คือเปิด http://localhost:3000 (หรือพอร์ตที่คุณใช้) ในเบราว์เซอร์บนเครื่องนั้นแล้วเห็นเว็บ

ต้องพิมพ์คำสั่งพวกนี้ที่ไหน?

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

Windows: กดปุ่ม Start พิมพ์ว่า "PowerShell" แล้วเปิดขึ้นมา / macOS: กด Cmd+Space พิมพ์ว่า "Terminal" แล้วเปิด / Linux คุณรู้อยู่แล้ว

ถ้าโปรแกรมเขียนโค้ดของคุณมีเทอร์มินัลในตัว (VS Code กด Ctrl+` หรือเมนู View → Terminal) ใช้อันนั้นสะดวกที่สุด เพราะมันเปิดอยู่ในโฟลเดอร์โปรเจกต์ให้เลย

ขั้นที่ 1 — ล็อกอินจากเครื่องนั้น

ทำอันนี้ก่อนเสมอ การล็อกอินบนเว็บนี้คือการล็อกอินให้เบราว์เซอร์ ไม่ใช่ให้เครื่องคอมของคุณ สองอย่างนี้แยกกัน ทำครั้งเดียวต่อเครื่อง หลังจากนั้นมันจำให้เอง:

npx busymote login

ขั้นที่ 2 — แชร์พอร์ต

เปิดโปรเจกต์ตามปกติ (เช่น npm run dev) แล้วดูว่ามันบอกพอร์ตอะไร ปกติ Next.js จะเป็น 3000 ส่วน Vite เป็น 5173 จากนั้นเปิดเทอร์มินัลอีกหน้าต่าง แล้วชี้ Busymote ไปที่พอร์ตนั้น:

• ถ้าพอร์ตคุณไม่ใช่ 3000 ให้เปลี่ยนเลขตามจริง
• ปล่อยคำสั่งนี้รันค้างไว้ เพราะมันคือตัว tunnel ปิดเมื่อไหร่ลิงก์จะใช้ไม่ได้จนกว่าจะรันใหม่

npx busymote 3000

คุณจะได้อะไร

ลิงก์หน้าตาแบบ https://beam.busymote.xyz จะขึ้นทั้งในเทอร์มินัลและในหน้า dashboard ลิงก์นี้เป็นของพอร์ตนั้นและไม่เปลี่ยน ปิดเครื่อง เปิดใหม่ รันใหม่ ลิงก์เดิมก็ยังใช้ได้ ส่งให้ลูกค้าครั้งเดียวจบ

กดที่ลิงก์ในหน้า dashboard เพื่อเปลี่ยนชื่อได้ จะตั้งเป็น beam, acme-demo หรืออะไรก็ได้ที่ยังไม่มีคนใช้

สั่งงานจากมือถือ

ล็อกอินเว็บนี้จากอุปกรณ์ไหนก็ได้ แล้วคุณจะเห็นทุกอย่างที่กำลังแชร์อยู่ ก๊อปลิงก์ เปิด QR แชร์พอร์ตเพิ่ม หรือสั่งหยุดก็ได้ เครื่องที่บ้านจะทำตามที่คุณกด ตราบใดที่คำสั่ง busymote ยังรันอยู่ที่เครื่องนั้น

เลิกใช้แล้วทำยังไง

กด Ctrl+C ในเทอร์มินัล หรือกดปุ่มหยุดในหน้า dashboard ลิงก์ยังถูกจองไว้ให้คุณ และจะกลับมาใช้ได้ทันทีที่แชร์พอร์ตนั้นอีกครั้ง

ถ้ามีอะไรผิดพลาด

• "Not logged in. Run: busymote login" — คุณข้ามขั้นที่ 1 หรือกำลังอยู่คนละเครื่องกับที่เคยล็อกอินไว้
• "Session expired" — รัน npx busymote login ใหม่ เซสชันไม่ได้อยู่ตลอดไป
• ลิงก์ขึ้นว่า "Nothing is being shared here right now" — คำสั่ง busymote ไม่ได้รันอยู่บนเครื่องคุณ หรือหลุดการเชื่อมต่อไป เปิดใหม่อีกครั้ง
• ลิงก์เปิดได้แต่หน้าเว็บพังหรือว่างเปล่า — Busymote ส่งต่อสิ่งที่เซิร์ฟเวอร์ในเครื่องคุณตอบมาตรง ๆ ลองเปิด http://localhost:3000 บนเครื่องนั้นดูก่อนว่าใช้ได้จริงไหม
• cloudflared not found (บน macOS) — ติดตั้งด้วยคำสั่ง: brew install cloudflared
• อย่างอื่น: ใช้ช่องส่ง feedback ในหน้า dashboard ข้อความจะถึงเราพร้อมบัญชีของคุณ เราจะได้ตามดูให้ได้จริง

เรื่องที่ต้องระวัง

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