Vue Academy · Lección

Fundamentos de WebSocket en el navegador

new WebSocket(url), onopen/onmessage/onerror/onclose, send() y readyState

Fundamentos de WebSocket en el navegador es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Tiempo real en el navegador

HTTP funciona mediante solicitud y respuesta: el cliente pregunta, el servidor responde y la conexión se cierra. Para chats, paneles en directo o juegos multijugador, necesita que el servidor envíe datos sin que se los soliciten.

El protocolo WebSocket proporciona una única conexión bidireccional de larga duración entre el navegador y el servidor.

Abrir una conexión

El navegador incluye un constructor global WebSocket. Pase una URL que use el esquema ws:// (normal) o wss:// (TLS).

Al crear el objeto, el proceso de negociación de la conexión comienza de inmediato.

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

El controlador onopen

La conexión no está lista en el instante en que la construye. El evento onopen se activa cuando termina la negociación y el socket está listo para transportar datos.

Envíe el primer mensaje dentro de onopen, nunca antes.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

Recibir mensajes

Los datos entrantes llegan mediante onmessage. La carga útil se encuentra en event.data y, de forma predeterminada, es una cadena.

La mayoría de las aplicaciones envían JSON, por lo que debe analizarlo para convertirlo de nuevo en un objeto.

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

Enviar mensajes

Use ws.send() para transmitir datos. Los WebSockets transportan cadenas sin formato o datos binarios, así que codifique primero los objetos con JSON.stringify.

Ambos lados acuerdan una estructura; en este caso, un type y un payload.

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

Un ciclo completo de ida y vuelta

Al combinar la apertura, el envío y la recepción obtiene un cliente de eco completo. Abra el socket, envíe el mensaje al abrirse y registre todo lo que vuelva.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

Cerrar la conexión

El evento onclose se activa cuando termina la conexión, ya sea porque llamó a ws.close() o porque se interrumpió la red. El evento contiene un code numérico y una cadena reason.

El código 1000 indica un cierre normal.

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

Gestionar errores

El evento onerror se activa cuando se producen fallos de transporte. Por motivos de seguridad, el evento de error en sí proporciona deliberadamente pocos detalles; considérelo una señal de que algo salió mal y de que probablemente la conexión se cerrará.

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

La propiedad readyState

ws.readyState es un número que indica en qué punto del ciclo de vida se encuentra el socket. Compruébelo siempre antes de enviar datos para no provocar una excepción al usar un socket que aún no está abierto.

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

Constantes con nombre de readyState

En lugar de usar números mágicos, utilice las constantes de la clase WebSocket. Son mucho más claras que 0, 1 o 3.

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

Integrarlo todo en Vue

Dentro de un componente de Vue, normalmente crea el socket en onMounted y lo cierra en onUnmounted. Los controladores actualizan refs reactivas que la plantilla representa.

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

Comprobación rápida

Compruebe su comprensión de los valores de readyState de WebSocket.

Resumen

En esta lección ha aprendido lo siguiente:

new WebSocket(url) inicia una conexión bidireccional mediante ws:// o wss://.
onopen se activa cuando el socket está listo; envíe datos solo después de ese momento.
onmessage entrega los datos en event.data; analice el JSON para obtener un objeto.
ws.send(JSON.stringify(msg)) transmite datos.
onclose y onerror gestionan el cierre y los fallos.
readyState es 0 CONNECTING, 1 OPEN, 2 CLOSING y 3 CLOSED.

Preguntas frecuentes

¿La lección «Fundamentos de WebSocket en el navegador» es gratis?

Sí — el texto completo de «Fundamentos de WebSocket en el navegador» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Fundamentos de WebSocket en el navegador»?

new WebSocket(url), onopen/onmessage/onerror/onclose, send() y readyState Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Fundamentos de WebSocket en el navegador»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Fundamentos de WebSocket en el navegador
Cliente de Socket.io con Vue
Creación de un componente de chat en tiempo real
Composable useWebSocket con reconexión

← Volver a Vue Academy