Vue Academy · บทเรียน

ไคลเอ็นต์ Socket.io กับ Vue

socket.io-client, io(url), socket.on/emit และสถานะ Vue แบบรีแอกทีฟจากเหตุการณ์ของซ็อกเก็ต

ไคลเอ็นต์ Socket.io กับ Vue เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงใช้ Socket.IO

WebSockets แบบดิบทำงานในระดับต่ำ Socket.IO เป็นไลบรารียอดนิยมที่เพิ่มการเชื่อมต่อใหม่อัตโนมัติ ช่องทางการส่งข้อมูลสำรอง ห้อง และส่วนติดต่อแบบอิงเหตุการณ์ที่ใช้งานง่ายไว้ด้านบน

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

การติดตั้งไคลเอนต์

เพิ่มแพ็กเกจไคลเอนต์ลงในโครงการ Vue ของคุณ แพ็กเกจนี้แยกจากแพ็กเกจเซิร์ฟเวอร์

// terminal
// npm install socket.io-client

import { io } from "socket.io-client"

การเชื่อมต่อด้วย io()

เรียกใช้ io(url) เพื่อสร้างซ็อกเก็ตและเชื่อมต่อ ต่างจาก WebSockets แบบดิบ คุณต้องระบุ URL รูปแบบ http(s):// จากนั้น Socket.IO จะเลือกช่องทางการส่งข้อมูลที่เหมาะสมให้คุณ

import { io } from "socket.io-client"

const socket = io("https://api.example.com", {
  autoConnect: true,
})

การรับฟังด้วย socket.on

Socket.IO สร้างขึ้นบนเหตุการณ์ที่มีชื่อ ใช้ socket.on(name, handler) เพื่อตอบสนองต่อเหตุการณ์จากเซิร์ฟเวอร์ ตัวจัดการจะได้รับข้อมูลที่เซิร์ฟเวอร์ส่งออกมา

socket.on("message", (msg) => {
  console.log("New message:", msg.text, "from", msg.user)
})

เหตุการณ์วงจรการทำงานในตัว

Socket.IO ส่งเหตุการณ์วงจรการทำงานของตัวเอง ซึ่งคุณสามารถรับฟังได้ ได้แก่ connect disconnect และ connect_error

socket.on("connect", () => {
  console.log("Connected, id:", socket.id)
})

socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason)
})

การส่งข้อมูลด้วย socket.emit

เมื่อต้องการส่งข้อมูล ให้เรียกใช้ socket.emit(name, payload) คุณเป็นผู้เลือกชื่อเหตุการณ์ และเซิร์ฟเวอร์จะรับฟังชื่อเดียวกัน ไม่จำเป็นต้องเข้ารหัส JSON ด้วยตนเอง เพราะ Socket.IO จัดรูปแบบข้อมูลให้โดยอัตโนมัติ

function sendMessage(text) {
  socket.emit("send", { text, at: Date.now() })
}

sendMessage("Hello room!")

อาร์เรย์ข้อความที่ตอบสนอง

ใน Vue ให้เก็บข้อความขาเข้าไว้ในอาร์เรย์ ref ที่ตอบสนอง ตัวจัดการ socket.on จะเพิ่มข้อความลงในอาร์เรย์ และเทมเพลตจะเรนเดอร์ใหม่โดยอัตโนมัติ

import { ref } from "vue"

const messages = ref([])

socket.on("message", (msg) => {
  messages.value.push(msg)
})

การเชื่อมต่อใน script setup

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

import { ref, onMounted, onUnmounted } from "vue"
import { io } from "socket.io-client"

const messages = ref([])
const socket = io("https://api.example.com")

onMounted(() => {
  socket.on("message", (m) => messages.value.push(m))
})

function send(text) {
  socket.emit("send", { text })
}

การล้างตัวรับฟัง

ตัวรับฟังที่ลงทะเบียนด้วย socket.on จะยังคงติดอยู่ หากคอมโพเนนต์ถูกติดตั้งใหม่ คุณอาจเพิ่มตัวจัดการซ้ำหลายชุด ให้ลบตัวรับฟังออกด้วย socket.off ขณะยกเลิกการทำงาน

function onMessage(m) { messages.value.push(m) }

onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))

การยกเลิกการเชื่อมต่อใน onUnmounted

เมื่อคอมโพเนนต์ถูกทำลาย ให้ปิดการเชื่อมต่อด้วย socket.disconnect() เพื่อไม่ให้มีซ็อกเก็ตเปิดค้างระหว่างการเปลี่ยนหน้า

import { onUnmounted } from "vue"

onUnmounted(() => {
  socket.disconnect()
})

การยืนยันการรับ

ฟีเจอร์ที่น่าสนใจของ Socket.IO คือ คุณสามารถส่งฟังก์ชันเรียกกลับเป็นอาร์กิวเมนต์สุดท้ายของ emit แล้วให้เซิร์ฟเวอร์เรียกฟังก์ชันนั้นเพื่อยืนยันการรับข้อมูล เหมาะอย่างยิ่งสำหรับประสบการณ์ผู้ใช้แบบ “ส่งข้อความแล้ว”

socket.emit("send", { text: "hi" }, (ack) => {
  console.log("Server confirmed:", ack.status)
})

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจของคุณเกี่ยวกับส่วนติดต่อไคลเอนต์ของ Socket.IO

สรุปทบทวน

ในบทเรียนนี้คุณได้เรียนรู้ว่า:

io(url) จาก socket.io-client เชื่อมต่อโดยใช้ URL รูปแบบ http(s)
socket.on(name, handler) ใช้ตอบสนองต่อเหตุการณ์จากเซิร์ฟเวอร์ที่มีชื่อ
socket.emit(name, payload) ใช้ส่งเหตุการณ์ โดยข้อมูลจะถูกจัดรูปแบบให้อัตโนมัติ
เพิ่มข้อมูลขาเข้าลงในอาร์เรย์ ref ที่ตอบสนองเพื่อให้เทมเพลตแสดงผล
ล้างการเชื่อมต่อด้วย socket.off และ socket.disconnect() ใน onUnmounted

คำถามที่พบบ่อย

บทเรียน “ไคลเอ็นต์ Socket.io กับ Vue” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ไคลเอ็นต์ Socket.io กับ Vue” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ไคลเอ็นต์ Socket.io กับ Vue”

socket.io-client, io(url), socket.on/emit และสถานะ Vue แบบรีแอกทีฟจากเหตุการณ์ของซ็อกเก็ต คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “ไคลเอ็นต์ Socket.io กับ Vue” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

พื้นฐาน WebSocket ในเบราว์เซอร์
ไคลเอ็นต์ Socket.io กับ Vue
การสร้างคอมโพเนนต์แชตแบบเรียลไทม์
คอมโพสิเบิล useWebSocket พร้อมการเชื่อมต่อใหม่

← กลับไปที่ Vue Academy