Socket.io Client with Vue
socket.io-client, io(url), socket.on/emit, reactive Vue state from socket events.
Socket.io Client with Vue is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Socket.IO?
Raw WebSockets are low level. Socket.IO is a popular library that adds automatic reconnection, fallback transports, rooms, and a clean event-based API on top.
It has matching server and client packages; here we focus on the browser client used inside Vue.
Installing the Client
Add the client package to your Vue project. It is separate from the server package.
// terminal
// npm install socket.io-client
import { io } from "socket.io-client"Connecting with io()
Call io(url) to create a socket and connect. Unlike raw WebSockets you give an http(s):// URL — Socket.IO negotiates the transport for you.
import { io } from "socket.io-client"
const socket = io("https://api.example.com", {
autoConnect: true,
})Listening with socket.on
Socket.IO is built around named events. Use socket.on(name, handler) to react to a server event. The handler receives whatever payload the server emitted.
socket.on("message", (msg) => {
console.log("New message:", msg.text, "from", msg.user)
})Built-in Lifecycle Events
Socket.IO emits its own lifecycle events you can listen to: connect, disconnect, and connect_error.
socket.on("connect", () => {
console.log("Connected, id:", socket.id)
})
socket.on("disconnect", (reason) => {
console.log("Disconnected:", reason)
})Sending with socket.emit
To send, call socket.emit(name, payload). You pick the event name; the server listens for the same name. No manual JSON encoding is needed — Socket.IO serializes for you.
function sendMessage(text) {
socket.emit("send", { text, at: Date.now() })
}
sendMessage("Hello room!")A Reactive Messages Array
In Vue, hold incoming messages in a reactive ref array. Your socket.on handler pushes into it, and the template re-renders automatically.
import { ref } from "vue"
const messages = ref([])
socket.on("message", (msg) => {
messages.value.push(msg)
})Wiring It in script setup
A typical component connects in onMounted, registers listeners, and exposes a send function to the template.
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 })
}Cleaning Up Listeners
Listeners registered with socket.on stay attached. If the component remounts you can stack duplicate handlers. Remove them with socket.off when tearing down.
function onMessage(m) { messages.value.push(m) }
onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))Disconnecting in onUnmounted
When the component is destroyed, close the connection with socket.disconnect() so you do not leak an open socket across navigations.
import { onUnmounted } from "vue"
onUnmounted(() => {
socket.disconnect()
})Acknowledgements
A nice Socket.IO feature: pass a callback as the last emit argument and the server can call it to confirm receipt. Great for "message delivered" UX.
socket.emit("send", { text: "hi" }, (ack) => {
console.log("Server confirmed:", ack.status)
})Quick Check
Check your understanding of the Socket.IO client API.
Recap
In this lesson you learned:
io(url)fromsocket.io-clientconnects using an http(s) URL.socket.on(name, handler)reacts to named server events.socket.emit(name, payload)sends events; payloads are auto-serialized.- Push incoming data into a reactive
refarray for the template. - Clean up with
socket.offandsocket.disconnect()inonUnmounted.
Frequently asked questions
Is the “Socket.io Client with Vue” lesson free?
Yes — the full text of “Socket.io Client with Vue” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Socket.io Client with Vue”?
socket.io-client, io(url), socket.on/emit, reactive Vue state from socket events. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Socket.io Client with Vue” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.