Vue Academy · Leçon

Client Socket.io avec Vue

socket.io-client, io(url), socket.on/emit et état Vue réactif issu des événements de socket

Client Socket.io avec Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Pourquoi Socket.IO ?

Les WebSockets bruts sont de bas niveau. Socket.IO est une bibliothèque populaire qui ajoute la reconnexion automatique, des transports de secours, des salons et une API claire fondée sur les événements.

Elle propose des paquets correspondants pour le serveur et le client ; nous nous concentrons ici sur le client du navigateur utilisé dans Vue.

Installer le client

Ajoutez le paquet client à votre projet Vue. Il est distinct du paquet serveur.

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

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

Se connecter avec io()

Appelez io(url) pour créer un socket et vous connecter. Contrairement aux WebSockets bruts, vous fournissez une URL http(s):// ; Socket.IO négocie le transport à votre place.

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

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

Écouter avec socket.on

Socket.IO est fondé sur des événements nommés. Utilisez socket.on(name, handler) pour réagir à un événement du serveur. Le gestionnaire reçoit la charge utile émise par le serveur.

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

Événements de cycle de vie intégrés

Socket.IO émet ses propres événements de cycle de vie, auxquels vous pouvez vous abonner : connect, disconnect et connect_error.

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

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

Envoyer avec socket.emit

Pour envoyer des données, appelez socket.emit(name, payload). Vous choisissez le nom de l’événement ; le serveur écoute ce même nom. Aucun encodage JSON manuel n’est nécessaire : Socket.IO s’en charge automatiquement.

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

sendMessage("Hello room!")

Un tableau réactif de messages

Dans Vue, conservez les messages entrants dans un tableau réactif ref. Votre gestionnaire socket.on y ajoute les messages, et le modèle est automatiquement réaffiché.

import { ref } from "vue"

const messages = ref([])

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

Configurer le composant avec script setup

Un composant courant se connecte dans onMounted, enregistre les écouteurs et expose une fonction d’envoi au modèle.

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 })
}

Nettoyer les écouteurs

Les écouteurs enregistrés avec socket.on restent attachés. Si le composant est monté de nouveau, vous risquez d’empiler des gestionnaires en double. Supprimez-les avec socket.off lors de la destruction du composant.

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

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

Se déconnecter dans onUnmounted

Lorsque le composant est détruit, fermez la connexion avec socket.disconnect() afin de ne pas laisser un socket ouvert lors des changements de page.

import { onUnmounted } from "vue"

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

Accusés de réception

Une fonctionnalité pratique de Socket.IO : transmettez une fonction de rappel comme dernier argument de emit, et le serveur peut l’appeler pour confirmer la réception. C’est idéal pour une interface indiquant qu’un message a été livré.

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

Vérification rapide

Vérifiez votre compréhension de l’API cliente Socket.IO.

Récapitulatif

Dans cette leçon, vous avez appris :

io(url) de socket.io-client se connecte avec une URL http(s).
socket.on(name, handler) réagit aux événements nommés du serveur.
socket.emit(name, payload) envoie des événements ; les charges utiles sont automatiquement sérialisées.
Ajoutez les données entrantes à un tableau réactif ref pour le modèle.
Nettoyez les ressources avec socket.off et socket.disconnect() dans onUnmounted.

Questions Fréquemment Posées

La leçon « Client Socket.io avec Vue » est-elle gratuite ?

Oui — le texte complet de « Client Socket.io avec Vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Client Socket.io avec Vue » ?

socket.io-client, io(url), socket.on/emit et état Vue réactif issu des événements de socket Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Client Socket.io avec Vue » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Bases de WebSocket dans le navigateur
Client Socket.io avec Vue
Créer un composant de discussion en temps réel
Composable useWebSocket avec reconnexion

← Retour à Vue Academy