1. Conocimientos requeridos

Puedes ver el listado de mis sitios educativos en https://gilpgcl.github.io.
Este curso es continuación de https://gilpgiti.github.io, https://gilpgijs.github.io y https://gilpgihc.github.io. Mucho contenido que originalmente aparecía en este sitio, se ha desplazado a estos sitios.

2. Instrucciones de navegación

Los siguientes controles te permitirán navegar por todo el contenido del sitio.

Oculta el menú de navegación.

Muestra el menú de navegación.

skip_previous

arrow_back (Tecla flecha a la izquierda)

Swipe hacia la derecha

Regresa a la página anterior.

skip_next

arrow_forward (Tecla flecha a la derecha)

Swipe hacia la izquierda

Avanza a la página siguiente.

3. Software a instalar

Microsoft Edge Chromium

Video de} instalación.
Ya viene instalado en las computadoras más nuevas, pero si la tuya no lo tiene, lo puedes descargar de https://www.microsoft.com/es-es/edge.

Mozilla Firefox

Video de Instalación.
Lo puedes descargar de https://www.mozilla.org.

Google Chrome

Video de Instalación.
Lo puedes descargar de https://google.com/chrome.

PHP y Xdebug

Para Linux y apple

Se puede instalar desde las tiendas de software.

Para Windows

Video de Instalación..
Descarga la versión Thread Safe que corresponda a la arquitectura de tu computadora (x64 o x86, la maypría son x64) desde https://windows.php.net/download#php-8.4.
Crea una carpeta con nombre php en el disco C: y descompacta ahí el php
Añade la ruta C:\php a la variable de ambiente PATH.
1. Haz clic en el logo de Windows.
2. Haz clic en Configuración.
3. Haz clic en Sistema.
4. Haz clic en Acerca de.
5. Haz clic en Configuración avanzada del sistema. Te pide que autorices. Autoriza.
6. Haz clic en Variables de entorno.
7. En Variables del sistema selecciona Path y haz clic en Editar...
8. Haz clic en Nuevo. Se abre una entrada y en ella teclea C:\php. Haz clic en Aceptar.
9. Haz clic en Aceptar para cerrar las variables de entorno.
10. Haz clic en Aceptar para cerrar las propiedades del sistema.
Sigue las instrucciones de https://xdebug.org/wizard:
- En el botón de Windows haz clic derecho y selecciona Terminal.
- En la terminal teclea el comando
  php -i output
- Copia toda la salida, que es bastante larga, y pégala en la página de Xdebug y cliquea Analyse my phpinfo() output y sigue las instrucciones.

Crea el archivo C:\php\php.ini con el siguiente contenido

extension = php_mbstring.dll
  extension=php_pdo_sqlite.dll
  extension=php_pdo_mysql.dll
  extension=php_openssl.dll
  extension=php_sockets.dll
  extension=php_fileinfo.dll
  extension=php_curl.dll
  display_errors = Off
  zend_extension = xdebug
  xdebug.mode = debug
  xdebug.start_with_request = yes

Git

Video de Instalación.
Lo puedes descargar de https://git-scm.com/.

Visual Studio Code

Video de Instalación..

Usa la URL https://code.visualstudio.com/.

Instala las extensiones:

es6-string-html de Tobermory
anuragsingk-PHP Server de Anuragsingk
PHP Debug de Xdebug
PHP Extension Pack de Xdebug
PHP Intelephsense de Ben Mewburn
PHP IntelliSense de Damjan Cvetko
Live Server de Ritwick Dey
SQLite Viewer de Florian Klampfer
Zip Tools de Adam Raichu
SFTP de Natizyskunk

Haz clic en el engrane de abajo a la izquierda y seleciona Settings. En Extensions > PHP Server configuration configura lo siguiente

Phpserver Ip: localhost
Phpserver port: 80

4. Aplicaciones Orientadas a Servicios

Versión para imprimir.

A. Introduccion

En esta lección se presentan los conceptos de:
- aplicaciones web orientadas a servicios y
- mashups.

B. Nube computacional

Es el conjunto de servidores remotos en Internet para gestionar archivos y aplicaciones.
Una de las ventajas de una nube es que permite que los usuarios utilicen archivos y aplicaciones sin tener que instalar programas en una computadora con acceso a Internet.
El concepto de nube salió de los diagramas de red, donde Internet se representa como una nube, en una abstracción de la infraestructura que representa.

C. Aplicación web

Aplicación que los usuarios pueden utilizar accediendo a un servidor web a través de internet o de una intranet mediante un navegador.
Fuente: https://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web

D. Servicio en la nube

Utilidad o función que se utiliza a través de Internet.

E. Tipos de servicios

Software as a Service (SaaS): El más utilizado. El software está alojado en servidores de los proveedores y el cliente accede a ellos a través del navegador web. Todo lo relacionado con mantenimiento, soporte y disponibilidad es manejado por el proveedor.
Platform as a Service (PaaS): En este tipo de servicios en la nube el proveedor ofrece acceso a un entorno basado en cloud en el cual los usuarios pueden crear, ejecutar, distribuir y administrar sus propias aplicaciones.
Infrastructure as a Service (IaaS): Un proveedor de servicios proporciona aceso a recursos como servidores con una capacidad de cómputo contratada, almacenamiento y acceso a red.

F. Servicios que se ofrecen en la nube

Almacenamiento
Herramientas de Productividad
Desarrollo de Aplicaciones
Hosting
Videoconferencias
Mapas
Streamming

G. Servicios de nube más usados

Amazon Web Services (AWS): https://aws.amazon.com/
Microsoft Azure: https://azure.microsoft.com/.
Google Cloud: https://cloud.google.com/.

H. Aplicación orientada a servicios

Es una aplicación en la que algunas partes se realizan en un servidor independiente.

Características

El procesamiento se reparte en varias computadoras.
Un servicio puede ser utilizado por varias aplicaciones.

I. Aplicación web orientada a servicios

Aplicación web en la que algunas operaciones se realizan en el servidor web y sus resultados se descargan al navegador web sin cambiar la página desplegada.

J. Aplicación web hibrida (Mashup)

Es una aplicación que usa otras aplicaciones web.

Estructura

Proveedor de contenidos: Fuente de los datos. Los datos están disponibles vía una API y diferentes protocolos web como RSS, REST y Web Service.
El sitio mashup: Es la nueva aplicación web que provee un nuevo servicio utilizando diferente información y de la que no es dueña.
El navegador web cliente: Interfaz de usuario del mashup. En una aplicación web, el contenido puede ser mezclado por los web browser clientes usando lenguaje web del lado del cliente, por ejemplo, HTML y JavaScript.

Fuente: Wikipedia

K. Resumen

En esta lección se tocaron los siguientes temas:
- Nube computacional.
- Aplicación web.
- Servicio en la nube.
- Tipos de servicios.
- Servicios que se ofrecen en la nube.
- Servicios de nube más usados.
- Aplicación orientada a servicios.
- Aplicación web orientada a servicios.
- Aplicación web hibrida (Mashup).

5. Ejemplo de servicio

Versión para imprimir.

A. Introducción

En esta lección se explica el funcionamiento de un servicio muy sencillo.

Puedes probar el ejemplo en http://srvejemplo.rf.gd/.

B. Diagrama de despliegue

C. Funcionamiento

Versión para imprimir.

1. Iniciamos al ejecutar código en el cliente

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

2. Se invoca el servicio en el servidor

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Ejecuta fetch y envía request (solicitud).

Request

GET /servicio.php HTTP/1.1

Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ; __test=fe8a33dadb44b3adb2a0bc1ff8c44c98
Host: srvejemplo.rf.gd
Referer: http://srvejemplo.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

servicio.php

<?php

echo "Hola";

Despierta y recibe request.

3. El servicio procesa la request y genera la response

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Hace wait esperando response.

servicio.php

<?php

echo "Hola";

Procesa la request y genera
la response (respuesta).

Response

HTTP/1.1 200 OK

Server: openresty
Date: Fri, 02 May 2025 03:17:54 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 03:17:54 GMT

Hola

El code (o código) 200
indica que terminó
con éxito.

4. El servicio devuelve la response, que es recibida en el cliente

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Despierta y recibe response.

Response

HTTP/1.1 200 OK

Hola

Memoria

resp

ok: true
text: Hola

resp tiene lo mismo
que la response,
pero en un objeto
de JavaScript.

servicio.php

<?php

echo "Hola";

Devuelve response y se duerme.

5. Verifica si la conexión terminó con éxito

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Memoria

resp

ok: true
text: Hola

6. Como la conexión terminó con éxito, recupera el texto de response

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Memoria

resp

ok: true
text: Hola

texto

Hola

El texto recuperado
queda en la
constante texto.

7. Muestra el texto en un alert

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Memoria

resp

ok: true
text: Hola

texto

Hola

Alert

Hola

8. Al cerrar el alert, termina el evento

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

D. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvejemplo.rf.gd/.
Descarga el archivo /src/srvejemplo.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso,
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo servicio
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php de este ejemplo.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta y un dominio para el ejemplo y crea directamente los archivos. Si ya tienes cuenta, entra a ella y crea un nuevo dominio con sus archivos.
Sube tus archivos a GitHub. En este ejemplo no necesitas esperar 11 o más minutos.

E. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvejemplo.rf.gd/.
Descarga el archivo /src/srvejemplo.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Entra al hosting que elijas y añade directamente los archivos.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

F. Archivos

G. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Ejemplo de servicio</title>

</head>

<body>
 <h1>Ejemplo de servicio</h1>

 <button onclick="ejecuta()">
  Ejecuta
 </button>

 <script>

  async function ejecuta() {
   try {
    // Se conecta a servicio.php y recibe su respuesta.
    const respuesta =
     await fetch("servicio.php")
    if (respuesta.ok) {
     const texto =
      await respuesta.text()
     alert(texto)
    } else {
     throw new Error(
      respuesta.statusText)
    }
   } catch (error) {
    console.error(error)
    alert(error.message)
   }
  }

 </script>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Ejemplo de servicio</title>
10
11	</head>
12
13	<body>
14	<h1>Ejemplo de servicio</h1>
15
16	<button onclick="ejecuta()">
17	Ejecuta
18	</button>
19
20	<script>
21
22	async function ejecuta() {
23	try {
24	// Se conecta a servicio.php y recibe su respuesta.
25	const respuesta =
26	await fetch("servicio.php")
27	if (respuesta.ok) {
28	const texto =
29	await respuesta.text()
30	alert(texto)
31	} else {
32	throw new Error(
33	respuesta.statusText)
34	}
35	} catch (error) {
36	console.error(error)
37	alert(error.message)
38	}
39	}
40
41	</script>
42
43	</body>
44
45	</html>

H. servicio.php


1	<?php
2
3	echo "Hola";
4

I. Resumen

En esta lección se mostró el funcionamiento de un servicio.

6. Arquitectura orientada a servicios

Versión para imprimir.

A. Introducción

En esta lección se presentan el concepto y los componentes de una arquitectura orientada a servicios.

B. Arquitectura orientada a servicios

Estilo de arquitectura de TI que se apoya en la orientación a servicios.
La orientación a servicios es una forma de pensar en servicios, su construcción y sus resultados.
Un servicio es una representación lógica de una actividad de negocio que tiene un resultado de negocio específico (ejemplo: comprobar el crédito de un cliente, obtener datos de clima, consolidar reportes de perforación).

Fuente: https://es.wikipedia.org/wiki/Arquitectura_orientada_a_servicios

C. Ventajas

Reduce el nivel de acoplamiento.
Clara definición de roles de desarrollo.
Definición de seguridad más clara.
Fácil de probar.
Mejora el mantenimiento.
Favorece la reutilización.
Favorece el desarrollo en paralelo.
Favorece la escalabilidad.
Permite un mapeo directo entre los procesos y los sistemas.
Permite un monitoreo preciso.
Permite la interoperabilidad.

Fuente: http://soa-fpuna.blogspot.com/2011/11/ventajas-y-desventajas.html

D. Principios de diseño de un servicio

Definición clara y estandarizada mediante descriptores de servicio, donde se indique:
- Nombre del Servicio.
- Forma de accesos.
- Funcionalidades que ofrece.
- Descripción de los datos de entrada de cada funcionalidad que ofrece.
- Descripción de los datos de salida de cada funcionalidad que ofrece.
Sin estado: no guardan valores para ser usados en otras llamadas. (es posible acceder a bases de datos.)
Pueden también ejecutar unidades discretas de trabajo como serían editar y procesar una transacción.
No dependen del estado de otras funciones o procesos.

Fuente: https://ederluisdsd.wordpress.com/2013/03/17/principios-de-diseno-soa/

E. Capas

Capa de acceso

Interfaz de usuario que invoca a los procesos de negocio.
Interfaces web, escritorio, móvil, etc.
Pueden ejecutarse en varios dispositivos.

Capa de procesos de negocio

Integración de uno o más servicios que resuelven un problema de negocio.

Capa de servicio

Componentes que se han desarrollado como servicios.

Capa de recursos

Recursos operacionales: CRM, ERP, HR, BD.
Tecnologías (Java, .NET, PHP).

Fuente: https://www.slideshare.net/imcinstitute/service-oriented-architecture-soa-15-introduction-to-soa

F. Diagrama de Arquitectura

Puedes encontrar información sobre este tipo de diagramas en: https://www.uml-diagrams.org/component-diagrams.html.
A continuación se muestra como quedaría un sitio con bases de datos si se adaptara a SOA.

G. Introducción a XML

Versión para imprimir.

1. XML

Siglas en inglés de eXtensible Markup Language, traducido como Lenguaje de Marcado Extensible o Lenguaje de Marcas Extensible.
Metalenguaje que permite definir lenguajes de marcas.
Desarrollado por el World Wide Web Consortium (W3C).
Utilizado para almacenar datos en forma legible.

Fuente: https://es.wikipedia.org/wiki/Extensible_Markup_Language

2. Ejemplo de XML


1	<?xml version="1.0" encoding="UTF-8" ?>
2	<!DOCTYPE MiContacto SYSTEM "MiContacto.dtd">
3	<Contacto>
4	<Nombre>Juan</Nombre>
5	<Email>juan@gm.com</Email>
6	<Telefonos>
7	<Telefono>5555555555</Telefono>
8	<Telefono>8888888888</Telefono>
9	</Telefonos>
10	</Contacto>

3. DTD MiContacto


1	<?xml version="1.0" encoding="ISO-8859-1" ?>
2	<!-- Este es el DTD de Contacto -->
3	<!ELEMENT Contacto (Nombre, Email, Telefonos)>
4	<!ELEMENT Nombre (#PCDATA)>
5	<!ELEMENT Email (#PCDATA)>
6	<!ELEMENT Telefonos (Telefono)*>
7	<!ELEMENT Telefono (#PCDATA)>

H. Introducción a SOAP

Versión para imprimir.

1. SOAP

Originalmente siglas de Simple Object Access Protocol, Protocolo de Acceso Simple a Objetos.
Hoy en día solo es SOAP, sin un significado especial.
Protocolo estándar que define cómo dos objetos en diferentes procesos pueden comunicarse por medio de intercambio de datos XML.
Es uno de los protocolos utilizados para implementar servicios web.

Fuente: https://es.wikipedia.org/wiki/Simple_Object_Access_Protocol

2. Estructura de los mensajes de SOAP

Usan formato XML.
3 elementos:

Envelope o sobre

El elemento raíz.

Header o encabezado

Especificación de como procesar los datos.

Body o cuerpo

El conenido del mensaje.

Fuente: https://es.wikipedia.org/wiki/Simple_Object_Access_Protocol

3. Ejemplo de solicitud SOAP


1	<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
2	<soap:Header>
3	<t:Transaction xmlns:t="alguna-URI" soap:mustUnderstand="1">
4	5
5	</t:Transaction>
6	</soap:Header>
7	<soap:Body>
8	<getDetalleDeProducto xmlns="http://warehouse.example.com/ws">
9	<productoId>827635</productoId>
10	</getDetalleDeProducto>
11	</soap:Body>
12	</soap:Envelope>

4. Ejemplo de respuesta SOAP


1	<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
2	<soap:Body>
3	<getRespuestaDetalleDeProducto xmlns="http://warehouse.example.com/ws">
4	<getResultadoDetalleDeProducto>
5	<productId>827635</productId>
6	<nombre>Balón de Futbol</nombre>
7	<descripcion>Balón de futbol de 11” de vinil.</descripcion>
8	<precio>300.0</precio>
9	</getResultadoDetalleDeProducto>
10	</getRespuestaDetalleDeProducto>
11	</soap:Body>
12	</soap:Envelope>

I. Introducción a WSDL

Versión para imprimir.

1. WSDL

Siglas de Web Services Description Language, es un formato de XML que se utiliza para describir servicios Web.
Describe los requisitos del protocolo y los formatos de los mensajes necesarios para interactuar con los servicios listados en su catálogo.
Las operaciones y mensajes que soporta se describen en abstracto y se ligan después al protocolo concreto de red y al formato del mensaje.
Se usa a menudo en combinación con SOAP y XML Schema.
Los tipos de datos especiales se incluyen en el archivo WSDL en forma de XML Schema.
El cliente puede usar SOAP para hacer la llamada a una de las funciones listadas en el WSDL.

Fuente: https://es.wikipedia.org/wiki/Simple_Object_Access_Protocol

2. Elementos de WSDL

types: Define los tipos de datos usados en los mensajes. Se utilizan los tipos definidos en la especificación XML Schema.
message: Define los elementos de mensaje. Cada mensaje puede consistir en una serie de partes lógicas. Las partes pueden ser de cualquiera de los tipos definidos en el elemento message.
portType: Define las operaciones permitidas y los mensajes intercambiados en el Servicio.
binding: Especifica los protocolos de comunicación usados.
service: Conjunto de puertos y dirección de los mismos. Esta parte final hace referencia a lo aportado por las secciones anteriores.

Con estos elementos no sabemos qué hace un servicio pero sí disponemos de la información necesaria para interactuar con él (funciones, mensajes de entrada/salida, protocolos, etcétera).

3. Ejemplo de WSDL


1	<definitions name=“PrecioProd“
2	targetNamespace="http://example.com/stockquote.wsdl"
3	xmlns:tns="http://example.com/stockquote.wsdl"
4	xmlns:xsd1="http://example.com/stockquote.xsd"
5	xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
6	xmlns="http://schemas.xmlsoap.org/wsdl/">
7	<types>
8	<schema targetNamespace="http://example.com/stockquote.xsd"
9	xmlns="http://www.w3.org/2000/10/XMLSchema">
10	<element name="SolPrecioProd">
11	<complexType>
12	<all>
13	<element name="productoId" type="decimal"/>
14	</all>
15	</complexType>
16	</element>
17	<element name="PrecioProd">
18	<complexType>
19	<all>
20	<element name="precio" type="float"/>
21	</all>
22	</complexType>
23	</element>
24	</schema>
25	</types>
26	<message name="InputGetPrecioProd">
27	<part name="body" element="xsd1:SolPrecioProd"/>
28	</message>
29	<message name="OutputGetPrecioProd">
30	<part name="body" element="xsd1:PrecioProd"/>
31	</message>
32	<portType name="PortTypePrecioProd">
33	<operation name="GetPrecioProd">
34	<input message="tns:InputGetPrecioProd"/>
35	<output message="tns:OutputGetPrecioProd"/>
36	</operation>
37	</portType>
38	<binding name="BindPrecioProdSoap" type="tns:PortTypePrecioProd">
39	<soap:binding style="document" transport="http://schemas.xmlsoap.org/soap/http"/>
40	<operation name="GetPrecioProd">
41	<soap:operation soapAction="http://example.com/GetPrecioProd"/>
42	<input>
43	<soap:body use="literal"/>
44	</input>
45	<output>
46	<soap:body use="literal"/>
47	</output>
48	</operation>
49	</binding>
50	<service name="ServPrecioProd">
51	<documentation>Devuelve el precio de un producto.</documentation>
52	<port name="PuertoPrecioProd" binding="tns:BindPrecioProdSoap">
53	<soap:address location="http://example.com/precioprod"/>
54	</port>
55	</service>
56	</definitions>

J. UDDI

Este estándar no se usa.

Siglas del catálogo de negocios de Internet denominado Universal Description, Discovery and Integration.
El registro en el catálogo se hace en XML.
Es una iniciativa industrial abierta (sufragada por la OASIS) entroncada en el contexto de los servicios Web.
El registro de un negocio en UDDI tiene tres partes:

Páginas blancas

dirección, contacto y otros identificadores conocidos.

Páginas amarillas

categorización industrial basada en taxonomías.

Páginas verdes

información técnica sobre los servicios que aportan las propias empresas.
Es uno de los estándares básicos de los servicios web, cuyo objetivo es ser accedido por los mensajes SOAP y dar paso a documentos WSDL, en los que se describen los requisitos del protocolo y los formatos del mensaje solicitado para interactuar con los servicios Web del catálogo de registros.

Fuente: https://es.wikipedia.org/wiki/UDDI

K. Introducción a REST

Versión para imprimir.

1. REST

Siglas para Representational State Transfer o transferencia de estado representacional.
Estilo de arquitectura de software para sistemas distribuidos en la World Wide Web.

Fuentes: https://es.wikipedia.org/wiki/Transferencia_de_Estado_Representacional y https://bbvaopen4u.com/es/actualidad/api-rest-que-es-y-cuales-son-sus-ventajas-en-el-desarrollo-de-proyectos

2. Solicitud HTTP

Toda página web tiene una URL asociada, pero también puede representar una entidad, que puede ser una colección de datos, por ejemplo, https://mirest.com/contactos, o un objeto, por ejemplo, https://mirest.com/contactos/69.
Para interactuar con la URL hay que enviarle una solicitud, que consta de:
URL

Con parámetros opcionales que consisten en nombre y valor asociado, separados por & (como cuando buscas en Google).

conjunto de encabezados

Proporcionan información sobre la computadora y el programa que envían los datos, así como la informacion que esperan recibir.

cuerpo

carga útil
Contiene datos adicionales,Pueden representarse en los siguientes formatos:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
- XML
- JSON
- YAML
Método de envío

Indica la acción que debe realizarse sobre la URL, usando los datos adicionales.

Fuente: https://developer.mozilla.org/es/docs/Web/HTTP/Methods

3. Métodos de envío HTTP

TRACE

Realiza una prueba de enviar un mensaje mensaje al servidor de la URL y recibirlo de regreso sin modificaciones.

OPTIONS

Devuelve una descripción de las opciones de comunicación de laURL.

CONNECT

Establece un tunel bidireccional hacia el servidor.

GET

Devuelve los datos de la colección u objeto asociados con la URL, sin modificar el estado del servidor.

Puede tomarse en cuenta los parámetros que lleva la URL, como si fueran las condiciones de una cláusula WHERE de SQL.

HEAD

Devuelve una respuesta como la de GET, pero sin el cuerpo de la respuesta.

POST

Envía una entidad a una URL.

Si la URL representa una lista que no contiene esa entidad, la agrega.

Los datos de la entidad se indican en el cuerpo de la solicitud.

A menudo causa un cambio o efectos secundarios en el servidor.

PUT

Reemplaza toda la entidad indicada en la URL con el contenido del cuerpo de la solicitud.

PATCH

Modifica parcialmente la entidad de la URL, modificando solamente los datos enviados en el cuerpo de la solicitud.

DELETE

Eliminar la entidad de la URL

Fuente: https://developer.mozilla.org/es/docs/Web/HTTP/Methods

L. Resumen

En esta lección se introdujeron los siguientes temas:
- Arquitectura orientada a servicios
- Ventajas de una arquitectura orientada a servicios
- Principios de diseño de un servici
- Capas de una arquitectura orientada a servicios
- Diagrama de Arquitectura
- XML
- SOAP
- WSDL
- UDDI
- REST

7. Servicio que devuelve JSON

Versión para imprimir.

A. Introducción

A partir de esta lección se introducen elementos de software que facilitan el desarrollo de aplicaciones orientadas a servicios.

Este ejemplo recibe los datos JSON generados por un servicio.

Puedes probar el ejemplo en http://srvdevuelve.rf.gd/.

B. La función `consume`

El código que se muestra en el ejemplo de servicio se repite en muchos ejemplos posteriores, pero además debe realizar algunas cuastiones adicionales. Para simplificar el trabajo, se introduce la función consume, que realiza todo lo necesario para controlar la conxión desde el navegador web hacia el servidor.
Para usarla, debes importar el archivo donde está definida esta función y luego invocarla pasándole el resultado de invocar la función fetch que comunica al servicio.
A lo largo de esta lección, se profundiza en el uso y estructura de esta función.

C. La función `recibeJson`

Recibe una URL a donde debe conectarse y opcionalmente el método HTTP a usar, que por default es GET. Ejecuta un fetch indicando que el cliente acepta solo los formatos JSON y problem details para la respuesta.
Para usarla, debes importar el archivo donde está definida esta función y luego invocarla pasándole la URL del servicio y, opcionalmente, el método HTTP.
A lo largo de esta lección, se profundiza en el uso y estructura de esta función.

D. La función `devuelveJson`

Para devolver al cliente los resultados de la ejecución de un servicio, se usa la función devuelveJson, escrita en PHP.
Para usarla, debes importar el archivo donde está definida esta función usando require o require_once y luego invocarla pasándole el resultado generado por el servicio.
A lo largo de esta lección, se profundiza en el uso y estructura de esta función.

E. La clase `ProblemDetailsError`

Se acuerdo con el RFC 9457 en https://www.rfc-editor.org/info/rfc9457, cuando un servicio falla, debe devolver una estructura JSON conocida como Problem Details que informa los detalles del fallo.
El tipo de fallo se describe en el campo type; adicionalmente, todo tipo de fallo debe tener una pequeña página donde se describe el problema. En estos ejemplos, se usa la carpeta errors para almacenar las páginas que decriben los errores.
Para usarla en JavaScript, debes importar el archivo donde está definida esta clase.

F. La función `muestraError`

Maneja los errores en el navegador web de una manera uniforme.
Cuando se tiene un error normal de JavaScript, se muestra la excepción correspondiente en la consola del navegador y el mensaje de la excepción en un cuadro de alert.
Cuando es un ProblemDetails, cuya estructure se revisa en la lección sobre validaciones, sus propiedades se muestran en la consola del navegador y en un cuadro de alert.
Para usarla, debes importar el archivo donde está definida esta función y colocarla dentro de un catch. Se le pasa como parámetro la excepción atrapada por el catch.
A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de esta función.

G. Diagrama de despliegue

H. Funcionamiento

Versión para imprimir.

1. Iniciamos al ejecutar código en el cliente

index.html

const respuesta = await consume(
 recibeJson("php/devuelve.php"))
const json =
 await respuesta.json()
alert(
 `Mensaje: ${json.mensaje}
Nombre: ${json.nombre}`)

2. Se invoca el servicio en el servidor

index.html

const respuesta = await consume(
 recibeJson("php/devuelve.php"))
const json =
 await respuesta.json()
alert(
 `Mensaje: ${json.mensaje}
Nombre: ${json.nombre}`)

Envía la solicitud (request) a la red para que
se ejecute el servicio asociado con la URL.

Request

GET /srv/devuelve.php HTTP/1.1

Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ; __test=fe8a33dadb44b3adb2a0bc1ff8c44c98
Host: srvdevuelve.rf.gd
Referer: http://srvdevuelve.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

srv/devuelve.php

devuelveJson([
 "nombre" => "pp",
 "mensaje" => "Hola."
]);

Despierta y recibe request.

3. El servicio procesa la request y genera la response

index.html

const respuesta = await consume(
 recibeJson("php/devuelve.php"))
const json =
 await respuesta.json()
alert(
 `Mensaje: ${json.mensaje}
Nombre: ${json.nombre}`)

Hace wait esperando response.

srv/devuelve.php

devuelveJson([
 "nombre" => "pp",
 "mensaje" => "Hola."
]);

Procesa la request y
genera response
(respuesta).

Response

HTTP/1.1 200 OK

Server: openresty
Date: Fri, 02 May 2025 03:41:22 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 03:41:22 GMT

{"nombre":"pp","mensaje":"Hola."}

4. El servicio devuelve la response, que es recibida en el cliente

index.html

const respuesta = await consume(
 recibeJson("php/devuelve.php"))
const json =
 await respuesta.json()
alert(
 `Mensaje: ${json.mensaje}
Nombre: ${json.nombre}`)

Despierta y recibe response.

Response

HTTP/1.1 200 OK

Server: openresty
Date: Fri, 02 May 2025 03:41:22 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 03:41:22 GMT

{"nombre":"pp","mensaje":"Hola."}

Memoria

respuesta

status: 200
body: {"nombre":"pp","mensaje":"Hola."}

json

nombre: "pp"
mensaje: "Hola."

srv/devuelve.php

devuelveJson([
 "nombre" => "pp",
 "mensaje" => "Hola."
]);

Devuelve response y se duerme.

5. Muestra el objeto recibido en un alert

index.html

const respuesta = await consume(
 recibeJson("php/devuelve.php"))
const json =
 await respuesta.json()
alert(
 `Mensaje: ${json.mensaje}
Nombre: ${json.nombre}`)

Memoria

respuesta

status: 200
body: {"nombre":"pp","mensaje":"Hola."}

json

nombre: "pp"
mensaje: "Hola."

Alert

Nombre: pp
Mensaje: Hola.

6. Al cerrar el alert, termina el evento

index.html

const respuesta = await consume(
 recibeJson("php/devuelve.php"))
const json =
 await respuesta.json()
alert(
 `Mensaje: ${json.mensaje}
Nombre: ${json.nombre}`)

I. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvdevuelve.rf.gd/.
Descarga el archivo /src/srvdevuelve.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

J. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvdevuelve.rf.gd/.
Descarga el archivo /src/srvdevuelve.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

K. Archivos

Haz clic en los triángulos para expandir las carpetas

index.html
jsconfig.json
errors
- errorinterno.html
- resultadonojson.html
js
- lib
php
- devuelve.php
- lib

L. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Servicio que devuelve JSON</title>

</head>

<body>

 <h1>Servicio que devuelve JSON</h1>

 <p><button id="boton">Recupera datos</button></p>

 <script type="module">

  import { consume } from "./js/lib/consume.js"
  import { recibeJson } from "./js/lib/recibeJson.js"
  import { muestraError } from "./js/lib/muestraError.js"

  boton.addEventListener("click", recibeDatos)

  async function recibeDatos() {
   try {
    const respuesta = await consume(
     recibeJson("php/devuelve.php"))
    const json =
     await respuesta.json()
    alert(
     `Mensaje: ${json.mensaje}
Nombre: ${json.nombre}`)
   } catch (error) {
    muestraError(error)
   }
  }

 </script>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Servicio que devuelve JSON</title>
10
11	</head>
12
13	<body>
14
15	<h1>Servicio que devuelve JSON</h1>
16
17	<p><button id="boton">Recupera datos</button></p>
18
19	<script type="module">
20
21	import { consume } from "./js/lib/consume.js"
22	import { recibeJson } from "./js/lib/recibeJson.js"
23	import { muestraError } from "./js/lib/muestraError.js"
24
25	boton.addEventListener("click", recibeDatos)
26
27	async function recibeDatos() {
28	try {
29	const respuesta = await consume(
30	recibeJson("php/devuelve.php"))
31	const json =
32	await respuesta.json()
33	alert(
34	`Mensaje: ${json.mensaje}
35	Nombre: ${json.nombre}`)
36	} catch (error) {
37	muestraError(error)
38	}
39	}
40
41	</script>
42
43	</body>
44
45	</html>

M. Carpeta « php »

Versión para imprimir.

A. php / devuelve.php

<?php

require_once __DIR__ . "/lib/devuelveJson.php";

devuelveJson([
 "nombre" => "pp",
 "mensaje" => "Hola.",
]);


B. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


2. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


3. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

N. Carpeta « errors »

Versión para imprimir.

A. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Error interno del servidor</title>
10
11	</head>
12
13	<body>
14
15	<h1>Error interno del servidor</h1>
16
17	<p>Se presentó de forma inesperada un error interno del servidor.</p>
18
19	</body>
20
21	</html>

B. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>El resultado no puede representarse como JSON</title>
10
11	</head>
12
13	<body>
14
15	<h1>El resultado no puede representarse como JSON</h1>
16
17	<p>
18	Debido a un error interno del servidor, el resultado generado, no se puede
19	recuperar.
20	</p>
21
22	</body>
23
24	</html>

O. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

1	import { ProblemDetailsError } from "./ProblemDetailsError.js"
2
3	/**
4	* Espera a que la promesa de un fetch termine. Si
5	* hay error, lanza una excepción.
6	*
7	* @param {Promise<Response> } servicio
8	*/
9	export async function consume(servicio) {
10	const respuesta = await servicio
11	if (respuesta.ok) {
12	return respuesta
13	} else {
14	const contentType = respuesta.headers.get("Content-Type")
15	if (
16	contentType !== null && contentType.startsWith("application/problem+json")
17	)
18	throw new ProblemDetailsError(await respuesta.json())
19	else
20	throw new Error(respuesta.statusText)
21	}
22	}

2. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

1	import { ProblemDetailsError } from "./ProblemDetailsError.js"
2
3	/**
4	* Muestra los datos de una Error en la consola y en un cuadro de alerta.
5	* @param { ProblemDetailsError \| Error \| null } error descripción del error.
6	*/
7	export function muestraError(error) {
8
9	if (error === null) {
10
11	console.error("Error")
12	alert("Error")
13
14	} else if (error instanceof ProblemDetailsError) {
15
16	const problemDetails = error.problemDetails
17
18	let mensaje =
19	typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
20	if (typeof problemDetails["detail"] === "string") {
21	if (mensaje !== "") {
22	mensaje += "\n\n"
23	}
24	mensaje += problemDetails["detail"]
25	}
26	if (mensaje === "") {
27	mensaje = "Error"
28	}
29	console.error(error, problemDetails)
30	alert(mensaje)
31
32	} else {
33
34	console.error(error)
35	alert(error.message)
36
37	}
38
39	}

3. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

1	export class ProblemDetailsError extends Error {
2
3	/**
4	* Detalle de los errores devueltos por un servicio.
5	* Crea una instancia de ProblemDetailsError.
6	* @param {object} problemDetails Objeto con la descripcipon del error.
7	*/
8	constructor(problemDetails) {
9
10	super(typeof problemDetails["detail"] === "string"
11	? problemDetails["detail"]
12	: (typeof problemDetails["title"] === "string"
13	? problemDetails["title"]
14	: "Error"))
15
16	this.problemDetails = problemDetails
17
18	}
19
20	}

4. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

P. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

1	{
2	"compilerOptions": {
3	"checkJs": true,
4	"strictNullChecks": true,
5	"target": "ES6",
6	"module": "Node16",
7	"moduleResolution": "Node16",
8	"lib": [
9	"ES2017",
10	"WebWorker",
11	"DOM"
12	]
18	}

Q. Resumen

En esta lección se mostró el funcionamiento de un ejemplo recibe los datos JSON generados por un servicio.

8. Servicio que recibe y devuelve JSON

Versión para imprimir.

A. Introducción

Este ejemplo envía y recibe datos JSON.
Muchos servicios de Internet utilizan esta forma de comunicación.
Puedes probar el ejemplo en http://srvjson.rf.gd/.

B. La función `enviaJsonRecibeJson`

Se introduce la función enviaJsonRecibeJson, que convierte un dato en una cadena JSON, la envía con un fetch hacia el servidor y espera un JSON o un problem detail.
Para usarla, debes importar el archivo donde está definida esta función y luego invocarla pasándole la URL, los datos y el método de envío, que por omisión es POST.
A lo largo de esta lección, se profundiza en el uso y estructura de esta función.

C. La función `recibeJson`

Para que los servicios en el servidor puedan recuperar un texto en formato JSON y convertirlo en un objeto, se introduce la función recibeJson, escrita en PHP.
Para usarla, debes importarla con require o require_once, invocarla y recibir la referencia al objeto recibido.
A lo largo de esta lección, se profundiza en el uso y estructura de esta función.

D. Diagrama de despliegue

E. Funcionamiento

Versión para imprimir.

1. Iniciamos al ejecutar código en el cliente

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "php/json.php", datos))
const json =
 await respuesta.json()
alert(json)

2. Se crea la literal de objeto

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "php/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Memoria

datos

saludo: "Hola"
nombre: "pp"

3. Se invoca el servicio en el servidor

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "php/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Ejecuta fetch y envía request (solicitud).

Memoria

datos

saludo: "Hola"
nombre: "pp"

Request

POST /srv/json.php HTTP/1.1

Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 31
Content-Type: application/json
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ; __test=fe8a33dadb44b3adb2a0bc1ff8c44c98
Host: srvjson.rf.gd
Origin: http://srvjson.rf.gd
Referer: http://srvjson.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

{"saludo":"Hola","nombre":"pp"}

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Despierta y recibe request.

4. El servicio lee los datos

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "php/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

Memoria

datos

saludo: "Hola"
nombre: "pp"

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Request

POST /srv/json.php HTTP/1.1

{"saludo":"Hola","nombre":"pp"}

Memoria (Servidor)

$json

saludo: "Hola"
nombre: "pp"

$saludo

"Hola"

$nombre

"pp"

5. El servicio procesa los datos

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "php/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

Memoria

datos

saludo: "Hola"
nombre: "pp"

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$json

saludo: "Hola"
nombre: "pp"

$saludo

"Hola"

$nombre

"pp"

$resultado

"Hola pp."

6. El servicio genera la response

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "php/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

Memoria

datos

saludo: "Hola"
nombre: "pp"

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$json

saludo: "Hola"
nombre: "pp"

$saludo

"Hola"

$nombre

"pp"

$resultado

"Hola pp."

Response

HTTP/1.1 200 OK

Server: openresty
Date: Fri, 02 May 2025 03:57:08 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 03:57:08 GMT

"Hola pp."

7. El servicio devuelve la response, que es recibida en el cliente

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "php/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Despierta y recibe response.

Memoria

datos

saludo: "Hola"
nombre: "pp"

respuesta

status: 200
body: "Hola pp."

json

"Hola pp."

Response

HTTP/1.1 200 OK

Server: openresty
Date: Fri, 02 May 2025 03:57:08 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 03:57:08 GMT

"Hola pp."

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Devuelve response y se duerme.

8. Muestra el valor recibido recibido en un alert

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "php/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Memoria

datos

saludo: "Hola"
nombre: "pp"

respuesta

status: 200
body: "Hola pp."

json

"Hola pp."

Alert

Hola pp.

9. Al cerrar el alert, termina el evento

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "php/json.php", datos))
const json =
 await respuesta.json()
alert(json)

F. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvjson.rf.gd/.
Descarga el archivo /src/srvjson.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

G. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvjson.rf.gd/.
Descarga el archivo /src/srvjson.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

H. Archivos

Haz clic en los triángulos para expandir las carpetas

I. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Servicio que recibe y devuelve JSON</title>

</head>

<body>

 <h1>Servicio que recibe y devuelve JSON</h1>

 <p><button id="boton">Envía y recibe JSON</button></p>

 <script type="module">

  import { consume } from "./js/lib/consume.js"
  import { enviaJsonRecibeJson } from "./js/lib/enviaJsonRecibeJson.js"
  import { muestraError } from "./js/lib/muestraError.js"

  boton.addEventListener("click", procesaJson)

  async function procesaJson() {
   try {
    const datos = {
     saludo: "Hola",
     nombre: "pp"
    }
    const respuesta = await consume(
     enviaJsonRecibeJson(
      "php/json.php", datos))
    const json =
     await respuesta.json()
    alert(json)
   } catch (error) {
    muestraError(error)
   }
  }

 </script>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Servicio que recibe y devuelve JSON</title>
10
11	</head>
12
13	<body>
14
15	<h1>Servicio que recibe y devuelve JSON</h1>
16
17	<p><button id="boton">Envía y recibe JSON</button></p>
18
19	<script type="module">
20
21	import { consume } from "./js/lib/consume.js"
22	import { enviaJsonRecibeJson } from "./js/lib/enviaJsonRecibeJson.js"
23	import { muestraError } from "./js/lib/muestraError.js"
24
25	boton.addEventListener("click", procesaJson)
26
27	async function procesaJson() {
28	try {
29	const datos = {
30	saludo: "Hola",
31	nombre: "pp"
32	}
33	const respuesta = await consume(
34	enviaJsonRecibeJson(
35	"php/json.php", datos))
36	const json =
37	await respuesta.json()
38	alert(json)
39	} catch (error) {
40	muestraError(error)
41	}
42	}
43
44	</script>
45
46	</body>
47
48	</html>

J. Carpeta « php »

Versión para imprimir.

A. php / json.php

<?php

require_once __DIR__ . "/lib/recibeJson.php";
require_once __DIR__ . "/lib/devuelveJson.php";

$json = recibeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado = "{$saludo} {$nombre}.";
devuelveJson($resultado);


B. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


3. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


4. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

5. php / lib / recibeJson.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";

function recibeJson()
{
 $json = json_decode(file_get_contents("php://input"));

 if ($json === null) {

  http_response_code(BAD_REQUEST);
  header("Content-Type: application/problem+json; charset=utf-8");

  echo '{' .
   "status: " . BAD_REQUEST .
   '"title": "Los datos recibidos no están en formato JSON."' .
   '"type": "/errors/datosnojson.html"' .
   '}';

  exit();
 }

 return $json;
}


K. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

1	import { ProblemDetailsError } from "./ProblemDetailsError.js"
2
3	/**
4	* Espera a que la promesa de un fetch termine. Si
5	* hay error, lanza una excepción.
6	*
7	* @param {Promise<Response> } servicio
8	*/
9	export async function consume(servicio) {
10	const respuesta = await servicio
11	if (respuesta.ok) {
12	return respuesta
13	} else {
14	const contentType = respuesta.headers.get("Content-Type")
15	if (
16	contentType !== null && contentType.startsWith("application/problem+json")
17	)
18	throw new ProblemDetailsError(await respuesta.json())
19	else
20	throw new Error(respuesta.statusText)
21	}
22	}

2. js / lib / enviaJsonRecibeJson.js


/**
 * @param { string } url
 * @param { Object } body
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function enviaJsonRecibeJson(url, body, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: {
    "Content-Type": "application/json",
    "Accept": "application/json, application/problem+json"
   },
   body: JSON.stringify(body)
  }
 )
}

3. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

1	import { ProblemDetailsError } from "./ProblemDetailsError.js"
2
3	/**
4	* Muestra los datos de una Error en la consola y en un cuadro de alerta.
5	* @param { ProblemDetailsError \| Error \| null } error descripción del error.
6	*/
7	export function muestraError(error) {
8
9	if (error === null) {
10
11	console.error("Error")
12	alert("Error")
13
14	} else if (error instanceof ProblemDetailsError) {
15
16	const problemDetails = error.problemDetails
17
18	let mensaje =
19	typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
20	if (typeof problemDetails["detail"] === "string") {
21	if (mensaje !== "") {
22	mensaje += "\n\n"
23	}
24	mensaje += problemDetails["detail"]
25	}
26	if (mensaje === "") {
27	mensaje = "Error"
28	}
29	console.error(error, problemDetails)
30	alert(mensaje)
31
32	} else {
33
34	console.error(error)
35	alert(error.message)
36
37	}
38
39	}

4. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

1	export class ProblemDetailsError extends Error {
2
3	/**
4	* Detalle de los errores devueltos por un servicio.
5	* Crea una instancia de ProblemDetailsError.
6	* @param {object} problemDetails Objeto con la descripcipon del error.
7	*/
8	constructor(problemDetails) {
9
10	super(typeof problemDetails["detail"] === "string"
11	? problemDetails["detail"]
12	: (typeof problemDetails["title"] === "string"
13	? problemDetails["title"]
14	: "Error"))
15
16	this.problemDetails = problemDetails
17
18	}
19
20	}

L. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

1	{
2	"compilerOptions": {
3	"checkJs": true,
4	"strictNullChecks": true,
5	"target": "ES6",
6	"module": "Node16",
7	"moduleResolution": "Node16",
8	"lib": [
9	"ES2017",
10	"WebWorker",
11	"DOM"
12	]
18	}

M. Carpeta « errors »

Versión para imprimir.

A. errors / datosnojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Los datos recibidos no están en formato JSON</title>

</head>

<body>

 <h1>Los datos recibidos no están en formato JSON</h1>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Los datos recibidos no están en formato JSON</title>
10
11	</head>
12
13	<body>
14
15	<h1>Los datos recibidos no están en formato JSON</h1>
16
17	</body>
18
19	</html>

B. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Error interno del servidor</title>
10
11	</head>
12
13	<body>
14
15	<h1>Error interno del servidor</h1>
16
17	<p>Se presentó de forma inesperada un error interno del servidor.</p>
18
19	</body>
20
21	</html>

C. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>El resultado no puede representarse como JSON</title>
10
11	</head>
12
13	<body>
14
15	<h1>El resultado no puede representarse como JSON</h1>
16
17	<p>
18	Debido a un error interno del servidor, el resultado generado, no se puede
19	recuperar.
20	</p>
21
22	</body>
23
24	</html>

N. Resumen

En esta lección se mostró un ejemplo que envía JSON a un servicio y, como respuesta, recibe datos JSON de ese mismo servicio.

9. Servicio que procesa una forma

Versión para imprimir.

A. Introducción

Este ejemplo muestra como procesar el contenido de una forma usando servicios.
Puedes probar el ejemplo en http://srvform.rf.gd/.

B. La función `enviaFormRecibeJson`

Se introduce la función enviaFormRecibeJson, que permite enviar los datos capturados en un formulario hacia una URL.
Se utiliza el formato mutipart/form-data, lo cual permite transmitir el contenido de archivos.
Para usarla, debes importar el archivo donde está definida esta función y luego invocarla pasándole la URL del servicio que precesa los datos, el formulario y el método de envío, que por omisión es POST.
A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de esta función.

C. La función `recibeTexto`

Para que los servicios en el servidor puedan recuperar los datos tipo texto enviados por un formulario, por cookies o parámetros en la URL, se introduce la función recibeTexto, escrita en PHP.
Para usarla, debes importarla con require o require_once, invocarla pasándole el nombre del parámetro o campo que deseas leer y recibir el texto resultante. Si el nombre no está incluido en la solicitud, se recibe false.
A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de esta función.

D. Diagrama de despliegue

E. Funcionamiento

Versión para imprimir.

1. El usuario captura datos y activa la forma

Forma

2. Se activa el código del evento submit.

Forma

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/procesa.php", formulario))
const json =
  await respuesta.json()
alert(json)

3. Se invoca el servicio, incluyendo los datos de la forma

Forma

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/procesa.php", formulario))
const json =
  await respuesta.json()
alert(json)

Request

POST /srv/procesa.php HTTP/1.1

Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 236
Content-Type: multipart/form-data;
boundary=----WebKitFormBoundaryVUFwGKBTJiUGOO3V
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ;
__test=6409d42a9d124b0fcecbb489e113453c
Host: srvform.rf.gd
Origin: http://srvform.rf.gd
Referer: http://srvform.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

saludo: hola
nombre: pp

------WebKitFormBoundaryVUFwGKBTJiUGOO3V
Content-Disposition: form-data; name="saludo"

hola
------WebKitFormBoundaryVUFwGKBTJiUGOO3V
Content-Disposition: form-data; name="nombre"

pp
------WebKitFormBoundaryVUFwGKBTJiUGOO3V--

srv/procesa.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Despierta y recibe request.

4. El servicio lee los datos

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/procesa.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/procesa.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Request

POST /srv/procesa.php HTTP/1.1

Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 236
Content-Type: multipart/form-data;
boundary=----WebKitFormBoundaryVUFwGKBTJiUGOO3V
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ;
__test=6409d42a9d124b0fcecbb489e113453c
Host: srvform.rf.gd
Origin: http://srvform.rf.gd
Referer: http://srvform.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

saludo: hola
nombre: pp

Memoria (Servidor)

$saludo: "hola"
$nombre: "pp"

5. El servicio procesa los datos

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/procesa.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/procesa.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$saludo: "hola"
$nombre: "pp"
$resultado: "hola pp"

6. El servicio genera la response

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/procesa.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/procesa.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$saludo: "hola"
$nombre: "pp"
$resultado: "hola pp"

Response

HTTP/1.1 200 OK

Server: openresty
Date: Fri, 02 May 2025 13:14:10 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 13:14:10 GMT

"Hola pp."

7. El servicio devuelve la response, que es recibida en el cliente

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/procesa.php", formulario))
const json =
 await respuesta.json()
alert(json)

Despierta y recibe response.

Response

HTTP/1.1 200 OK

Server: openresty
Date: Fri, 02 May 2025 13:14:10 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 13:14:10 GMT

"Hola pp."

Memoria

respuesta

status: 200
body: "Hola pp."

json

"Hola pp."

srv/procesa.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Devuelve response y se duerme.

8. Muestra el texto recibido en un alert

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/procesa.php", formulario))
const json =
 await respuesta.json()
alert(json)

Memoria

respuesta

status: 200
body: "Hola pp."

json

"Hola pp."

Alert

hola pp

9. Al cerrar el alert, termina el evento

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/procesa.php", formulario))
const json =
 await respuesta.json()
alert(json)

F. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvform.rf.gd/.
Descarga el archivo /src/srvform.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

G. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvform.rf.gd/.
Descarga el archivo /src/srvform.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

H. Archivos

Haz clic en los triángulos para expandir las carpetas

index.html
jsconfig.json
errors
- errorinterno.html
- resultadonojson.html
js
- lib
php
- procesa.php
- lib

I. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Servicio que procesa un formulario</title>

</head>

<body>

 <h1>Servicio que procesa un formulario</h1>

 <form id="formulario">

  <p>
   <label>
    Saludo:
    <!-- Como este input tiene name="saludo", su valor se recupera en el
     servidor con recibeTexto("saludo") -->
    <input name="saludo">
   </label>
  </p>

  <p>
   <label>
    Nombre:
    <!-- Como este input tiene name="nombre", su valor se recupera en el
     servidor con recibeTexto("nombre") -->
    <input name="nombre">
   </label>
  </p>

  <p><button type="submit">Procesa</button></p>

 </form>

 <script type="module">

  import { consume } from "./js/lib/consume.js"
  import { enviaFormRecibeJson } from "./js/lib/enviaFormRecibeJson.js"
  import { muestraError } from "./js/lib/muestraError.js"

  formulario.addEventListener("submit", submit)

  /**
   * @param {Event} event
   */
  async function submit(event) {
   try {
    event.preventDefault()
    const respuesta = await consume(
     enviaFormRecibeJson(
      "php/procesa.php", formulario))
    const json =
     await respuesta.json()
    alert(json)
   } catch (error) {
    muestraError(error)
   }
  }

 </script>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Servicio que procesa un formulario</title>
10
11	</head>
12
13	<body>
14
15	<h1>Servicio que procesa un formulario</h1>
16
17	<form id="formulario">
18
19	<p>
20	<label>
21	Saludo:
22	<!-- Como este input tiene name="saludo", su valor se recupera en el
23	servidor con recibeTexto("saludo") -->
24	<input name="saludo">
25	</label>
26	</p>
27
28	<p>
29	<label>
30	Nombre:
31	<!-- Como este input tiene name="nombre", su valor se recupera en el
32	servidor con recibeTexto("nombre") -->
33	<input name="nombre">
34	</label>
35	</p>
36
37	<p><button type="submit">Procesa</button></p>
38
39	</form>
40
41	<script type="module">
42
43	import { consume } from "./js/lib/consume.js"
44	import { enviaFormRecibeJson } from "./js/lib/enviaFormRecibeJson.js"
45	import { muestraError } from "./js/lib/muestraError.js"
46
47	formulario.addEventListener("submit", submit)
48
49	/**
50	* @param {Event} event
51	*/
52	async function submit(event) {
53	try {
54	event.preventDefault()
55	const respuesta = await consume(
56	enviaFormRecibeJson(
57	"php/procesa.php", formulario))
58	const json =
59	await respuesta.json()
60	alert(json)
61	} catch (error) {
62	muestraError(error)
63	}
64	}
65
66	</script>
67
68	</body>
69
70	</html>

J. Carpeta « php »

Versión para imprimir.

A. php / procesa.php

<?php

require_once __DIR__ . "/lib/recibeTexto.php";
require_once __DIR__ . "/lib/devuelveJson.php";

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
$resultado = "{$saludo} {$nombre}.";
devuelveJson($resultado);


B. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


2. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


3. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

4. php / lib / recibeTexto.php

<?php

/**
 * Devuelve el texto de un parámetro enviado al
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false.
 */
function recibeTexto(string $parametro): false|string
{
 /* Si el parámetro está asignado en $_REQUEST,
  * devuelve su valor; de lo contrario, devuelve false.
  */
 $valor = isset($_REQUEST[$parametro])
  ? $_REQUEST[$parametro]
  : false;
 return $valor;
}


K. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

1	import { ProblemDetailsError } from "./ProblemDetailsError.js"
2
3	/**
4	* Espera a que la promesa de un fetch termine. Si
5	* hay error, lanza una excepción.
6	*
7	* @param {Promise<Response> } servicio
8	*/
9	export async function consume(servicio) {
10	const respuesta = await servicio
11	if (respuesta.ok) {
12	return respuesta
13	} else {
14	const contentType = respuesta.headers.get("Content-Type")
15	if (
16	contentType !== null && contentType.startsWith("application/problem+json")
17	)
18	throw new ProblemDetailsError(await respuesta.json())
19	else
20	throw new Error(respuesta.statusText)
21	}
22	}

2. js / lib / enviaFormRecibeJson.js

/**
 * Envía los datos de un formolario a la url usando la codificación
 * multipart/form-data.
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" },
   body: new FormData(formulario)
  }
 )
}

1	/**
2	* Envía los datos de un formolario a la url usando la codificación
3	* multipart/form-data.
4	* @param {string} url
5	* @param {HTMLFormElement} formulario
6	* @param { "GET" \| "POST"\| "PUT" \| "PATCH" \| "DELETE" \| "TRACE" \| "OPTIONS"
7	* \| "CONNECT" \| "HEAD" } metodoHttp
8	*/
9	export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
10	return fetch(
11	url,
12	{
13	method: metodoHttp,
14	headers: { "Accept": "application/json, application/problem+json" },
15	body: new FormData(formulario)
16	}
17	)
18	}

3. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

1	import { ProblemDetailsError } from "./ProblemDetailsError.js"
2
3	/**
4	* Muestra los datos de una Error en la consola y en un cuadro de alerta.
5	* @param { ProblemDetailsError \| Error \| null } error descripción del error.
6	*/
7	export function muestraError(error) {
8
9	if (error === null) {
10
11	console.error("Error")
12	alert("Error")
13
14	} else if (error instanceof ProblemDetailsError) {
15
16	const problemDetails = error.problemDetails
17
18	let mensaje =
19	typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
20	if (typeof problemDetails["detail"] === "string") {
21	if (mensaje !== "") {
22	mensaje += "\n\n"
23	}
24	mensaje += problemDetails["detail"]
25	}
26	if (mensaje === "") {
27	mensaje = "Error"
28	}
29	console.error(error, problemDetails)
30	alert(mensaje)
31
32	} else {
33
34	console.error(error)
35	alert(error.message)
36
37	}
38
39	}

4. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

1	export class ProblemDetailsError extends Error {
2
3	/**
4	* Detalle de los errores devueltos por un servicio.
5	* Crea una instancia de ProblemDetailsError.
6	* @param {object} problemDetails Objeto con la descripcipon del error.
7	*/
8	constructor(problemDetails) {
9
10	super(typeof problemDetails["detail"] === "string"
11	? problemDetails["detail"]
12	: (typeof problemDetails["title"] === "string"
13	? problemDetails["title"]
14	: "Error"))
15
16	this.problemDetails = problemDetails
17
18	}
19
20	}

L. Carpeta « errors »

Versión para imprimir.

A. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Error interno del servidor</title>
10
11	</head>
12
13	<body>
14
15	<h1>Error interno del servidor</h1>
16
17	<p>Se presentó de forma inesperada un error interno del servidor.</p>
18
19	</body>
20
21	</html>

B. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>El resultado no puede representarse como JSON</title>
10
11	</head>
12
13	<body>
14
15	<h1>El resultado no puede representarse como JSON</h1>
16
17	<p>
18	Debido a un error interno del servidor, el resultado generado, no se puede
19	recuperar.
20	</p>
21
22	</body>
23
24	</html>

M. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

1	{
2	"compilerOptions": {
3	"checkJs": true,
4	"strictNullChecks": true,
5	"target": "ES6",
6	"module": "Node16",
7	"moduleResolution": "Node16",
8	"lib": [
9	"ES2017",
10	"WebWorker",
11	"DOM"
12	]
18	}

N. Resumen

En esta lección se mostró un servicio que procesa una forma.

10. Servicio que valida datos

Versión para imprimir.

A. Introducción

Este ejemplo muestra como validar que los datos recibidos por un formulario sean correctos.
Puedes probar el ejemplo en http://srvvalida.rf.gd/.

B. Diagrama de despliegue

C. Escenario con datos incorrectos

Versión para imprimir.

1. El usuario activa la forma sin capturar datos

Forma

2. Se activa el código del evento submit

Forma

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

3. Se invoca el servicio, incluyendo los datos de la forma

Forma

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Request

POST /srv/valida.php HTTP/1.1

Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 230
Content-Type: multipart/form-data;
boundary=----WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ; __test=6409d42a9d124b0fcecbb489e113453c
Host: srvvalida.rf.gd
Origin: http://srvvalida.rf.gd
Referer: http://srvvalida.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

saludo:
nombre:

------WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Content-Disposition: form-data; name="saludo"

------WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Content-Disposition: form-data; name="nombre"

------WebKitFormBoundaryWv6BXE9Yr1Q8AqnN--

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/errors/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/errors/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Despierta y recibe request.

4. El servicio lee los datos

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/errors/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/errors/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Request

POST /srv/valida.php HTTP/1.1

Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 230
Content-Type: multipart/form-data;
boundary=----WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ; __test=6409d42a9d124b0fcecbb489e113453c
Host: srvvalida.rf.gd
Origin: http://srvvalida.rf.gd
Referer: http://srvvalida.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

saludo:
nombre:

Memoria (Servidor)

$saludo: ""
$nombre: ""

5. El servicio comprueba que el saludo sea válido

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/errors/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/errors/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$saludo: ""
$nombre: ""

6. Como el saludo no es válido, aborta y genera la response

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/errors/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/errors/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Response

HTTP/1.1 400 Bad Request

Server: openresty
Date: Fri, 02 May 2025 13:53:21 GMT
Content-Type: application/problem+json
Transfer-Encoding: chunked
Connection: keep-alive

{"title":"Falta el saludo.","type":"\/errors\/faltasaludo.html"}

7. El servicio devuelve la response, que es recibida en el cliente

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Despierta y recibe response.

Response

HTTP/1.1 400 Bad Request

Server: openresty
Date: Fri, 02 May 2025 13:53:21 GMT
Content-Type: application/problem+json
Transfer-Encoding: chunked
Connection: keep-alive

{"title":"Falta el saludo.","type":"\/errors\/faltasaludo.html"}

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Devuelve response y se duerme.

8. Como hay error, lanza una excepción cuyos detalles se muestran en la consola y en un alert

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Memoria

error

ProblemDetails

status: 400
type: "/errors/faltasaludo.html"
title: "Falta el saludo."

Alert

Falta el saludo

Consola

POST http://srvvalida.rf.gd/php/valida.php 400 (Bad Request) enviaFormRecibeJson.js:10

enviaFormRecibeJson @ enviaFormRecibeJson.js:10
submit @ ?i=1:56

ProblemDetailsError: Falta el saludo. muestraError.js:29
at consume (consume.js:16:10)
at async HTMLFormElement.submit (?i=1:55:22)

{status: 400, title: 'Falta el saludo.', type: '/erros/faltasaludo.html'}

"status": 400
"title": "Falta el saludo."
"type": "/erros/faltasaludo.html"
[[Orototype]]: Object

muestraError @ muestraError.js:29
(anónimo) @ manejaErrores.js:32

9. Al cerrar el alert, termina el evento

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Consola

POST http://srvvalida.rf.gd/php/valida.php 400 (Bad Request) enviaFormRecibeJson.js:10

enviaFormRecibeJson @ enviaFormRecibeJson.js:10
submit @ ?i=1:56

ProblemDetailsError: Falta el saludo. muestraError.js:29
at consume (consume.js:16:10)
at async HTMLFormElement.submit (?i=1:55:22)

{status: 400, title: 'Falta el saludo.', type: '/erros/faltasaludo.html'}

"status": 400
"title": "Falta el saludo."
"type": "/erros/faltasaludo.html"
[[Orototype]]: Object

muestraError @ muestraError.js:29
(anónimo) @ manejaErrores.js:32

D. Escenario con datos correctos

Versión para imprimir.

1. El usuario captura datos y activa la forma

Forma

2. Se activa el código del evento submit.

Forma

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

3. Se invoca el servicio, incluyendo los datos de la forma

Forma

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
 "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Request

POST /srv/valida.php HTTP/1.1

Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 236
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryFZzsTiGaX53RKhff
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ; __test=6409d42a9d124b0fcecbb489e113453c
Host: srvvalida.rf.gd
Origin: http://srvvalida.rf.gd
Referer: http://srvvalida.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

saludo: hola
nombre: pp

------WebKitFormBoundaryFZzsTiGaX53RKhff
Content-Disposition: form-data; name="saludo"

hola
------WebKitFormBoundaryFZzsTiGaX53RKhff
Content-Disposition: form-data; name="nombre"

pp
------WebKitFormBoundaryFZzsTiGaX53RKhff--

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Despierta y recibe request.

4. El servicio lee los datos

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Request

POST /srv/valida.php HTTP/1.1

Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 236
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryFZzsTiGaX53RKhff
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ; __test=6409d42a9d124b0fcecbb489e113453c
Host: srvvalida.rf.gd
Origin: http://srvvalida.rf.gd
Referer: http://srvvalida.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

saludo: hola
nombre: pp

Memoria (Servidor)

$saludo: "hola"
$nombre: "pp"

5. El servicio comprueba que el saludo sea válido

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$saludo: "hola"
$nombre: "pp"

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$saludo: "hola"
$nombre: "pp"

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$saludo: "hola"; "pp"
$resultado: "hola pp"

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$saludo: "hola"
$nombre: "pp"
$resultado: "hola pp"

Response

HTTP/1.1 200 OK

Server: openresty
Date: Fri, 02 May 2025 14:52:14 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 14:52:14 GMT

"Hola pp."

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Despierta y recibe response.

Response

HTTP/1.1 200 OK

Server: openresty
Date: Fri, 02 May 2025 14:52:14 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 14:52:14 GMT

"Hola pp."

Memoria

respuesta

status: 200
body: "Hola pp."

json

"Hola pp."

srv/valida.php

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Devuelve response y se duerme.

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

Memoria

respuesta

status: 200
body: "Hola pp."

json

"Hola pp."

index.html

const respuesta = await consume(
 enviaFormRecibeJson(
  "php/valida.php", formulario))
const json =
 await respuesta.json()
alert(json)

E. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvvalida.rf.gd/.
Descarga el archivo /src/srvvalida.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

F. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvvalida.rf.gd/.
Descarga el archivo /src/srvvalida.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

H. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Servicio que valida datos</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Servicio que valida datos</h1>

 <form id="formulario">

  <p>
   <label>
    Saludo:
    <!-- Como este input tiene name="saludo", su valor se recupera en el
     servidor con recibeTexto("saludo") -->
    <input name="saludo">
   </label>
  </p>

  <p>
   <label>
    Nombre:
    <!-- Como este input tiene name="nombre", su valor se recupera en el
     servidor con recibeTexto("nombre") -->
    <input name="nombre">
   </label>
  </p>

  <p><button type="submit">Procesa</button></p>

 </form>

 <script type="module">

  import { consume } from "./js/lib/consume.js"
  import { enviaFormRecibeJson } from "./js/lib/enviaFormRecibeJson.js"

  formulario.addEventListener("submit", submit)

  /**
   * @param {Event} event
   */
  async function submit(event) {
   event.preventDefault()
   const respuesta = await consume(
    enviaFormRecibeJson(
     "php/valida.php", formulario))
   const json =
    await respuesta.json()
   alert(json)
  }

 </script>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Servicio que valida datos</title>
10
11	<script type="module" src="js/lib/manejaErrores.js"></script>
12
13	</head>
14
15	<body>
16
17	<h1>Servicio que valida datos</h1>
18
19	<form id="formulario">
20
21	<p>
22	<label>
23	Saludo:
24	<!-- Como este input tiene name="saludo", su valor se recupera en el
25	servidor con recibeTexto("saludo") -->
26	<input name="saludo">
27	</label>
28	</p>
29
30	<p>
31	<label>
32	Nombre:
33	<!-- Como este input tiene name="nombre", su valor se recupera en el
34	servidor con recibeTexto("nombre") -->
35	<input name="nombre">
36	</label>
37	</p>
38
39	<p><button type="submit">Procesa</button></p>
40
41	</form>
42
43	<script type="module">
44
45	import { consume } from "./js/lib/consume.js"
46	import { enviaFormRecibeJson } from "./js/lib/enviaFormRecibeJson.js"
47
48	formulario.addEventListener("submit", submit)
49
50	/**
51	* @param {Event} event
52	*/
53	async function submit(event) {
54	event.preventDefault()
55	const respuesta = await consume(
56	enviaFormRecibeJson(
57	"php/valida.php", formulario))
58	const json =
59	await respuesta.json()
60	alert(json)
61	}
62
63	</script>
64
65	</body>
66
67	</html>

I. Carpeta « php »

Versión para imprimir.

A. php / valida.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/BAD_REQUEST.php";
require_once __DIR__ . "/lib/recibeTexto.php";
require_once __DIR__ . "/lib/ProblemDetailsException.php";
require_once __DIR__ . "/lib/devuelveJson.php";

$saludo = recibeTexto("saludo");
$nombre = recibeTexto("nombre");

if (
 $saludo === false
 || $saludo === ""
)
 throw new ProblemDetailsException([
  "status" => BAD_REQUEST,
  "title" => "Falta el saludo.",
  "type" => "/erros/faltasaludo.html"
 ]);

if (
 $nombre === false
 || $nombre === ""
)
 throw new ProblemDetailsException([
  "status" => BAD_REQUEST,
  "title" => "Falta el nombre.",
  "type" => "/errors/faltanombre.html"
 ]);

$resultado = "{$saludo} {$nombre}.";

devuelveJson($resultado);


B. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


3. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


4. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

5. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


6. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


7. php / lib / recibeJson.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";

function recibeJson()
{
 $json = json_decode(file_get_contents("php://input"));

 if ($json === null) {

  http_response_code(BAD_REQUEST);
  header("Content-Type: application/problem+json; charset=utf-8");

  echo '{' .
   "status: " . BAD_REQUEST .
   '"title": "Los datos recibidos no están en formato JSON."' .
   '"type": "/errors/datosnojson.html"' .
   '}';

  exit();
 }

 return $json;
}


8. php / lib / recibeTexto.php

<?php

/**
 * Devuelve el texto de un parámetro enviado al
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false.
 */
function recibeTexto(string $parametro): false|string
{
 /* Si el parámetro está asignado en $_REQUEST,
  * devuelve su valor; de lo contrario, devuelve false.
  */
 $valor = isset($_REQUEST[$parametro])
  ? $_REQUEST[$parametro]
  : false;
 return $valor;
}


J. Carpeta « errors »

Versión para imprimir.

A. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

B. errors / faltanombre.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta el nombre</title>

</head>

<body>

 <h1>Falta el nombre</h1>

</body>

</html>

C. errors / faltasaludo.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta el saludo</title>

</head>

<body>

 <h1>Falta el saludo</h1>

</body>

</html>

D. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

K. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

2. js / lib / datosnojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Los datos recibidos no están en formato JSON</title>

</head>

<body>

 <h1>Los datos recibidos no están en formato JSON</h1>

</body>

</html>

3. js / lib / enviaFormRecibeJson.js

/**
 * Envía los datos de un formolario a la url usando la codificación
 * multipart/form-data.
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" },
   body: new FormData(formulario)
  }
 )
}

4. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


5. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

6. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

L. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

M. Resumen

En esta lección se mostró un servicio que procesa una forma y valida los datos de entrada..

11. Ejemplo de geolocalización

Ábrelo en otra pestaña.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">
 <title>Maps</title>
</head>

<body>
 <h1>Maps</h1>
 <iframe
   src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7526.355841517565!2d-98.98640932835467!3d19.40471709504528!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1e319b9413c4f%3A0x1d391ad53ddf65d1!2sUniversidad%20Tecnol%C3%B3gica%20de%20Nezahualc%C3%B3yotl!5e0!3m2!1ses-419!2smx!4v1574352931317!5m2!1ses-419!2smx"
   width="600" height="450" frameborder="0" style="border:0;"
   allowfullscreen=""></iframe>
</body>

</html>

12. Ejemplo de redes sociales

Generado en https://developers.facebook.com/docs/plugins/page-plugin/

Ábrelo en otra pestaña.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Face</title>
</head>

<body>
 <h1>Face</h1>
 <iframe
   src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=437040163649483"
   width="340" height="500"
   style="border:none;overflow:hidden"
   scrolling="no" frameborder="0"
   allowTransparency="true"
   allow="encrypted-media"></iframe>
</body>

</html>

13. Ejemplo de streaming

Ábrelo en otra pestaña.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>YouTube</title>
</head>

<body>
 <h1>YouTube</h1>
 <iframe width="560" height="315"
   src="https://www.youtube.com/embed/eB6txyhHFG4?si=u6wVhxbxBNSVtKFA"
   title="YouTube video player" frameborder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
   referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>

</html>

14. Mostrar datos en el cliente

Versión para imprimir.

A. Introducción

En esta lección se presenta un ejemplo que muestra los datos devueltos por un servicio.
Puedes probar el ejemplo en http://srvmuestra.rf.gd/.

B. Diagrama de despliegue

C. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvmuestra.rf.gd/.
Descarga el archivo /src/srvmuestra.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

D. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvmuestra.rf.gd/.
Descarga el archivo /src/srvmuestra.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

E. Archivos

Haz clic en los triángulos para expandir las carpetas

index.html
jsconfig.json
errors
- errorinterno.html
- resultadonojson.html
js
- lib
php
- datos.php
- lib

F. index.html

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Muestra datos</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Muestra datos</h1>

 <!-- Al mostrar un dato, se usan los atributos "id", "name" o "data-name"
  para buscar la propiedad a desplegar en la página. -->

 <p>
  <label>
   Nombre
   <!-- Muestra la propiedad nombre del objeto descargado, usando la propiedad
    value del output. -->
   <output name="nombre"></output>
  </label>
 </p>

 <p>
  <label>
   Apellido
   <!-- Muestra la propiedad apellido del objeto descargado, usando la propiedad
    value del input. -->
   <input name="apellido" type="text">
  </label>
 </p>

 <p>
  <label>
   Género
   <!-- Muestra la propiedad genero del objeto descargado, usando la propiedad
    value del select. -->
   <select name="genero">
    <option value="">Sin selección</option>
    <option value="pop">Pop</option>
    <option value="reg">Reguetón</option>
   </select>
  </label>
 </p>

 <p>
  <label>
   Géneración
   <!-- Muestra la propiedad generacion del objeto descargado, usando la
    propiedad value del select. -->
   <select name="generacion">
    <option value="boom">Baby Boom</option>
    <option value="X">X</option>
    <option value="">Sin selección</option>
    <option value="Y">Millenoals</option>
    <option value="Z">Z</option>
    <option value="alfa">Alfa</option>
   </select>
  </label>
 </p>

 <p>
  <label>
   Edad
   <!-- Muestra la propiedad edad del objeto descargado, usando la propiedad
    valueAsNumber del input. -->
   <input data-name="edad" type="number">
  </label>
 </p>

 <p>
  <label>
   Número de la suerte
   <!-- Muestra la propiedad numero del objeto descargado, usando la propiedad
    value del output. -->
   <output id="numero"></output>
  </label>
 </p>

 <p>
  <label>
   Avance
   <!-- Muestra la propiedad avance del objeto descargado, usando la propiedad
    value del progress. -->
   <progress id="avance" max="100"></progress>
  </label>
 </p>

 <p>
  <label>
   Capacidad
   <!-- Muestra la propiedad capacidad del objeto descargado, usando la
    propiedad value del meter. -->
   <meter id="capacidad" min="50" max="80"></meter>
  </label>
 </p>

 <p>
  <label>
   Temperatura
   <!-- Muestra la propiedad temperatura del objeto descargado, usando la
    propiedad valueAsNumber del meter. -->
   <input id="temperatura" type="range" min="0" max="50">
  </label>
 </p>

 <p>
  <label>
   <!-- Muestra la propiedad aprobado del objeto descargado, usando la propiedad
    checked del input, porque el tipo del dato es boolean y el input tiene
    type="checkbox". -->
   <input id="aprobado" type="checkbox">
   Aprobado
  </label>
 </p>

 <p>
  <label>
   Gracioso
   <!-- Muestra la propiedad gracioso del objeto descargado, usando la propiedad
    value del output. -->
   <output id="gracioso"></output>
  </label>
 </p>

 <p>
  <label>
   Emplacado
   <!-- Muestra la propiedad emplacado del objeto descargado, usando la
    propiedad value del select. -->
   <select name="emplacado">
    <option value="">Sin selección</option>
    <option value="true">Si</option>
    <option value="false">No</option>
   </select>
  </label>
 </p>

 <label>Dirección</label>
 <!-- Muestra la propiedad direccion del objeto descargado, usando la propiedad
  textContent del pre. -->
 <pre id="direccion"></pre>

 <p>
  <label>
   Encabezado
   <!-- Muestra la propiedad encabezado del objeto descargado, usando la
    propiedad innerHTML del span. -->
   <span id="encabezado"></span>
  </label>
 </p>

 <p>
  <label>
   Nacimiento
   <!-- Muestra la propiedad nacimiento del objeto descargado, usando la
    propiedad value del input. Revisa la especificación de input para
    los distintos formatos de fecha que se pueden usar. -->
   <input id="nacimiento" type="date">
  </label>
 </p>

 <figure>
  <!-- Muestra la propiedad imagen1 del objeto descargado, usando la propiedad
   src del img. -->
  <img id="imagen1" alt="Imagen 2">
  <figcaption>Imagen 1</figcaption>
 </figure>

 <figure>
  <!-- Muestra la propiedad imagen2 del objeto descargado, usando la propiedad
   src del img. Como el valor es "", se oculta el img usando hidden = true. -->
  <img id="imagen2" alt="Imagen 2">
  <figcaption>Imagen 2</figcaption>
 </figure>

 <!-- Muestra la propiedad pasatiempos[] del objeto descargado; como es un
   array, usa los elementos con name="pasatiempos[]" y les pone la propiedad
   checked en true si su value está en el array; de lo contrario se las pone en
   false. Los corchetes([]), le indican a PHP que la propiedad es un array
   que puede llegar a tener 0, 1 o más elementos. -->
 <fieldset>
  <legend>Pasatiempos</legend>
  <label>
   <input type="checkbox" name="pasatiempos[]" value="fut">Futbol
  </label>
  <label>
   <input type="checkbox" name="pasatiempos[]" value="chess">Ajedrez
  </label>
  <label>
   <input type="checkbox" data-name="pasatiempos[]" value="basket">Basketbol
  </label>
 </fieldset>

 <!-- Muestra la propiedad madrugador del objeto descargado; como es un
   array, usa los elementos con name="madrugador" y les pone la propiedad
   checked en true si su value está en el array; de lo contrario se las pone en
   false. Como el name no tiene [], el array solo tiene 0 o un elemento. -->
 <fieldset>
  <legend>Madrugador</legend>
  <label><input type="radio" name="madrugador" value="si">Si</label>
  <label><input type="radio" name="madrugador" value="no">No</label>
 </fieldset>

 <p>
  <label>
   Patos
   <!-- Muestra la propiedad patos del objeto descargado; como es un
     array, usa los las opciones del select con name="patos[]" y les pone la
     propiedad selected en true si su value está en el array; de lo contrario se
     las pone en false.  Los corchetes([]), le indican a PHP que la propiedad es
     un array que puede llegar a tener 0, 1 o más elementos. -->
   <select name="patos[]" multiple size="3">
    <option value="hugo">Hugo</option>
    <option value="paco">Paco</option>
    <option value="luis">Luis</option>
   </select>
  </label>
 </p>
</body>

<script type="module">

 import { consume } from "./js/lib/consume.js"
 import { recibeJson } from "./js/lib/recibeJson.js"
 import { muestraObjeto } from "./js/lib/muestraObjeto.js"

 descargaDatos()

 async function descargaDatos() {
  const respuesta = await consume(recibeJson("php/datos.php"))
  const json = await respuesta.json()
  muestraObjeto(document, json)
 }

</script>

</html>

G. Carpeta « php »

Versión para imprimir.

A. php / datos.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";

devuelveJson([
 "nombre" => ["value" => "pp"],
 "apellido" => ["value" => "tkt"],
 "genero" => ["value" => "pop"],
 "generacion" => ["value" => ""],
 "edad" => ["valueAsNumber" => 18],
 "numero" => ["value" => 5],
 "avance" => ["value" => 70],
 "capacidad" => ["value" => 60],
 "temperatura" => ["valueAsNumber" => 40],
 "aprobado" => ["checked" => true],
 "gracioso" => ["value" => false],
 "emplacado" => ["value" => false],
 "direccion" => ["textContent" => "Girasoles 23\ncolonia Rosales"],
 "encabezado" => ["innerHTML" => "<em>Hola, soy <strong>pp</strong>"],
 "nacimiento" => ["value" => "2000-07-04"],
 "imagen1" => [
  "src" => "https://gilpgawoas.github.io/img/icono/maskable_icon_x48.png"
 ],
 "imagen2" => ["src" => "", "hidden" => true],
 "pasatiempos[]" => ["fut", "basket"],
 "madrugador" => ["no"],
 "patos[]" => ["paco", "luis"],
]);


B. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


2. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


3. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

4. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";



// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


5. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


H. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

2. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


3. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

4. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const data_Length = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > data_Length
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(data_Length)] = valor
   }
  }
 }
}

5. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

6. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

I. Carpeta « errors »

Versión para imprimir.

A. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

B. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

J. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

K. Resumen

En esta lección se indica como mostrar en el cliente los datos devueltos por un servicio.

15. Renderizado del lado del cliente

Versión para imprimir.

A. Introducción

Para algunas partes de una página no hay componentes gráficos que puedan mostrar valores, como en el caso de los listados. En ese caso se tiene que generar el código HTM desde el programa, proceso que se conoce como renderizado.
En esta lección se presenta un ejemplo de renderizado en el cliente.
Puedes probar el ejemplo en http://rendercli.rf.gd/.

B. Diagrama de despliegue

C. Hazlo funcionar (con videos)

Prueba el ejemplo en http://rendercli.rf.gd/.
Descarga el archivo /src/rendercli.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

D. Hazlo funcionar (texto)

Prueba el ejemplo en http://rendercli.rf.gd/.
Descarga el archivo /src/rendercli.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

E. Archivos

Haz clic en los triángulos para expandir las carpetas

index.html
jsconfig.json
errors
- errorinterno.html
- resultadonojson.html
js
- lib
php
- lista.php
- lib

F. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Render en el cliente</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Render en el cliente</h1>

 <dl id="lista">
  <dt>Cargando…</dt>
  <dd><progress max="100">Cargando…</progress></dd>
 </dl>

 <script type="module">

  import { consume } from "./js/lib/consume.js"
  import { recibeJson } from "./js/lib/recibeJson.js"
  import { htmlentities } from "./js/lib/htmlentities.js"

  descargaDatos()

  async function descargaDatos() {
  const respuesta = await consume(recibeJson("php/lista.php"))
  const json = await respuesta.json()
    // Genera el código HTML de la lista.
    let render = ""
    for (const modelo of json) {
     /* Codifica nombre y color para que cambie los caracteres especiales y
      * el texto no se pueda interpretar como HTML. Esta técnica evita la
      * inyección de código. */
     const nombre =
      typeof modelo.nombre === "string" ? htmlentities(modelo.nombre) : ""
     const color =
      typeof modelo.color === "string" ? htmlentities(modelo.color) : ""
     render += /* html */
      `<dt>${nombre}</dt>
       <dd>${color}</dd>`
    }
    lista.innerHTML = render
  }

 </script>

</body>

</html>

G. Carpeta « php »

Versión para imprimir.

A. php / lista.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";

devuelveJson([
 [
  "nombre" => "pp",
  "color" => "azul"
 ],
 [
  "nombre" => "kq",
  "color" => "rojo"
 ],
 [
  "nombre" => "tt",
  "color" => "rosa"
 ],
 [
  "nombre" => "bb",
  "color" => "azul"
 ]
]);


B. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


2. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


3. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

4. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


5. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


H. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

2. js / lib / htmlentities.js

/**
 * Codifica un texto para que cambie los caracteres
 * especiales y no se pueda interpretar como
 * etiiqueta HTML. Esta técnica evita la inyección
 * de código.
 * @param { string } texto
*/
export function htmlentities(texto) {
 return texto.replace(/[<>"']/g, textoDetectado => {
  switch (textoDetectado) {
   case "<": return "<"
   case ">": return ">"
   case '"': return """
   case "'": return "'"
   default: return textoDetectado
  }
 })
}


3. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


4. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

5. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

6. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

I. Carpeta « errors »

Versión para imprimir.

A. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

B. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

J. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

K. Resumen

En esta lección se mostró un ejemplo de renderizado en el cliente.

16. Renderizado del lado del servidor

Versión para imprimir.

A. Introducción

Para algunas partes de una página no hay componentes gráficos que puedan mostrar valores, como en el caso de los listados. En ese caso se tiene que generar el código HTM desde el programa, proceso que se conoce como renderizado.
En esta lección se presenta un ejemplo de renderizado en el servidor.
Puedes probar el ejemplo en http://renderserv.rf.gd/.

B. Diagrama de despliegue

C. Hazlo funcionar (con videos)

Prueba el ejemplo en http://renderserv.rf.gd/.
Descarga el archivo /src/renderserv.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

D. Hazlo funcionar (texto)

Prueba el ejemplo en http://renderserv.rf.gd/.
Descarga el archivo /src/renderserv.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

E. Archivos

Haz clic en los triángulos para expandir las carpetas

index.html
jsconfig.json
errors
- errorinterno.html
- resultadonojson.html
js
- lib
php
- render.php
- lib

F. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Render en el servidor</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Render en el servidor</h1>

 <dl id="lista">
  <dt>Cargando…</dt>
  <dd><progress max="100">Cargando…</progress></dd>
 </dl>

 <script type="module">

  import { consume } from "./js/lib/consume.js"
  import { recibeJson } from "./js/lib/recibeJson.js"
  import { muestraObjeto } from "./js/lib/muestraObjeto.js"

  descargaDatos()

  async function descargaDatos() {
   const respuesta = await consume(recibeJson("php/render.php"))
   const json = await respuesta.json()
   muestraObjeto(document, json)
  }

 </script>

</body>

</html>

G. Carpeta « php »

Versión para imprimir.

A. php / render.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";

$lista = [
 [
  "nombre" => "pp",
  "color" => "azul"
 ],
 [
  "nombre" => "qk",
  "color" => "rojo"
 ],
 [
  "nombre" => "tt",
  "color" => "rosa"
 ],
 [
  "nombre" => "bb",
  "color" => "azul"
 ]
];

// Genera el código HTML de la lista.
$render = "";
foreach ($lista as $modelo) {
 /* Codifica nombre y color para que cambie los caracteres
   * especiales y el texto no se pueda interpretar como HTML.
   * Esta técnica evita la inyección de código. */
 $nombre = htmlentities($modelo["nombre"]);
 $color = htmlentities($modelo["color"]);
 $render .=
  "<dt>{$nombre}</dt>
    <dd>{$color}</dd>";
}

devuelveJson(["lista" => ["innerHTML" => $render]]);


B. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


2. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


3. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

4. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


5. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


H. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

2. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


3. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

4. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const data_Length = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > data_Length
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(data_Length)] = valor
   }
  }
 }
}

5. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

6. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

I. Carpeta « errors »

Versión para imprimir.

A. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

B. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

J. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

K. Resumen

En esta lección se mostró un ejemplo de renderizado en el servidor.

17. Bases de datos

Versión para imprimir.

A. Introducción

En esta lección se muestra el acceso a bases de datos con servicios.
Puedes probar el ejemplo en http://srvbd.rf.gd/.

B. Diagrama entidad relación

C. Diagrama relacional

D. Diagrama de despliegue

E. Hazlo funcionar (con videos)

Prueba el ejemplo en a http://srvbd.rf.gd/.
Descarga el archivo /src/srvbd.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

F. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvbd.rf.gd/.
Descarga el archivo /src/srvbd.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

G. Archivos

Haz clic en los triángulos para expandir las carpetas

H. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Acceso a base de datos</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body">

 <h1>Acceso a base de datos</h1>

 <p><a href="agrega.html">Agregar</a></p>

 <ul id="lista">
  <li><progress max="100">Cargando…</progress></li>
 </ul>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"

  descargaVista("php/pasatiempo-vista-index.php")

 </script>

 </body>

</html>

I. agrega.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Agregar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Agregar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <p>
   <label>
    Nombre *
    <input name="nombre">
   </label>
  </p>

  <p>* Obligatorio</p>

  <p><button type="submit">Agregar</button></p>

 </form>

 <script type="module">

  import { submitAccion } from "./js/lib/submitAccion.js"

  formulario.addEventListener(
   "submit",
   event => submitAccion(
    event, "php/pasatiempo-agrega.php", formulario, "index.html"
   )
  )

 </script>

</body>

</html>

J. modifica.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Modificar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Modificar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <input name="id" type="hidden">

  <p>
   <label>
    Nombre *
    <input name="nombre" value="Cargando…">
   </label>
  </p>

  <p>* Obligatorio</p>

  <p>

   <button type="submit">Guardar</button>

   <button id="botonEliminar" type="button">
    Eliminar
   </button>

  </p>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { submitAccion } from "./js/lib/submitAccion.js"
  import { accionElimina } from "./js/lib/accionElimina.js"

  // Obtiene los parámetros de la página.
  const params = new URL(location.href).searchParams
  descargaDatos()

  async function descargaDatos() {

   if (params.size > 0) {

    await descargaVista("php/pasatiempo-vista-modifica.php?" + params)

    formulario.addEventListener(
     "submit",
     event => submitAccion(
      event, "php/pasatiempo-modifica.php", formulario, "index.html"
     )
    )

    botonEliminar.addEventListener(
     "click",
     () => accionElimina(
      "php/pasatiempo-elimina.php",
      formulario,
      "Confirma la eliminación",
      "index.html"
     )
    )

   }

  }

 </script>

</body>

</html>

K. Carpeta « php »

Versión para imprimir.

A. php / Bd.php

<?php

class Bd
{
 private static ?PDO $pdo = null;

 static function pdo(): PDO
 {
  if (self::$pdo === null) {

   self::$pdo = new PDO(
    // cadena de conexión
    "sqlite:" . __DIR__ . "/srvbd.db",
    // usuario
    null,
    // contraseña
    null,
    // Opciones: pdos no persistentes y lanza excepciones.
    [PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
   );

   self::$pdo->exec(
    "CREATE TABLE IF NOT EXISTS PASATIEMPO (
      PAS_ID INTEGER,
      PAS_NOMBRE TEXT NOT NULL,
      CONSTRAINT PAS_PK
       PRIMARY KEY(PAS_ID),
      CONSTRAINT PAS_NOM_UNQ
       UNIQUE(PAS_NOMBRE),
      CONSTRAINT PAS_NOM_NV
       CHECK(LENGTH(PAS_NOMBRE) > 0)
     )"
   );
  }

  return self::$pdo;
 }
}


B. php / pasatiempo-agrega.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/devuelveCreated.php";
require_once __DIR__ . "/Bd.php";

$nombre = recibeTextoObligatorio("nombre");

$bd = Bd::pdo();
$stmt = $bd->prepare(
 "INSERT INTO PASATIEMPO (
    PAS_NOMBRE
   ) values (
    :PAS_NOMBRE
   )"
);
$stmt->execute([
 ":PAS_NOMBRE" => $nombre
]);
$id = $bd->lastInsertId();

$encodeId = urlencode($id);
devuelveCreated(
 "/php/pasatiempo-vista-modifica.php?id=$encodeId",
 [
  "id" => ["value" => $id],
  "nombre" => ["value" => $nombre],
 ]
);


C. php / pasatiempo-elimina.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/devuelveNoContent.php";
require_once __DIR__ . "/Bd.php";

$id = recibeEnteroObligatorio("id");

$bd = Bd::pdo();
$stmt = $bd->prepare("DELETE FROM PASATIEMPO WHERE PAS_ID = :PAS_ID");
$stmt->execute([":PAS_ID" => $id]);

devuelveNoContent();


D. php / pasatiempo-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";

$id = recibeEnteroObligatorio("id");
$nombre = recibeTextoObligatorio("nombre");

$bd = Bd::pdo();
$stmt = $bd->prepare(
 "UPDATE PASATIEMPO
   SET
    PAS_NOMBRE = :PAS_NOMBRE
   WHERE
    PAS_ID = :PAS_ID"
);
$stmt->execute([
 ":PAS_NOMBRE" => $nombre,
 ":PAS_ID" => $id,
]);

devuelveJson([
 "id" => ["value" => $id],
 "nombre" => ["value" => $nombre],
]);


E. php / pasatiempo-vista-index.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";

$bd = Bd::pdo();
$stmt = $bd->query(
 "SELECT PAS_ID, PAS_NOMBRE FROM PASATIEMPO ORDER BY PAS_NOMBRE"
);
$lista = $stmt->fetchAll(PDO::FETCH_ASSOC);

$render = "";
foreach ($lista as $modelo) {
 $encodeId = urlencode($modelo["PAS_ID"]);
 $id = htmlentities($encodeId);
 $nombre = htmlentities($modelo["PAS_NOMBRE"]);
 $render .=
  "<li>
     <p>
      <a href='modifica.html?id=$id'>$nombre</a>
     </p>
    </li>";
}

devuelveJson(["lista" => ["innerHTML" => $render]]);


F. php / pasatiempo-vista-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";

$id = recibeEnteroObligatorio("id");

$bd = Bd::pdo();
$stmt = $bd->prepare("SELECT * FROM PASATIEMPO WHERE PAS_ID = :PAS_ID");
$stmt->execute([":PAS_ID" => $id]);
$modelo = $stmt->fetch(PDO::FETCH_ASSOC);

$modelo = validaEntidadObligatoria("Pasatiempo",  $modelo);

devuelveJson([
 "id" => ["value" => $id],
 "nombre" => ["value" => $modelo["PAS_NOMBRE"]],
]);


G. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveCreated.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveCreated($urlDelNuevo, $resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(201);
  header("Location: $urlDelNuevo");
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
}


3. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


4. php / lib / devuelveNoContent.php

<?php

function devuelveNoContent()
{
 http_response_code(204);
}


5. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


6. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

7. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


8. php / lib / NOT_FOUND.php


1	<?php
2
3	const NOT_FOUND = 404;
4

9. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


10. php / lib / recibeEntero.php

<?php

require_once __DIR__ . "/recibeTexto.php";

/**
 * Devuelve el valor entero de un parámetro recibido en el
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false
 *
 * Si se recibe una cadena vacía, se devuelve null.
 * 
 * Si parámetro no se puede convertir a entero, se genera
 * un error.
 */
function recibeEntero(string $parametro): false|null|int
{
 $valor = recibeTexto($parametro);
 if ($valor === false) {
  return false;
 } else {
  $valor = trim($valor);
  if ($valor === "") {
   return null;
  } else {
   return (int) $valor;
  }
 }
}


11. php / lib / recibeEnteroObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeEntero.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeEnteroObligatorio(string $parametro)
{
 $entero = recibeEntero($parametro);

 if ($entero === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 if ($entero === null)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenteroenblanco.html",
   "detail" => "Pon un número entero en el campo $parametro."
  ]);

 return $entero;
}


12. php / lib / recibeTexto.php

<?php

/**
 * Devuelve el texto de un parámetro enviado al
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false.
 */
function recibeTexto(string $parametro): false|string
{
 /* Si el parámetro está asignado en $_REQUEST,
  * devuelve su valor; de lo contrario, devuelve false.
  */
 $valor = isset($_REQUEST[$parametro])
  ? $_REQUEST[$parametro]
  : false;
 return $valor;
}


13. php / lib / recibeTextoObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeTexto.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeTextoObligatorio(string $parametro)
{
 $texto = recibeTexto($parametro);

 if ($texto === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 $trimTexto = trim($texto);

 if ($trimTexto === "")
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenblanco.html",
   "detail" => "Pon texto en el campo $parametro."
  ]);

 return $trimTexto;
}


14. php / lib / validaEntidadObligatoria.php

<?php

require_once __DIR__ . "/NOT_FOUND.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function validaEntidadObligatoria(string $nombre,  $entidad)
{

 if ($entidad === false)
  throw new ProblemDetailsException([
  "status" => NOT_FOUND,
  "title" => "Registro de $nombre no encontrado.",
  "type" => "/errors/entidadnoencontrada.html",
  "detail" => "No se encontró ningún registro de $nombre con el id solicitado.",
  ]);

 return $entidad;
}


L. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / accionElimina.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} mensaje
 * @param {string} nuevaVista
 */
export async function accionElimina(url, formulario, mensaje, nuevaVista) {
 if (confirm(mensaje)) {
  await consume(enviaFormRecibeJson(url, formulario))
  location.href = nuevaVista
 }
}

2. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

3. js / lib / descargaVista.js

import { consume } from "./consume.js"
import { muestraObjeto } from "./muestraObjeto.js"
import { recibeJson } from "./recibeJson.js"

/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function descargaVista(url, metodoHttp = "GET") {
 const respuesta = await consume(recibeJson(url, metodoHttp))
 const json = await respuesta.json()
 muestraObjeto(document, json)
 return json
}

4. js / lib / enviaFormRecibeJson.js

/**
 * Envía los datos de un formolario a la url usando la codificación
 * multipart/form-data.
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" },
   body: new FormData(formulario)
  }
 )
}

5. js / lib / index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Render en el cliente</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Render en el cliente</h1>

 <dl id="lista">
  <dt>Cargando…</dt>
  <dd><progress max="100">Cargando…</progress></dd>
 </dl>

 <script type="module">

  import { consume } from "./js/lib/consume.js"
  import { recibeJson } from "./js/lib/recibeJson.js"
  import { htmlentities } from "./js/lib/htmlentities.js"

  descargaDatos()

  async function descargaDatos() {
  const respuesta = await consume(recibeJson("php/lista.php"))
  const json = await respuesta.json()
    // Genera el código HTML de la lista.
    let render = ""
    for (const modelo of json) {
     /* Codifica nombre y color para que cambie los caracteres especiales y
      * el texto no se pueda interpretar como HTML. Esta técnica evita la
      * inyección de código. */
     const nombre =
      typeof modelo.nombre === "string" ? htmlentities(modelo.nombre) : ""
     const color =
      typeof modelo.color === "string" ? htmlentities(modelo.color) : ""
     render += /* html */
      `<dt>${nombre}</dt>
       <dd>${color}</dd>`
    }
    lista.innerHTML = render
  }

 </script>

</body>

</html>

6. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


7. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

8. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const data_Length = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > data_Length
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(data_Length)] = valor
   }
  }
 }
}

9. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

10. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

11. js / lib / submitAccion.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {Event} event
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} nuevaVista
 */
export async function submitAccion(event, url, formulario, nuevaVista) {
 event.preventDefault()
 await consume(enviaFormRecibeJson(url, formulario))
 location.href = nuevaVista
}

M. Carpeta « errors »

Versión para imprimir.

A. errors / campoenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo en blanco</title>

</head>

<body>

 <h1>Campo en blanco</h1>

 <p>Pon texto en el campo obligatorio que está en blanco.</p>

</body>

</html>

B. errors / campoenteroenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo entero en blanco</title>

</head>

<body>

 <h1>Campo entero en blanco</h1>

 <p>
  Pon un número entero en el campo que pide un valor entero obligatorio y está
  en blanco.
 </p>

</body>

</html>

C. errors / entidadnoencontrada.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Registro no encontrado</title>

</head>

<body>

 <h1>Registro no encontrado</h1>

 <p>No se encontró ningún registro con el id solicitado.</p>

</body>

</html>

D. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

E. errors / faltavalor.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta un valor</title>

</head>

<body>

 <h1>Falta un valor</h1>

 <p>La solicitud no tiene un valor obligatorio.</p>

</body>

</html>

F. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

N. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

O. Resumen

En esta lección se mostró el acceso a bases de datos con servicios.

18. Pruebas

Versión para imprimir.

A. Introducción

En esta lección se muestra como probar una aplicación web.

B. Pruebas de rendimiento y soporte de estándares

Lighthouse es una herramienta automatizada para mejorar el rendimiento, calidad y corrección de aplicaciones web.
Video sobre el uso de Lighthouse.

C. PHPUnit

Versión para imprimir.

1. introducción

Las pruebas de unidad permiten asegurar que una parte del código cumple correctamente con sus funciones.
A continuación se muestra como realizar pruebas del servidor con PHPunit.
En la práctica, los sistemas deben pasar todas las pruebas. En este ejemplo se fallan algunas para que aprendas como se ve.

2. Salida de las pruebas realizadas

Esta salida muestra algunos fallos para que te des cuenta como se ven. En la práctica, todas la pruebas deben aprobarse.


  PHPUnit 10.5.5 by Sebastian Bergmann and contributors.

  Runtime:       PHP 8.2.7
  
  ..F                                                                 3 / 3 (100%)
  
  Time: 00:00.091, Memory: 8.00 MB
  
  There was 1 failure:
  
  1) RecomiendaTest::testReg2
  Probando reg 2
  Failed asserting that two strings are equal.
  --- Expected
  +++ Actual
  @@ @@
  -'Daddy Yankee.'
  +'Bad Bunny.'
  
  /home/runner/phpunit/tests/RecomiendaTest.php:19

3. Hazlo funcionar

Este ejercicio usa la librería PHPUnit para PHP. Puedes profundizar en este tema en la URL https://phpunit.de/
Descarga el archivo /src/phpunit.zip y descompáctalo.
Abre la carpeta descompactada con Visual Studio Code.
Edita los archivos que que desees.
El proyecto ya contiene la carpeta vendor y el archivo composer.lock, pero si quieres crearlos, debes seguir estos pasos:
1. Instalar composer. Para Windows, usa el instalador de https://getcomposer.org/download/.
2. Abre una terminal y ejecuta el comando
  composer update
Abre una terminal y ejecuta el comando
./vendor/bin/phpunit tests

4. Archivos

Haz clic en los triángulos para expandir las carpetas

composer.json
composer.lock
src
- recomienda.php
tests
- RecomiendaTest.php
vendor
- -- No se muestra el contenido de esta carpeta --

5. Carpeta « src »

Versión para imprimir.

A. src / recomienda.php

<?php

function recomienda(string $genero): string
{
 if ($genero === "pop") {
  return "Dua Lipa.";
 } elseif ($genero === "reg") {
  return "Bad Bunny.";
 } else {
  return "De eso no conozco";
 }
}


6. Carpeta « tests »

Versión para imprimir.

A. tests / RecomiendaTest.php

<?php

use PHPUnit\Framework\TestCase;

require_once __DIR__ . "/../src/recomienda.php";

final class RecomiendaTest extends TestCase
{
 public function testPop()
 {
  $this->assertEquals("Dua Lipa.", recomienda("pop"), "Probando pop");
 }
 public function testReg()
 {
  $this->assertEquals("Bad Bunny.", recomienda("reg"), "Probando reg");
 }
 public function testReg2()
 {
  $this->assertEquals("Daddy Yankee.", recomienda("reg"), "Probando reg 2");
 }
}


7. composer.json

{
 "require-dev": {
  "phpunit/phpunit": "^10"
 }
}

8. composer.lock


1	-- No se muestra eñ contenido de este archivo --

9. Carpeta « vendor »

Versión para imprimir.

A. vendor / -- No se muestra el contenido de esta carpeta --


1

D. Jasmine

Versión para imprimir.

1. introducción

Las pruebas de unidad permiten asegurar que una parte del código cumple correctamente con sus funciones.
A continuación se muestra como realizar pruebas del cliente con Jasmine.
En la práctica, los sistemas deben pasar todas las pruebas. En este ejemplo se fallan algunas para que aprendas como se ve.

2. Salida de las pruebas realizadas

Esta salida muestra algunos fallos para que te des cuenta como se ven. En la práctica, todas la pruebas deben aprobarse.


> nodejs@1.0.0 test
> jasmine

Randomized with seed 87173
Started
.F.

Failures:
1) recomienda reg2
  Message:
  Expected 'Bad Bunny.' to be 'Daddy Yankee.'.
  Stack:
        at <Jasmine>
        at UserContext.<anonymous> (file:///D:/gilpg/Documents/Sitios/awoas/jasminewin/spec/recomiendaSpec.js:6:45)
        at <Jasmine>

3 specs, 1 failure
Finished in 0.012 seconds
Randomized with seed 87173 (jasmine --random=true --seed=87173)

3. Hazlo funcionar

Este ejercicio usa la librería Jasmine para JavaScript. Puedes profundizar en este tema en la URL https://jasmine.github.io/
Descarga el archivo /src/jasmine.zip y descompáctalo.
Abre la carpeta descompactada con Visual Studio Code.
Edita los archivos que desees. El código a probar se coloca en la carpeta src y las pruebas en la carpeta spec.
El proyecto ya contiene la carpeta node_modules y el archivo package-lock.json, pero si quieres crearlos, debes seguir estos pasos:
1. Instala Node.js desde https://nodejs.org/en.
2. Desde Visual Studio Code abre una terminal y usa el siguiente comando para inicializar el proyecto de node:
  npm init -y
3. Edita el archivo packege.json e inserta en la linea 6, sin borrar ni sobreescribir nada, la siguiente línea
  "type": "module",
4. En el mismo archivo packege.json cambia la línea que dice "test" a que diga:
  "test": "jasmine"
5. Instala Jasmine en el proyecto con la orden:
  npm install --save-dev jasmine
6. Inicializa Jasmine con la orden:
  npx jasmine init
Ejecuta las pruebas con la orden:
npm run test

4. Archivos

Haz clic en los triángulos para expandir las carpetas

jsconfig.json
package-lock.json
package.json
pasos.txt
node_modules
- -- No se muestra el contenido de esta carpeta --
spec
- recomiendaSpec.js
- support
  - jasmine.json
src
- recomienda.js

5. Carpeta « src »

Versión para imprimir.

A. src / recomienda.js

/**
 * @param {string} genero
 */
export function recomienda(genero) {
 if (genero === "pop") {
  return "Dua Lipa."
 } else if (genero === "reg") {
  return "Bad Bunny."
 } else {
  return "De eso no conozco."
 }
}

6. Carpeta « spec »

Versión para imprimir.

A. spec / recomiendaSpec.js

import { recomienda } from '../src/recomienda.js'

describe("recomienda", () => {
 it("pop", () => expect(recomienda("pop")).toBe("Dua Lipa."))
 it("reg", () => expect(recomienda("reg")).toBe("Bad Bunny."))
 it("reg2", () => expect(recomienda("reg")).toBe("Daddy Yankee."))
})

B. Carpeta « spec / support »

Versión para imprimir.

1. spec / support / jasmine.json

{
  "spec_dir": "spec",
  "spec_files": [
    "**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "random": true
  }
}


7. package.json

{
 "name": "nodejs",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "type": "module",
 "scripts": {
   "test": "jasmine"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
   "@types/node": "^18.0.6",
   "node-fetch": "^3.2.6"
 },
 "devDependencies": {
   "jasmine": "^5.1.0"
 }
}


8. package-lock.json


1	-- No se muestra el contenido de este archivo. --

9. Carpeta « node_modules »

Versión para imprimir.

A. node_modules / -- No se muestra el contenido de esta carpeta --


1

10. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

E. Prueba de los servicios

Este ejercicio usa el comando curl, que nos permite realizar una conexión a un sitio. Puedes profundizar en este tema en la URL https://curl.se/
Aunque hay herramientas gráficar como Postman (https://www.postman.com/), la ventaja de curl es que se puede integrar a lenguajes como shell o bat para automatizar las pruebas.
Si usas un sistema similar a Unix, como Linux o macOS, curl ya está instalado. Si usas Windows, descarga curl desde https://curl.se/windows/. Descompáctalo y copia la carpeta a C:, Añáde la ruta hasta la subcarpeta bin a la variable de ambiente Path.
Corre localmente el proyecto srvdevuelve.
Crea una carpeta para el proyecto y ábrela con Visual Studio Code.
Crea el archivo test.bat (en Linux y macOS debe llamarse test.sh) y ponle el siguiente contenido.

curl http://localhost/php/devuelve.php
Abre una terminal.
Este paso solo se ejecuta en Windows. Teclea el comando:
cmd
En Windows teclea:
test
En Linux y macOS teclea:
./test.sh

La salida se ve algo como esto:

PS C:\xxx\Documents\xx\curl> cmd
    Microsoft Windows [Versión 10.0.19045.4894]
    (c) Microsoft Corporation. Todos los derechos reservados.
    
    C:\xxx\Documents\xx\curl>test
    
    C:\xxx\Documents\xx\curl>curl http://localhost/php/devuelve.php 
    {"nombre":"pp","mensaje":"Hola."}
    C:\xxx\Documents\xx\curl>

F. Pruebas de la app

Hay herramientas que permiten probar toda la aplicación.
Playwright: https://playwright.dev/.
Cypress: https://www.cypress.io/.
Selenium: https://www.selenium.dev/.
Puppeteer: https://github.com/puppeteer/puppeteer.
Video sobre la instalación de Selenium.
Video sobre el uso de Selenium.

G. Resumen

En esta lección se mostró como probar una aplicación web.

19. Chat sencillo - Protocolos de comunicación

Versión para imprimir.

A. Introducción

En esta lección se presentan un chat sencillo.
Puedes probar el ejemplo en https://chatm.rf.gd/.
Copia la url de la app y pégala en varias pestañas, navegadores y dispositivos para que veas como entre todas estas vistas se puede chatear.
Este proyecto puede correr simultáneamente en varios navegadores y computadoras. Todos interactuan con el servidor test.mosquitto.org.
Mosquitto es de prueba, pero puedes contratar servidores de MQTT para producción y cambiar la configuración del código para usarlos.

B. Diagrama de despliegue

C. Hazlo funcionar (con videos)

Prueba el ejemplo en https://chatm.rf.gd/.
Copia la url de la app y pégala en varias pestañas, navegadores y dispositivos para que veas como entre todas estas vistas se puede controlar el foquito.
Este proyecto puede correr simultáneamente en varios navegadores y computadoras. Todos interactuan con el servidor test.mosquitto.org.
Este ejercicio usa la librería Eclipse Paho JavaScript Client para conectar el JavaScript del navegador web para conectarse al servidor de mqtt. Puedes profundizar en este tema en la URL https://eclipse.dev/paho/clients/js/
Descarga el archivo /src/chatm.zip y descompáctalo.
Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
Publica tu sitio. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

D. Hazlo funcionar (texto)

Prueba el ejemplo en https://chatm.rf.gd/.
Copia la url de la app y pégala en varias pestañas, navegadores y dispositivos para que veas como entre todas estas vistas se puede chatear.
Este proyecto puede correr simultáneamente en varios navegadores y computadoras. Todos interactuan con el servidor test.mosquitto.org.
Este ejercicio usa la librería Eclipse Paho JavaScript Client para conectar el JavaScript del navegador web para conectarse al servidor de mqtt. Puedes profundizar en este tema en la URL https://eclipse.dev/paho/clients/js/
Descarga el archivo /src/chatm.zip y descompáctalo.
Crea tu proyecto en GitHub pages:
1. Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *. Debes usar el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
  - Mantén la selección Public.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
5. Entra al repositorio y selecciona ⚙️ Settings, luego selecciona 📁 Pages y en la sección Branches selecciona la carpeta donde se ubicará la carpeta. De preferencia selecciona / (root) para que coloques la página en la raíz del proyecto.Si haces cambios, clic en Save.
6. En la misma pestaña de ⚙️ Settings selecciona ◯ Actions, luego selecciona General y en Actions permissions selecciona el rediobotón Allow xxxx, and select non-xxxx, actions and reusable workflows y abajo la casilla de verificación Allow actions created by GitHub y cliquea el botón Save.
Importa el proyecto de GitHub a Visual Studio Code:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona Open with Live Server y se abre el navegador para que puedas probar localmente el ejemplo.
Los cambios tardan 10 minutos en reflejarse en el navegador. Cuando desarrolles, es incómodo esperar a que se reflejen los cambios; en vez de ello desinstala la app:
1. Abre las herramientas de depuración haciendo clic derecho en la página y selecciona Inspeccionar (o Inspect si aparece en inglés).
2. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamoento (o Storage en inglés). Cliquea Borrar datos del sitio.
3. Recarga la app, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
4. Tanbién puedes usar la combinación de teclas Ctrl+Mayúsculas+r para forzar que se actualice temporalmente el navegador en caso de que no se vean los cambios.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.
Si usas GitHub pages:
1. Entra a la página de tu repositorio y abajo a la derecha, selecciona el enlace github-pages.
2. Se muestran los despliegues realizados. Recarga la página hasta que apareca el mensaje de tu último push con una palomita dentro de un círculo verde.

E. Archivos

Haz clic en los triángulos para expandir las carpetas

F. index.html

<!DOCTYPE html>
<html>

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Chat</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>
 <script src="paho.javascript-1.0.3/paho-mqtt-min.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Chat</h1>

  <p>
   <label>
    Alias *
    <input id="inputAlias" required>
   </label>
  </p>

  <p>
   <label>
    Mensaje *
    <input id="inputMensaje" required>
   </label>
  </p>

  <p>* Obligatorio</p>

  <p><button type="submit">Enviar</button></p>

  <pre id="pre">Conectando…</pre>

 </form>

 <script type="module">

  import { creaIdCliente } from "./js/lib/creaIdCliente.js"
  import { falloEnLaConexionMqtt } from "./js/lib/falloEnLaConexionMqtt.js"
  import { conexionMqttPerdida } from "./js/lib/conexionMqttPerdida.js"
  import { enviaMensajeMqtt } from "./js/lib/enviaMensajeMqtt.js"

  const TOPICO_CHAT = "gilpgawoas/chat"

  // Cambia por una raíz para tu proyecto.
  const clientId = creaIdCliente("gilpgawoasChat-")

  // Si usas un servidor de MQTT diferente, necesitas cambiar los parámetros.
  const cliente = new Paho.MQTT.Client("test.mosquitto.org", 8081, clientId)

  /**
   * @param {Event} event
   */
  function submit(event) {
   event.preventDefault()
   const mensaje = `${inputAlias.value.trim()}
${inputMensaje.value.trim()}`
   enviaMensajeMqtt(cliente, mensaje, TOPICO_CHAT)
  }

  // Acciones al recibir un mensaje.
  cliente.onMessageArrived = mensaje => {
   if (mensaje.destinationName === TOPICO_CHAT) {
    pre.textContent += mensaje.payloadString + "\n\n"
   }
  }

  // Acciones al perder la conexión.
  cliente.onConnectionLost = conexionMqttPerdida

  // Configura el cliente.
  cliente.connect({

   // Manda un mensaje cada número de segundos indicados por este valor,
   // para que el sistema sepa que este dispositivo está activo.
   keepAliveInterval: 10,

   useSSL: true,

   // Acciones al fallar la conexión.
   onFailure: falloEnLaConexionMqtt,

   // Acciones al lograr la conexión.
   onSuccess: () => {
    console.log("Conectado.")
    pre.textContent = "Conectado.\n\n"
    // Se suscribe a uno o más tópicos.
    cliente.subscribe(TOPICO_CHAT)
    formulario.addEventListener("submit", submit)
   },

  })

 </script>

</body>

</html>

G. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / conexionMqttPerdida.js

/**
 * @param {{
 *   errorCode: number,
 *   errorMessage: string
 *  }} responseObject
 */
export function conexionMqttPerdida(responseObject) {
 if (responseObject.errorCode !== 0) {
  const mensaje = "Conexión MQTT terminada " + responseObject.errorMessage
  console.error(mensaje)
  alert(mensaje)
 }
}

2. js / lib / creaIdCliente.js

/**
 * Añade caracteres al azar a una raíz, para obtener un clientId único.
 * @param {string} raiz 
 */
export function creaIdCliente(raiz) {
 const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
 for (var i = 0; i < 15; i++) {
  raiz += chars.charAt(Math.floor(Math.random() * chars.length))
 }
 return raiz
}

3. js / lib / enviaMensajeMqtt.js

// @ts-nocheck
/**
 * Envá un valor al servidor de MQTT y es reenviado a todos los dispositivos
 * suscritos al tópico indicado
 * @param {Paho.MQTT.Client} cliente
 * @param {string} mensaje
 * @param {string} topico
 */
export function enviaMensajeMqtt(cliente, mensaje, topico) {
 const mensajeMqtt = new Paho.MQTT.Message(mensaje)
 mensajeMqtt.destinationName = topico
 cliente.send(mensajeMqtt)
}

4. js / lib / falloEnLaConexionMqtt.js

/**
 * @param {{errorMessage: string}} res
 */
export function falloEnLaConexionMqtt(res) {
 const mensaje = "Fallo en conexión MQTT: " + res.errorMessage
 console.error(mensaje)
 alert(mensaje)
}

5. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


6. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

7. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

H. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

I. Carpeta « paho.javascript-1.0.3 »

Versión para imprimir.

A. paho.javascript-1.0.3 / about.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>About</title>
</head>
<body lang="EN-US">
<h2>About This Content</h2>
 
<p><em>December 9, 2013</em></p>	
<h3>License</h3>

<p>The Eclipse Foundation makes available all content in this plug-in ("Content").  Unless otherwise 
indicated below, the Content is provided to you under the terms and conditions of the
Eclipse Public License Version 1.0 ("EPL") and Eclipse Distribution License Version 1.0 ("EDL").
A copy of the EPL is available at 
<a href="http://www.eclipse.org/legal/epl-v10.html">http://www.eclipse.org/legal/epl-v10.html</a> 
and a copy of the EDL is available at 
<a href="http://www.eclipse.org/org/documents/edl-v10.php">http://www.eclipse.org/org/documents/edl-v10.php</a>. 
For purposes of the EPL, "Program" will mean the Content.</p>

<p>If you did not receive this Content directly from the Eclipse Foundation, the Content is 
being redistributed by another party ("Redistributor") and different terms and conditions may
apply to your use of any object code in the Content.  Check the Redistributor's license that was 
provided with the Content.  If no such license exists, contact the Redistributor.  Unless otherwise
indicated below, the terms and conditions of the EPL still apply to any source code in the Content
and such source code may be obtained at <a href="http://www.eclipse.org/">http://www.eclipse.org</a>.</p>

</body></html>


B. paho.javascript-1.0.3 / CONTRIBUTING.md

# Contributing to Paho

Thanks for your interest in this project!

You can contribute bugfixes and new features by sending pull requests through GitHub.

## Legal

In order for your contribution to be accepted, it must comply with the Eclipse Foundation IP policy.

Please read the [Eclipse Foundation policy on accepting contributions via Git](http://wiki.eclipse.org/Development_Resources/Contributing_via_Git).

1. Sign the [Eclipse CLA](http://www.eclipse.org/legal/CLA.php)
  1. Register for an Eclipse Foundation User ID. You can register [here](https://dev.eclipse.org/site_login/createaccount.php).
  2. Log into the [Projects Portal](https://projects.eclipse.org/), and click on the '[Eclipse CLA](https://projects.eclipse.org/user/sign/cla)' link.
2. Go to your [account settings](https://dev.eclipse.org/site_login/myaccount.php#open_tab_accountsettings) and add your GitHub username to your account.
3. Make sure that you _sign-off_ your Git commits in the following format:
  ``` Signed-off-by: John Smith  ``` This is usually at the bottom of the commit message. You can automate this by adding the '-s' flag when you make the commits. e.g.   ```git commit -s -m "Adding a cool feature"```
4. Ensure that the email address that you make your commits with is the same one you used to sign up to the Eclipse Foundation website with.

## Contributing a change

## Contributing a change

1. [Fork the repository on GitHub](https://github.com/eclipse/paho.mqtt.javascript/fork)
2. Clone the forked repository onto your computer: ``` git clone https://github.com//paho.mqtt.javascript.git ```
3. Create a new branch from the latest ```develop``` branch with ```git checkout -b YOUR_BRANCH_NAME origin/develop```
4. Make your changes
5. If developing a new feature, make sure to include JUnit tests.
6. Ensure that all new and existing tests pass.
7. Commit the changes into the branch: ``` git commit -s ``` Make sure that your commit message is meaningful and describes your changes correctly.
8. If you have a lot of commits for the change, squash them into a single / few commits.
9. Push the changes in your branch to your forked repository.
10. Finally, go to [https://github.com/eclipse/paho.mqtt.javascript](https://github.com/eclipse/paho.mqtt.javascript) and create a pull request from your "YOUR_BRANCH_NAME" branch to the ```develop``` one to request review and merge of the commits in your pushed branch.


What happens next depends on the content of the patch. If it is 100% authored
by the contributor and is less than 1000 lines (and meets the needs of the
project), then it can be pulled into the main repository. If not, more steps
are required. These are detailed in the
[legal process poster](http://www.eclipse.org/legal/EclipseLegalProcessPoster.pdf).



## Developer resources:


Information regarding source code management, builds, coding standards, and more.

- [https://projects.eclipse.org/projects/iot.paho/developer](https://projects.eclipse.org/projects/iot.paho/developer)

Contact:
--------

Contact the project developers via the project's development
[mailing list](https://dev.eclipse.org/mailman/listinfo/paho-dev).

Search for bugs:
----------------

This project uses GitHub Issues here: [github.com/eclipse/paho.mqtt.javascript/issues](https://github.com/eclipse/paho.mqtt.javascript/issues) to track ongoing development and issues.

Create a new bug:
-----------------

Be sure to search for existing bugs before you create another one. Remember that contributions are always welcome!

- [Create new Paho bug](https://github.com/eclipse/paho.mqtt.javascript/issues/new)


C. paho.javascript-1.0.3 / edl-v10


Eclipse Distribution License - v 1.0

Copyright (c) 2007, Eclipse Foundation, Inc. and its licensors.

All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

    Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
    Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    Neither the name of the Eclipse Foundation, Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.



D. paho.javascript-1.0.3 / epl-v10

Eclipse Public License - v 1.0

THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT.

1. DEFINITIONS

"Contribution" means:

a) in the case of the initial Contributor, the initial code and documentation distributed under this Agreement, and
b) in the case of each subsequent Contributor:
i) changes to the Program, and
ii) additions to the Program;
where such changes and/or additions to the Program originate from and are distributed by that particular Contributor. A Contribution 'originates' from a Contributor if it was added to the Program by such Contributor itself or anyone acting on such Contributor's behalf. Contributions do not include additions to the Program which: (i) are separate modules of software distributed in conjunction with the Program under their own license agreement, and (ii) are not derivative works of the Program.
"Contributor" means any person or entity that distributes the Program.

"Licensed Patents" mean patent claims licensable by a Contributor which are necessarily infringed by the use or sale of its Contribution alone or when combined with the Program.

"Program" means the Contributions distributed in accordance with this Agreement.

"Recipient" means anyone who receives the Program under this Agreement, including all Contributors.

2. GRANT OF RIGHTS

a) Subject to the terms of this Agreement, each Contributor hereby grants Recipient a non-exclusive, worldwide, royalty-free copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, distribute and sublicense the Contribution of such Contributor, if any, and such derivative works, in source code and object code form.
b) Subject to the terms of this Agreement, each Contributor hereby grants Recipient a non-exclusive, worldwide, royalty-free patent license under Licensed Patents to make, use, sell, offer to sell, import and otherwise transfer the Contribution of such Contributor, if any, in source code and object code form. This patent license shall apply to the combination of the Contribution and the Program if, at the time the Contribution is added by the Contributor, such addition of the Contribution causes such combination to be covered by the Licensed Patents. The patent license shall not apply to any other combinations which include the Contribution. No hardware per se is licensed hereunder.
c) Recipient understands that although each Contributor grants the licenses to its Contributions set forth herein, no assurances are provided by any Contributor that the Program does not infringe the patent or other intellectual property rights of any other entity. Each Contributor disclaims any liability to Recipient for claims brought by any other entity based on infringement of intellectual property rights or otherwise. As a condition to exercising the rights and licenses granted hereunder, each Recipient hereby assumes sole responsibility to secure any other intellectual property rights needed, if any. For example, if a third party patent license is required to allow Recipient to distribute the Program, it is Recipient's responsibility to acquire that license before distributing the Program.
d) Each Contributor represents that to its knowledge it has sufficient copyright rights in its Contribution, if any, to grant the copyright license set forth in this Agreement.
3. REQUIREMENTS

A Contributor may choose to distribute the Program in object code form under its own license agreement, provided that:

a) it complies with the terms and conditions of this Agreement; and
b) its license agreement:
i) effectively disclaims on behalf of all Contributors all warranties and conditions, express and implied, including warranties or conditions of title and non-infringement, and implied warranties or conditions of merchantability and fitness for a particular purpose;
ii) effectively excludes on behalf of all Contributors all liability for damages, including direct, indirect, special, incidental and consequential damages, such as lost profits;
iii) states that any provisions which differ from this Agreement are offered by that Contributor alone and not by any other party; and
iv) states that source code for the Program is available from such Contributor, and informs licensees how to obtain it in a reasonable manner on or through a medium customarily used for software exchange.
When the Program is made available in source code form:

a) it must be made available under this Agreement; and
b) a copy of this Agreement must be included with each copy of the Program.
Contributors may not remove or alter any copyright notices contained within the Program.

Each Contributor must identify itself as the originator of its Contribution, if any, in a manner that reasonably allows subsequent Recipients to identify the originator of the Contribution.

4. COMMERCIAL DISTRIBUTION

Commercial distributors of software may accept certain responsibilities with respect to end users, business partners and the like. While this license is intended to facilitate the commercial use of the Program, the Contributor who includes the Program in a commercial product offering should do so in a manner which does not create potential liability for other Contributors. Therefore, if a Contributor includes the Program in a commercial product offering, such Contributor ("Commercial Contributor") hereby agrees to defend and indemnify every other Contributor ("Indemnified Contributor") against any losses, damages and costs (collectively "Losses") arising from claims, lawsuits and other legal actions brought by a third party against the Indemnified Contributor to the extent caused by the acts or omissions of such Commercial Contributor in connection with its distribution of the Program in a commercial product offering. The obligations in this section do not apply to any claims or Losses relating to any actual or alleged intellectual property infringement. In order to qualify, an Indemnified Contributor must: a) promptly notify the Commercial Contributor in writing of such claim, and b) allow the Commercial Contributor to control, and cooperate with the Commercial Contributor in, the defense and any related settlement negotiations. The Indemnified Contributor may participate in any such claim at its own expense.

For example, a Contributor might include the Program in a commercial product offering, Product X. That Contributor is then a Commercial Contributor. If that Commercial Contributor then makes performance claims, or offers warranties related to Product X, those performance claims and warranties are such Commercial Contributor's responsibility alone. Under this section, the Commercial Contributor would have to defend claims against the other Contributors related to those performance claims and warranties, and if a court requires any other Contributor to pay any damages as a result, the Commercial Contributor must pay those damages.

5. NO WARRANTY

EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Each Recipient is solely responsible for determining the appropriateness of using and distributing the Program and assumes all risks associated with its exercise of rights under this Agreement , including but not limited to the risks and costs of program errors, compliance with applicable laws, damage to or loss of data, programs or equipment, and unavailability or interruption of operations.

6. DISCLAIMER OF LIABILITY

EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

7. GENERAL

If any provision of this Agreement is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this Agreement, and without further action by the parties hereto, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.

If Recipient institutes patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Program itself (excluding combinations of the Program with other software or hardware) infringes such Recipient's patent(s), then such Recipient's rights granted under Section 2(b) shall terminate as of the date such litigation is filed.

All Recipient's rights under this Agreement shall terminate if it fails to comply with any of the material terms or conditions of this Agreement and does not cure such failure in a reasonable period of time after becoming aware of such noncompliance. If all Recipient's rights under this Agreement terminate, Recipient agrees to cease use and distribution of the Program as soon as reasonably practicable. However, Recipient's obligations under this Agreement and any licenses granted by Recipient relating to the Program shall continue and survive.

Everyone is permitted to copy and distribute copies of this Agreement, but in order to avoid inconsistency the Agreement is copyrighted and may only be modified in the following manner. The Agreement Steward reserves the right to publish new versions (including revisions) of this Agreement from time to time. No one other than the Agreement Steward has the right to modify this Agreement. The Eclipse Foundation is the initial Agreement Steward. The Eclipse Foundation may assign the responsibility to serve as the Agreement Steward to a suitable separate entity. Each new version of the Agreement will be given a distinguishing version number. The Program (including Contributions) may always be distributed subject to the version of the Agreement under which it was received. In addition, after a new version of the Agreement is published, Contributor may elect to distribute the Program (including its Contributions) under the new version. Except as expressly stated in Sections 2(a) and 2(b) above, Recipient receives no rights or licenses to the intellectual property of any Contributor under this Agreement, whether expressly, by implication, estoppel or otherwise. All rights in the Program not expressly granted under this Agreement are reserved.

This Agreement is governed by the laws of the State of New York and the intellectual property laws of the United States of America. No party to this Agreement will bring a legal action under this Agreement more than one year after the cause of action arose. Each party waives its rights to a jury trial in any resulting litigation.


E. paho.javascript-1.0.3 / paho-mqtt-min.js

/*******************************************************************************
 * Copyright (c) 2013, 2016 IBM Corp.
 *
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * and Eclipse Distribution License v1.0 which accompany this distribution.
 *
 * The Eclipse Public License is available at
 *    http://www.eclipse.org/legal/epl-v10.html
 * and the Eclipse Distribution License is available at
 *   http://www.eclipse.org/org/documents/edl-v10.php.
 *
 *******************************************************************************/
(function(p,s){"object"===typeof exports&&"object"===typeof module?module.exports=s():"function"===typeof define&&define.amd?define(s):"object"===typeof exports?exports=s():("undefined"===typeof p.Paho&&(p.Paho={}),p.Paho.MQTT=s())})(this,function(){return function(p){function s(a,b,c){b[c++]=a>>8;b[c++]=a%256;return c}function u(a,b,c,k){k=s(b,c,k);D(a,c,k);return k+b}function n(a){for(var b=0,c=0;c<a.length;c++){var k=a.charCodeAt(c);2047<k?(55296<=k&&56319>=k&&(c++,b++),b+=3):127<k?b+=2:b++}return b}
function D(a,b,c){for(var k=0;k<a.length;k++){var e=a.charCodeAt(k);if(55296<=e&&56319>=e){var g=a.charCodeAt(++k);if(isNaN(g))throw Error(f(h.MALFORMED_UNICODE,[e,g]));e=(e-55296<<10)+(g-56320)+65536}127>=e?b[c++]=e:(2047>=e?b[c++]=e>>6&31|192:(65535>=e?b[c++]=e>>12&15|224:(b[c++]=e>>18&7|240,b[c++]=e>>12&63|128),b[c++]=e>>6&63|128),b[c++]=e&63|128)}return b}function E(a,b,c){for(var k="",e,g=b;g<b+c;){e=a[g++];if(!(128>e)){var m=a[g++]-128;if(0>m)throw Error(f(h.MALFORMED_UTF,[e.toString(16),m.toString(16),
""]));if(224>e)e=64*(e-192)+m;else{var d=a[g++]-128;if(0>d)throw Error(f(h.MALFORMED_UTF,[e.toString(16),m.toString(16),d.toString(16)]));if(240>e)e=4096*(e-224)+64*m+d;else{var l=a[g++]-128;if(0>l)throw Error(f(h.MALFORMED_UTF,[e.toString(16),m.toString(16),d.toString(16),l.toString(16)]));if(248>e)e=262144*(e-240)+4096*m+64*d+l;else throw Error(f(h.MALFORMED_UTF,[e.toString(16),m.toString(16),d.toString(16),l.toString(16)]));}}}65535<e&&(e-=65536,k+=String.fromCharCode(55296+(e>>10)),e=56320+(e&
1023));k+=String.fromCharCode(e)}return k}var z=function(a,b){for(var c in a)if(a.hasOwnProperty(c))if(b.hasOwnProperty(c)){if(typeof a[c]!==b[c])throw Error(f(h.INVALID_TYPE,[typeof a[c],c]));}else{c="Unknown property, "+c+". Valid properties are:";for(var k in b)b.hasOwnProperty(k)&&(c=c+" "+k);throw Error(c);}},v=function(a,b){return function(){return a.apply(b,arguments)}},h={OK:{code:0,text:"AMQJSC0000I OK."},CONNECT_TIMEOUT:{code:1,text:"AMQJSC0001E Connect timed out."},SUBSCRIBE_TIMEOUT:{code:2,
text:"AMQJS0002E Subscribe timed out."},UNSUBSCRIBE_TIMEOUT:{code:3,text:"AMQJS0003E Unsubscribe timed out."},PING_TIMEOUT:{code:4,text:"AMQJS0004E Ping timed out."},INTERNAL_ERROR:{code:5,text:"AMQJS0005E Internal error. Error Message: {0}, Stack trace: {1}"},CONNACK_RETURNCODE:{code:6,text:"AMQJS0006E Bad Connack return code:{0} {1}."},SOCKET_ERROR:{code:7,text:"AMQJS0007E Socket error:{0}."},SOCKET_CLOSE:{code:8,text:"AMQJS0008I Socket closed."},MALFORMED_UTF:{code:9,text:"AMQJS0009E Malformed UTF data:{0} {1} {2}."},
UNSUPPORTED:{code:10,text:"AMQJS0010E {0} is not supported by this browser."},INVALID_STATE:{code:11,text:"AMQJS0011E Invalid state {0}."},INVALID_TYPE:{code:12,text:"AMQJS0012E Invalid type {0} for {1}."},INVALID_ARGUMENT:{code:13,text:"AMQJS0013E Invalid argument {0} for {1}."},UNSUPPORTED_OPERATION:{code:14,text:"AMQJS0014E Unsupported operation."},INVALID_STORED_DATA:{code:15,text:"AMQJS0015E Invalid data in local storage key\x3d{0} value\x3d{1}."},INVALID_MQTT_MESSAGE_TYPE:{code:16,text:"AMQJS0016E Invalid MQTT message type {0}."},
MALFORMED_UNICODE:{code:17,text:"AMQJS0017E Malformed Unicode string:{0} {1}."},BUFFER_FULL:{code:18,text:"AMQJS0018E Message buffer is full, maximum buffer size: {0}."}},H={0:"Connection Accepted",1:"Connection Refused: unacceptable protocol version",2:"Connection Refused: identifier rejected",3:"Connection Refused: server unavailable",4:"Connection Refused: bad user name or password",5:"Connection Refused: not authorized"},f=function(a,b){var c=a.text;if(b)for(var k,e,g=0;g<b.length;g++)if(k="{"+
g+"}",e=c.indexOf(k),0<e)var h=c.substring(0,e),c=c.substring(e+k.length),c=h+b[g]+c;return c},A=[0,6,77,81,73,115,100,112,3],B=[0,4,77,81,84,84,4],q=function(a,b){this.type=a;for(var c in b)b.hasOwnProperty(c)&&(this[c]=b[c])};q.prototype.encode=function(){var a=(this.type&15)<<4,b=0,c=[],k=0,e;void 0!==this.messageIdentifier&&(b+=2);switch(this.type){case 1:switch(this.mqttVersion){case 3:b+=A.length+3;break;case 4:b+=B.length+3}b+=n(this.clientId)+2;void 0!==this.willMessage&&(b+=n(this.willMessage.destinationName)+
2,e=this.willMessage.payloadBytes,e instanceof Uint8Array||(e=new Uint8Array(h)),b+=e.byteLength+2);void 0!==this.userName&&(b+=n(this.userName)+2);void 0!==this.password&&(b+=n(this.password)+2);break;case 8:for(var a=a|2,g=0;g<this.topics.length;g++)c[g]=n(this.topics[g]),b+=c[g]+2;b+=this.requestedQos.length;break;case 10:a|=2;for(g=0;g<this.topics.length;g++)c[g]=n(this.topics[g]),b+=c[g]+2;break;case 6:a|=2;break;case 3:this.payloadMessage.duplicate&&(a|=8);a=a|=this.payloadMessage.qos<<1;this.payloadMessage.retained&&
(a|=1);var k=n(this.payloadMessage.destinationName),h=this.payloadMessage.payloadBytes,b=b+(k+2)+h.byteLength;h instanceof ArrayBuffer?h=new Uint8Array(h):h instanceof Uint8Array||(h=new Uint8Array(h.buffer))}var f=b,g=Array(1),d=0;do{var t=f%128,f=f>>7;0<f&&(t|=128);g[d++]=t}while(0<f&&4>d);f=g.length+1;b=new ArrayBuffer(b+f);d=new Uint8Array(b);d[0]=a;d.set(g,1);if(3==this.type)f=u(this.payloadMessage.destinationName,k,d,f);else if(1==this.type){switch(this.mqttVersion){case 3:d.set(A,f);f+=A.length;
break;case 4:d.set(B,f),f+=B.length}a=0;this.cleanSession&&(a=2);void 0!==this.willMessage&&(a=a|4|this.willMessage.qos<<3,this.willMessage.retained&&(a|=32));void 0!==this.userName&&(a|=128);void 0!==this.password&&(a|=64);d[f++]=a;f=s(this.keepAliveInterval,d,f)}void 0!==this.messageIdentifier&&(f=s(this.messageIdentifier,d,f));switch(this.type){case 1:f=u(this.clientId,n(this.clientId),d,f);void 0!==this.willMessage&&(f=u(this.willMessage.destinationName,n(this.willMessage.destinationName),d,f),
f=s(e.byteLength,d,f),d.set(e,f),f+=e.byteLength);void 0!==this.userName&&(f=u(this.userName,n(this.userName),d,f));void 0!==this.password&&u(this.password,n(this.password),d,f);break;case 3:d.set(h,f);break;case 8:for(g=0;g<this.topics.length;g++)f=u(this.topics[g],c[g],d,f),d[f++]=this.requestedQos[g];break;case 10:for(g=0;g<this.topics.length;g++)f=u(this.topics[g],c[g],d,f)}return b};var F=function(a,b,c){this._client=a;this._window=b;this._keepAliveInterval=1E3*c;this.isReset=!1;var k=(new q(12)).encode(),
e=function(a){return function(){return g.apply(a)}},g=function(){this.isReset?(this.isReset=!1,this._client._trace("Pinger.doPing","send PINGREQ"),this._client.socket.send(k),this.timeout=this._window.setTimeout(e(this),this._keepAliveInterval)):(this._client._trace("Pinger.doPing","Timed out"),this._client._disconnected(h.PING_TIMEOUT.code,f(h.PING_TIMEOUT)))};this.reset=function(){this.isReset=!0;this._window.clearTimeout(this.timeout);0<this._keepAliveInterval&&(this.timeout=setTimeout(e(this),
this._keepAliveInterval))};this.cancel=function(){this._window.clearTimeout(this.timeout)}},w=function(a,b,c,f,e){this._window=b;c||(c=30);this.timeout=setTimeout(function(a,b,c){return function(){return a.apply(b,c)}}(f,a,e),1E3*c);this.cancel=function(){this._window.clearTimeout(this.timeout)}},d=function(a,b,c,d,e){if(!("WebSocket"in p&&null!==p.WebSocket))throw Error(f(h.UNSUPPORTED,["WebSocket"]));if(!("localStorage"in p&&null!==p.localStorage))throw Error(f(h.UNSUPPORTED,["localStorage"]));
if(!("ArrayBuffer"in p&&null!==p.ArrayBuffer))throw Error(f(h.UNSUPPORTED,["ArrayBuffer"]));this._trace("Paho.MQTT.Client",a,b,c,d,e);this.host=b;this.port=c;this.path=d;this.uri=a;this.clientId=e;this._wsuri=null;this._localKey=b+":"+c+("/mqtt"!=d?":"+d:"")+":"+e+":";this._msg_queue=[];this._buffered_msg_queue=[];this._sentMessages={};this._receivedMessages={};this._notify_msg_sent={};this._message_identifier=1;this._sequence=0;for(var g in localStorage)0!==g.indexOf("Sent:"+this._localKey)&&0!==
g.indexOf("Received:"+this._localKey)||this.restore(g)};d.prototype.host=null;d.prototype.port=null;d.prototype.path=null;d.prototype.uri=null;d.prototype.clientId=null;d.prototype.socket=null;d.prototype.connected=!1;d.prototype.maxMessageIdentifier=65536;d.prototype.connectOptions=null;d.prototype.hostIndex=null;d.prototype.onConnected=null;d.prototype.onConnectionLost=null;d.prototype.onMessageDelivered=null;d.prototype.onMessageArrived=null;d.prototype.traceFunction=null;d.prototype._msg_queue=
null;d.prototype._buffered_msg_queue=null;d.prototype._connectTimeout=null;d.prototype.sendPinger=null;d.prototype.receivePinger=null;d.prototype._reconnectInterval=1;d.prototype._reconnecting=!1;d.prototype._reconnectTimeout=null;d.prototype.disconnectedPublishing=!1;d.prototype.disconnectedBufferSize=5E3;d.prototype.receiveBuffer=null;d.prototype._traceBuffer=null;d.prototype._MAX_TRACE_ENTRIES=100;d.prototype.connect=function(a){var b=this._traceMask(a,"password");this._trace("Client.connect",
b,this.socket,this.connected);if(this.connected)throw Error(f(h.INVALID_STATE,["already connected"]));if(this.socket)throw Error(f(h.INVALID_STATE,["already connected"]));this._reconnecting&&(this._reconnectTimeout.cancel(),this._reconnectTimeout=null,this._reconnecting=!1);this.connectOptions=a;this._reconnectInterval=1;this._reconnecting=!1;a.uris?(this.hostIndex=0,this._doConnect(a.uris[0])):this._doConnect(this.uri)};d.prototype.subscribe=function(a,b){this._trace("Client.subscribe",a,b);if(!this.connected)throw Error(f(h.INVALID_STATE,
["not connected"]));var c=new q(8);c.topics=[a];c.requestedQos=void 0!==b.qos?[b.qos]:[0];b.onSuccess&&(c.onSuccess=function(a){b.onSuccess({invocationContext:b.invocationContext,grantedQos:a})});b.onFailure&&(c.onFailure=function(a){b.onFailure({invocationContext:b.invocationContext,errorCode:a,errorMessage:f(a)})});b.timeout&&(c.timeOut=new w(this,window,b.timeout,b.onFailure,[{invocationContext:b.invocationContext,errorCode:h.SUBSCRIBE_TIMEOUT.code,errorMessage:f(h.SUBSCRIBE_TIMEOUT)}]));this._requires_ack(c);
this._schedule_message(c)};d.prototype.unsubscribe=function(a,b){this._trace("Client.unsubscribe",a,b);if(!this.connected)throw Error(f(h.INVALID_STATE,["not connected"]));var c=new q(10);c.topics=[a];b.onSuccess&&(c.callback=function(){b.onSuccess({invocationContext:b.invocationContext})});b.timeout&&(c.timeOut=new w(this,window,b.timeout,b.onFailure,[{invocationContext:b.invocationContext,errorCode:h.UNSUBSCRIBE_TIMEOUT.code,errorMessage:f(h.UNSUBSCRIBE_TIMEOUT)}]));this._requires_ack(c);this._schedule_message(c)};
d.prototype.send=function(a){this._trace("Client.send",a);wireMessage=new q(3);wireMessage.payloadMessage=a;if(this.connected)0<a.qos?this._requires_ack(wireMessage):this.onMessageDelivered&&(this._notify_msg_sent[wireMessage]=this.onMessageDelivered(wireMessage.payloadMessage)),this._schedule_message(wireMessage);else if(this._reconnecting&&this.disconnectedPublishing){if(Object.keys(this._sentMessages).length+this._buffered_msg_queue.length>this.disconnectedBufferSize)throw Error(f(h.BUFFER_FULL,
[this.disconnectedBufferSize]));0<a.qos?this._requires_ack(wireMessage):(wireMessage.sequence=++this._sequence,this._buffered_msg_queue.push(wireMessage))}else throw Error(f(h.INVALID_STATE,["not connected"]));};d.prototype.disconnect=function(){this._trace("Client.disconnect");this._reconnecting&&(this._reconnectTimeout.cancel(),this._reconnectTimeout=null,this._reconnecting=!1);if(!this.socket)throw Error(f(h.INVALID_STATE,["not connecting or connected"]));wireMessage=new q(14);this._notify_msg_sent[wireMessage]=
v(this._disconnected,this);this._schedule_message(wireMessage)};d.prototype.getTraceLog=function(){if(null!==this._traceBuffer){this._trace("Client.getTraceLog",new Date);this._trace("Client.getTraceLog in flight messages",this._sentMessages.length);for(var a in this._sentMessages)this._trace("_sentMessages ",a,this._sentMessages[a]);for(a in this._receivedMessages)this._trace("_receivedMessages ",a,this._receivedMessages[a]);return this._traceBuffer}};d.prototype.startTrace=function(){null===this._traceBuffer&&
(this._traceBuffer=[]);this._trace("Client.startTrace",new Date,"1.0.3")};d.prototype.stopTrace=function(){delete this._traceBuffer};d.prototype._doConnect=function(a){this.connectOptions.useSSL&&(a=a.split(":"),a[0]="wss",a=a.join(":"));this._wsuri=a;this.connected=!1;this.socket=4>this.connectOptions.mqttVersion?new WebSocket(a,["mqttv3.1"]):new WebSocket(a,["mqtt"]);this.socket.binaryType="arraybuffer";this.socket.onopen=v(this._on_socket_open,this);this.socket.onmessage=v(this._on_socket_message,
this);this.socket.onerror=v(this._on_socket_error,this);this.socket.onclose=v(this._on_socket_close,this);this.sendPinger=new F(this,window,this.connectOptions.keepAliveInterval);this.receivePinger=new F(this,window,this.connectOptions.keepAliveInterval);this._connectTimeout&&(this._connectTimeout.cancel(),this._connectTimeout=null);this._connectTimeout=new w(this,window,this.connectOptions.timeout,this._disconnected,[h.CONNECT_TIMEOUT.code,f(h.CONNECT_TIMEOUT)])};d.prototype._schedule_message=function(a){this._msg_queue.push(a);
this.connected&&this._process_queue()};d.prototype.store=function(a,b){var c={type:b.type,messageIdentifier:b.messageIdentifier,version:1};switch(b.type){case 3:b.pubRecReceived&&(c.pubRecReceived=!0);c.payloadMessage={};for(var d="",e=b.payloadMessage.payloadBytes,g=0;g<e.length;g++)d=15>=e[g]?d+"0"+e[g].toString(16):d+e[g].toString(16);c.payloadMessage.payloadHex=d;c.payloadMessage.qos=b.payloadMessage.qos;c.payloadMessage.destinationName=b.payloadMessage.destinationName;b.payloadMessage.duplicate&&
(c.payloadMessage.duplicate=!0);b.payloadMessage.retained&&(c.payloadMessage.retained=!0);0===a.indexOf("Sent:")&&(void 0===b.sequence&&(b.sequence=++this._sequence),c.sequence=b.sequence);break;default:throw Error(f(h.INVALID_STORED_DATA,[key,c]));}localStorage.setItem(a+this._localKey+b.messageIdentifier,JSON.stringify(c))};d.prototype.restore=function(a){var b=localStorage.getItem(a),c=JSON.parse(b),d=new q(c.type,c);switch(c.type){case 3:for(var b=c.payloadMessage.payloadHex,e=new ArrayBuffer(b.length/
2),e=new Uint8Array(e),g=0;2<=b.length;){var m=parseInt(b.substring(0,2),16),b=b.substring(2,b.length);e[g++]=m}b=new Paho.MQTT.Message(e);b.qos=c.payloadMessage.qos;b.destinationName=c.payloadMessage.destinationName;c.payloadMessage.duplicate&&(b.duplicate=!0);c.payloadMessage.retained&&(b.retained=!0);d.payloadMessage=b;break;default:throw Error(f(h.INVALID_STORED_DATA,[a,b]));}0===a.indexOf("Sent:"+this._localKey)?(d.payloadMessage.duplicate=!0,this._sentMessages[d.messageIdentifier]=d):0===a.indexOf("Received:"+
this._localKey)&&(this._receivedMessages[d.messageIdentifier]=d)};d.prototype._process_queue=function(){for(var a=null,b=this._msg_queue.reverse();a=b.pop();)this._socket_send(a),this._notify_msg_sent[a]&&(this._notify_msg_sent[a](),delete this._notify_msg_sent[a])};d.prototype._requires_ack=function(a){var b=Object.keys(this._sentMessages).length;if(b>this.maxMessageIdentifier)throw Error("Too many messages:"+b);for(;void 0!==this._sentMessages[this._message_identifier];)this._message_identifier++;
a.messageIdentifier=this._message_identifier;this._sentMessages[a.messageIdentifier]=a;3===a.type&&this.store("Sent:",a);this._message_identifier===this.maxMessageIdentifier&&(this._message_identifier=1)};d.prototype._on_socket_open=function(){var a=new q(1,this.connectOptions);a.clientId=this.clientId;this._socket_send(a)};d.prototype._on_socket_message=function(a){this._trace("Client._on_socket_message",a.data);a=this._deframeMessages(a.data);for(var b=0;b<a.length;b+=1)this._handleMessage(a[b])};
d.prototype._deframeMessages=function(a){a=new Uint8Array(a);var b=[];if(this.receiveBuffer){var c=new Uint8Array(this.receiveBuffer.length+a.length);c.set(this.receiveBuffer);c.set(a,this.receiveBuffer.length);a=c;delete this.receiveBuffer}try{for(c=0;c<a.length;){var d;a:{var e=a,g=c,m=g,n=e[g],l=n>>4,t=n&15,g=g+1,x=void 0,C=0,p=1;do{if(g==e.length){d=[null,m];break a}x=e[g++];C+=(x&127)*p;p*=128}while(0!==(x&128));x=g+C;if(x>e.length)d=[null,m];else{var y=new q(l);switch(l){case 2:e[g++]&1&&(y.sessionPresent=
!0);y.returnCode=e[g++];break;case 3:var m=t>>1&3,s=256*e[g]+e[g+1],g=g+2,u=E(e,g,s),g=g+s;0<m&&(y.messageIdentifier=256*e[g]+e[g+1],g+=2);var r=new Paho.MQTT.Message(e.subarray(g,x));1==(t&1)&&(r.retained=!0);8==(t&8)&&(r.duplicate=!0);r.qos=m;r.destinationName=u;y.payloadMessage=r;break;case 4:case 5:case 6:case 7:case 11:y.messageIdentifier=256*e[g]+e[g+1];break;case 9:y.messageIdentifier=256*e[g]+e[g+1],g+=2,y.returnCode=e.subarray(g,x)}d=[y,x]}}var v=d[0],c=d[1];if(null!==v)b.push(v);else break}c<
a.length&&(this.receiveBuffer=a.subarray(c))}catch(w){d="undefined"==w.hasOwnProperty("stack")?w.stack.toString():"No Error Stack Available";this._disconnected(h.INTERNAL_ERROR.code,f(h.INTERNAL_ERROR,[w.message,d]));return}return b};d.prototype._handleMessage=function(a){this._trace("Client._handleMessage",a);try{switch(a.type){case 2:this._connectTimeout.cancel();this._reconnectTimeout&&this._reconnectTimeout.cancel();if(this.connectOptions.cleanSession){for(var b in this._sentMessages){var c=this._sentMessages[b];
localStorage.removeItem("Sent:"+this._localKey+c.messageIdentifier)}this._sentMessages={};for(b in this._receivedMessages){var d=this._receivedMessages[b];localStorage.removeItem("Received:"+this._localKey+d.messageIdentifier)}this._receivedMessages={}}if(0===a.returnCode)this.connected=!0,this.connectOptions.uris&&(this.hostIndex=this.connectOptions.uris.length);else{this._disconnected(h.CONNACK_RETURNCODE.code,f(h.CONNACK_RETURNCODE,[a.returnCode,H[a.returnCode]]));break}a=[];for(var e in this._sentMessages)this._sentMessages.hasOwnProperty(e)&&
a.push(this._sentMessages[e]);if(0<this._buffered_msg_queue.length){e=null;for(var g=this._buffered_msg_queue.reverse();e=g.pop();)a.push(e),this.onMessageDelivered&&(this._notify_msg_sent[e]=this.onMessageDelivered(e.payloadMessage))}a=a.sort(function(a,b){return a.sequence-b.sequence});for(var g=0,m=a.length;g<m;g++)if(c=a[g],3==c.type&&c.pubRecReceived){var n=new q(6,{messageIdentifier:c.messageIdentifier});this._schedule_message(n)}else this._schedule_message(c);if(this.connectOptions.onSuccess)this.connectOptions.onSuccess({invocationContext:this.connectOptions.invocationContext});
c=!1;this._reconnecting&&(c=!0,this._reconnectInterval=1,this._reconnecting=!1);this._connected(c,this._wsuri);this._process_queue();break;case 3:this._receivePublish(a);break;case 4:if(c=this._sentMessages[a.messageIdentifier])if(delete this._sentMessages[a.messageIdentifier],localStorage.removeItem("Sent:"+this._localKey+a.messageIdentifier),this.onMessageDelivered)this.onMessageDelivered(c.payloadMessage);break;case 5:if(c=this._sentMessages[a.messageIdentifier])c.pubRecReceived=!0,n=new q(6,{messageIdentifier:a.messageIdentifier}),
this.store("Sent:",c),this._schedule_message(n);break;case 6:d=this._receivedMessages[a.messageIdentifier];localStorage.removeItem("Received:"+this._localKey+a.messageIdentifier);d&&(this._receiveMessage(d),delete this._receivedMessages[a.messageIdentifier]);var l=new q(7,{messageIdentifier:a.messageIdentifier});this._schedule_message(l);break;case 7:c=this._sentMessages[a.messageIdentifier];delete this._sentMessages[a.messageIdentifier];localStorage.removeItem("Sent:"+this._localKey+a.messageIdentifier);
if(this.onMessageDelivered)this.onMessageDelivered(c.payloadMessage);break;case 9:if(c=this._sentMessages[a.messageIdentifier]){c.timeOut&&c.timeOut.cancel();if(128===a.returnCode[0]){if(c.onFailure)c.onFailure(a.returnCode)}else if(c.onSuccess)c.onSuccess(a.returnCode);delete this._sentMessages[a.messageIdentifier]}break;case 11:if(c=this._sentMessages[a.messageIdentifier])c.timeOut&&c.timeOut.cancel(),c.callback&&c.callback(),delete this._sentMessages[a.messageIdentifier];break;case 13:this.sendPinger.reset();
break;case 14:this._disconnected(h.INVALID_MQTT_MESSAGE_TYPE.code,f(h.INVALID_MQTT_MESSAGE_TYPE,[a.type]));break;default:this._disconnected(h.INVALID_MQTT_MESSAGE_TYPE.code,f(h.INVALID_MQTT_MESSAGE_TYPE,[a.type]))}}catch(t){c="undefined"==t.hasOwnProperty("stack")?t.stack.toString():"No Error Stack Available",this._disconnected(h.INTERNAL_ERROR.code,f(h.INTERNAL_ERROR,[t.message,c]))}};d.prototype._on_socket_error=function(a){this._reconnecting||this._disconnected(h.SOCKET_ERROR.code,f(h.SOCKET_ERROR,
[a.data]))};d.prototype._on_socket_close=function(){this._reconnecting||this._disconnected(h.SOCKET_CLOSE.code,f(h.SOCKET_CLOSE))};d.prototype._socket_send=function(a){if(1==a.type){var b=this._traceMask(a,"password");this._trace("Client._socket_send",b)}else this._trace("Client._socket_send",a);this.socket.send(a.encode());this.sendPinger.reset()};d.prototype._receivePublish=function(a){switch(a.payloadMessage.qos){case "undefined":case 0:this._receiveMessage(a);break;case 1:var b=new q(4,{messageIdentifier:a.messageIdentifier});
this._schedule_message(b);this._receiveMessage(a);break;case 2:this._receivedMessages[a.messageIdentifier]=a;this.store("Received:",a);a=new q(5,{messageIdentifier:a.messageIdentifier});this._schedule_message(a);break;default:throw Error("Invaild qos\x3d"+wireMmessage.payloadMessage.qos);}};d.prototype._receiveMessage=function(a){if(this.onMessageArrived)this.onMessageArrived(a.payloadMessage)};d.prototype._connected=function(a,b){if(this.onConnected)this.onConnected(a,b)};d.prototype._reconnect=
function(){this._trace("Client._reconnect");this.connected||(this._reconnecting=!0,this.sendPinger.cancel(),this.receivePinger.cancel(),128>this._reconnectInterval&&(this._reconnectInterval*=2),this.connectOptions.uris?(this.hostIndex=0,this._doConnect(this.connectOptions.uris[0])):this._doConnect(this.uri))};d.prototype._disconnected=function(a,b){this._trace("Client._disconnected",a,b);if(void 0!==a&&this._reconnecting)this._reconnectTimeout=new w(this,window,this._reconnectInterval,this._reconnect);
else if(this.sendPinger.cancel(),this.receivePinger.cancel(),this._connectTimeout&&(this._connectTimeout.cancel(),this._connectTimeout=null),this._msg_queue=[],this._buffered_msg_queue=[],this._notify_msg_sent={},this.socket&&(this.socket.onopen=null,this.socket.onmessage=null,this.socket.onerror=null,this.socket.onclose=null,1===this.socket.readyState&&this.socket.close(),delete this.socket),this.connectOptions.uris&&this.hostIndex<this.connectOptions.uris.length-1)this.hostIndex++,this._doConnect(this.connectOptions.uris[this.hostIndex]);
else if(void 0===a&&(a=h.OK.code,b=f(h.OK)),this.connected){this.connected=!1;if(this.onConnectionLost)this.onConnectionLost({errorCode:a,errorMessage:b,reconnect:this.connectOptions.reconnect,uri:this._wsuri});a!==h.OK.code&&this.connectOptions.reconnect&&(this._reconnectInterval=1,this._reconnect())}else if(4===this.connectOptions.mqttVersion&&!1===this.connectOptions.mqttVersionExplicit)this._trace("Failed to connect V4, dropping back to V3"),this.connectOptions.mqttVersion=3,this.connectOptions.uris?
(this.hostIndex=0,this._doConnect(this.connectOptions.uris[0])):this._doConnect(this.uri);else if(this.connectOptions.onFailure)this.connectOptions.onFailure({invocationContext:this.connectOptions.invocationContext,errorCode:a,errorMessage:b})};d.prototype._trace=function(){if(this.traceFunction){for(var a in arguments)"undefined"!==typeof arguments[a]&&arguments.splice(a,1,JSON.stringify(arguments[a]));a=Array.prototype.slice.call(arguments).join("");this.traceFunction({severity:"Debug",message:a})}if(null!==
this._traceBuffer){a=0;for(var b=arguments.length;a<b;a++)this._traceBuffer.length==this._MAX_TRACE_ENTRIES&&this._traceBuffer.shift(),0===a?this._traceBuffer.push(arguments[a]):"undefined"===typeof arguments[a]?this._traceBuffer.push(arguments[a]):this._traceBuffer.push("  "+JSON.stringify(arguments[a]))}};d.prototype._traceMask=function(a,b){var c={},d;for(d in a)a.hasOwnProperty(d)&&(c[d]=d==b?"******":a[d]);return c};var G=function(a,b,c,k){var e;if("string"!==typeof a)throw Error(f(h.INVALID_TYPE,
[typeof a,"host"]));if(2==arguments.length){k=b;e=a;var g=e.match(/^(wss?):\/\/((\[(.+)\])|([^\/]+?))(:(\d+))?(\/.*)$/);if(g)a=g[4]||g[2],b=parseInt(g[7]),c=g[8];else throw Error(f(h.INVALID_ARGUMENT,[a,"host"]));}else{3==arguments.length&&(k=c,c="/mqtt");if("number"!==typeof b||0>b)throw Error(f(h.INVALID_TYPE,[typeof b,"port"]));if("string"!==typeof c)throw Error(f(h.INVALID_TYPE,[typeof c,"path"]));e="ws://"+(-1!==a.indexOf(":")&&"["!==a.slice(0,1)&&"]"!==a.slice(-1)?"["+a+"]":a)+":"+b+c}for(var m=
g=0;m<k.length;m++){var n=k.charCodeAt(m);55296<=n&&56319>=n&&m++;g++}if("string"!==typeof k||65535<g)throw Error(f(h.INVALID_ARGUMENT,[k,"clientId"]));var l=new d(e,a,b,c,k);this._getHost=function(){return a};this._setHost=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getPort=function(){return b};this._setPort=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getPath=function(){return c};this._setPath=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getURI=function(){return e};
this._setURI=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getClientId=function(){return l.clientId};this._setClientId=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getOnConnected=function(){return l.onConnected};this._setOnConnected=function(a){if("function"===typeof a)l.onConnected=a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onConnected"]));};this._getDisconnectedPublishing=function(){return l.disconnectedPublishing};this._setDisconnectedPublishing=function(a){l.disconnectedPublishing=
a};this._getDisconnectedBufferSize=function(){return l.disconnectedBufferSize};this._setDisconnectedBufferSize=function(a){l.disconnectedBufferSize=a};this._getOnConnectionLost=function(){return l.onConnectionLost};this._setOnConnectionLost=function(a){if("function"===typeof a)l.onConnectionLost=a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onConnectionLost"]));};this._getOnMessageDelivered=function(){return l.onMessageDelivered};this._setOnMessageDelivered=function(a){if("function"===typeof a)l.onMessageDelivered=
a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onMessageDelivered"]));};this._getOnMessageArrived=function(){return l.onMessageArrived};this._setOnMessageArrived=function(a){if("function"===typeof a)l.onMessageArrived=a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onMessageArrived"]));};this._getTrace=function(){return l.traceFunction};this._setTrace=function(a){if("function"===typeof a)l.traceFunction=a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onTrace"]));};this.connect=function(a){a=a||{};z(a,
{timeout:"number",userName:"string",password:"string",willMessage:"object",keepAliveInterval:"number",cleanSession:"boolean",useSSL:"boolean",invocationContext:"object",onSuccess:"function",onFailure:"function",hosts:"object",ports:"object",reconnect:"boolean",mqttVersion:"number",mqttVersionExplicit:"boolean",uris:"object"});void 0===a.keepAliveInterval&&(a.keepAliveInterval=60);if(4<a.mqttVersion||3>a.mqttVersion)throw Error(f(h.INVALID_ARGUMENT,[a.mqttVersion,"connectOptions.mqttVersion"]));void 0===
a.mqttVersion?(a.mqttVersionExplicit=!1,a.mqttVersion=4):a.mqttVersionExplicit=!0;if(void 0!==a.password&&void 0===a.userName)throw Error(f(h.INVALID_ARGUMENT,[a.password,"connectOptions.password"]));if(a.willMessage){if(!(a.willMessage instanceof r))throw Error(f(h.INVALID_TYPE,[a.willMessage,"connectOptions.willMessage"]));a.willMessage.stringPayload=null;if("undefined"===typeof a.willMessage.destinationName)throw Error(f(h.INVALID_TYPE,[typeof a.willMessage.destinationName,"connectOptions.willMessage.destinationName"]));
}"undefined"===typeof a.cleanSession&&(a.cleanSession=!0);if(a.hosts){if(!(a.hosts instanceof Array))throw Error(f(h.INVALID_ARGUMENT,[a.hosts,"connectOptions.hosts"]));if(1>a.hosts.length)throw Error(f(h.INVALID_ARGUMENT,[a.hosts,"connectOptions.hosts"]));for(var b=!1,d=0;d<a.hosts.length;d++){if("string"!==typeof a.hosts[d])throw Error(f(h.INVALID_TYPE,[typeof a.hosts[d],"connectOptions.hosts["+d+"]"]));if(/^(wss?):\/\/((\[(.+)\])|([^\/]+?))(:(\d+))?(\/.*)$/.test(a.hosts[d]))if(0===d)b=!0;else{if(!b)throw Error(f(h.INVALID_ARGUMENT,
[a.hosts[d],"connectOptions.hosts["+d+"]"]));}else if(b)throw Error(f(h.INVALID_ARGUMENT,[a.hosts[d],"connectOptions.hosts["+d+"]"]));}if(b)a.uris=a.hosts;else{if(!a.ports)throw Error(f(h.INVALID_ARGUMENT,[a.ports,"connectOptions.ports"]));if(!(a.ports instanceof Array))throw Error(f(h.INVALID_ARGUMENT,[a.ports,"connectOptions.ports"]));if(a.hosts.length!==a.ports.length)throw Error(f(h.INVALID_ARGUMENT,[a.ports,"connectOptions.ports"]));a.uris=[];for(d=0;d<a.hosts.length;d++){if("number"!==typeof a.ports[d]||
0>a.ports[d])throw Error(f(h.INVALID_TYPE,[typeof a.ports[d],"connectOptions.ports["+d+"]"]));var b=a.hosts[d],g=a.ports[d];e="ws://"+(-1!==b.indexOf(":")?"["+b+"]":b)+":"+g+c;a.uris.push(e)}}}l.connect(a)};this.subscribe=function(a,b){if("string"!==typeof a)throw Error("Invalid argument:"+a);b=b||{};z(b,{qos:"number",invocationContext:"object",onSuccess:"function",onFailure:"function",timeout:"number"});if(b.timeout&&!b.onFailure)throw Error("subscribeOptions.timeout specified with no onFailure callback.");
if("undefined"!==typeof b.qos&&0!==b.qos&&1!==b.qos&&2!==b.qos)throw Error(f(h.INVALID_ARGUMENT,[b.qos,"subscribeOptions.qos"]));l.subscribe(a,b)};this.unsubscribe=function(a,b){if("string"!==typeof a)throw Error("Invalid argument:"+a);b=b||{};z(b,{invocationContext:"object",onSuccess:"function",onFailure:"function",timeout:"number"});if(b.timeout&&!b.onFailure)throw Error("unsubscribeOptions.timeout specified with no onFailure callback.");l.unsubscribe(a,b)};this.send=function(a,b,c,d){var e;if(0===
arguments.length)throw Error("Invalid argument.length");if(1==arguments.length){if(!(a instanceof r)&&"string"!==typeof a)throw Error("Invalid argument:"+typeof a);e=a;if("undefined"===typeof e.destinationName)throw Error(f(h.INVALID_ARGUMENT,[e.destinationName,"Message.destinationName"]));}else e=new r(b),e.destinationName=a,3<=arguments.length&&(e.qos=c),4<=arguments.length&&(e.retained=d);l.send(e)};this.publish=function(a,b,c,d){console.log("Publising message to: ",a);var e;if(0===arguments.length)throw Error("Invalid argument.length");
if(1==arguments.length){if(!(a instanceof r)&&"string"!==typeof a)throw Error("Invalid argument:"+typeof a);e=a;if("undefined"===typeof e.destinationName)throw Error(f(h.INVALID_ARGUMENT,[e.destinationName,"Message.destinationName"]));}else e=new r(b),e.destinationName=a,3<=arguments.length&&(e.qos=c),4<=arguments.length&&(e.retained=d);l.send(e)};this.disconnect=function(){l.disconnect()};this.getTraceLog=function(){return l.getTraceLog()};this.startTrace=function(){l.startTrace()};this.stopTrace=
function(){l.stopTrace()};this.isConnected=function(){return l.connected}};G.prototype={get host(){return this._getHost()},set host(a){this._setHost(a)},get port(){return this._getPort()},set port(a){this._setPort(a)},get path(){return this._getPath()},set path(a){this._setPath(a)},get clientId(){return this._getClientId()},set clientId(a){this._setClientId(a)},get onConnected(){return this._getOnConnected()},set onConnected(a){this._setOnConnected(a)},get disconnectedPublishing(){return this._getDisconnectedPublishing()},
set disconnectedPublishing(a){this._setDisconnectedPublishing(a)},get disconnectedBufferSize(){return this._getDisconnectedBufferSize()},set disconnectedBufferSize(a){this._setDisconnectedBufferSize(a)},get onConnectionLost(){return this._getOnConnectionLost()},set onConnectionLost(a){this._setOnConnectionLost(a)},get onMessageDelivered(){return this._getOnMessageDelivered()},set onMessageDelivered(a){this._setOnMessageDelivered(a)},get onMessageArrived(){return this._getOnMessageArrived()},set onMessageArrived(a){this._setOnMessageArrived(a)},
get trace(){return this._getTrace()},set trace(a){this._setTrace(a)}};var r=function(a){var b;if("string"===typeof a||a instanceof ArrayBuffer||a instanceof Int8Array||a instanceof Uint8Array||a instanceof Int16Array||a instanceof Uint16Array||a instanceof Int32Array||a instanceof Uint32Array||a instanceof Float32Array||a instanceof Float64Array)b=a;else throw f(h.INVALID_ARGUMENT,[a,"newPayload"]);this._getPayloadString=function(){return"string"===typeof b?b:E(b,0,b.length)};this._getPayloadBytes=
function(){if("string"===typeof b){var a=new ArrayBuffer(n(b)),a=new Uint8Array(a);D(b,a,0);return a}return b};var c;this._getDestinationName=function(){return c};this._setDestinationName=function(a){if("string"===typeof a)c=a;else throw Error(f(h.INVALID_ARGUMENT,[a,"newDestinationName"]));};var d=0;this._getQos=function(){return d};this._setQos=function(a){if(0===a||1===a||2===a)d=a;else throw Error("Invalid argument:"+a);};var e=!1;this._getRetained=function(){return e};this._setRetained=function(a){if("boolean"===
typeof a)e=a;else throw Error(f(h.INVALID_ARGUMENT,[a,"newRetained"]));};var g=!1;this._getDuplicate=function(){return g};this._setDuplicate=function(a){g=a}};r.prototype={get payloadString(){return this._getPayloadString()},get payloadBytes(){return this._getPayloadBytes()},get destinationName(){return this._getDestinationName()},set destinationName(a){this._setDestinationName(a)},get topic(){return this._getDestinationName()},set topic(a){this._setDestinationName(a)},get qos(){return this._getQos()},
set qos(a){this._setQos(a)},get retained(){return this._getRetained()},set retained(a){this._setRetained(a)},get duplicate(){return this._getDuplicate()},set duplicate(a){this._setDuplicate(a)}};return{Client:G,Message:r}}(window)});

F. paho.javascript-1.0.3 / paho-mqtt.js

/*******************************************************************************
 * Copyright (c) 2013 IBM Corp.
 *
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * and Eclipse Distribution License v1.0 which accompany this distribution.
 *
 * The Eclipse Public License is available at
 *    http://www.eclipse.org/legal/epl-v10.html
 * and the Eclipse Distribution License is available at
 *   http://www.eclipse.org/org/documents/edl-v10.php.
 *
 * Contributors:
 *    Andrew Banks - initial API and implementation and initial documentation
 *******************************************************************************/


// Only expose a single object name in the global namespace.
// Everything must go through this module. Global Paho.MQTT module
// only has a single public function, client, which returns
// a Paho.MQTT client object given connection details.

/**
 * Send and receive messages using web browsers.
 * <p>
 * This programming interface lets a JavaScript client application use the MQTT V3.1 or
 * V3.1.1 protocol to connect to an MQTT-supporting messaging server.
 *
 * The function supported includes:
 * <ol>
 * <li>Connecting to and disconnecting from a server. The server is identified by its host name and port number.
 * <li>Specifying options that relate to the communications link with the server,
 * for example the frequency of keep-alive heartbeats, and whether SSL/TLS is required.
 * <li>Subscribing to and receiving messages from MQTT Topics.
 * <li>Publishing messages to MQTT Topics.
 * </ol>
 * <p>
 * The API consists of two main objects:
 * <dl>
 * <dt><b>{@link Paho.MQTT.Client}</b></dt>
 * <dd>This contains methods that provide the functionality of the API,
 * including provision of callbacks that notify the application when a message
 * arrives from or is delivered to the messaging server,
 * or when the status of its connection to the messaging server changes.</dd>
 * <dt><b>{@link Paho.MQTT.Message}</b></dt>
 * <dd>This encapsulates the payload of the message along with various attributes
 * associated with its delivery, in particular the destination to which it has
 * been (or is about to be) sent.</dd>
 * </dl>
 * <p>
 * The programming interface validates parameters passed to it, and will throw
 * an Error containing an error message intended for developer use, if it detects
 * an error with any parameter.
 * <p>
 * Example:
 *
 * <code><pre>
client = new Paho.MQTT.Client(location.hostname, Number(location.port), "clientId");
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({onSuccess:onConnect});

function onConnect() {
  // Once a connection has been made, make a subscription and send a message.
  console.log("onConnect");
  client.subscribe("/World");
  message = new Paho.MQTT.Message("Hello");
  message.destinationName = "/World";
  client.send(message);
};
function onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0)
	console.log("onConnectionLost:"+responseObject.errorMessage);
};
function onMessageArrived(message) {
  console.log("onMessageArrived:"+message.payloadString);
  client.disconnect();
};
 * </pre></code>
 * @namespace Paho.MQTT
 */

/* jshint shadow:true */
(function ExportLibrary(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object'){
		module.exports = factory();
	} else if (typeof define === 'function' && define.amd){
		define(factory);
	} else if (typeof exports === 'object'){
		exports = factory();
	} else {
		if (typeof root.Paho === 'undefined'){
			root.Paho = {};
		}
		root.Paho.MQTT = factory();
	}
})(this, function LibraryFactory(){


var PahoMQTT = (function (global) {

	// Private variables below, these are only visible inside the function closure
	// which is used to define the module.

	var version = "@VERSION@";
	var buildLevel = "@BUILDLEVEL@";

	/**
	 * Unique message type identifiers, with associated
	 * associated integer values.
	 * @private
	 */
	var MESSAGE_TYPE = {
		CONNECT: 1,
		CONNACK: 2,
		PUBLISH: 3,
		PUBACK: 4,
		PUBREC: 5,
		PUBREL: 6,
		PUBCOMP: 7,
		SUBSCRIBE: 8,
		SUBACK: 9,
		UNSUBSCRIBE: 10,
		UNSUBACK: 11,
		PINGREQ: 12,
		PINGRESP: 13,
		DISCONNECT: 14
	};

	// Collection of utility methods used to simplify module code
	// and promote the DRY pattern.

	/**
	 * Validate an object's parameter names to ensure they
	 * match a list of expected variables name for this option
	 * type. Used to ensure option object passed into the API don't
	 * contain erroneous parameters.
	 * @param {Object} obj - User options object
	 * @param {Object} keys - valid keys and types that may exist in obj.
	 * @throws {Error} Invalid option parameter found.
	 * @private
	 */
	var validate = function(obj, keys) {
		for (var key in obj) {
			if (obj.hasOwnProperty(key)) {
				if (keys.hasOwnProperty(key)) {
					if (typeof obj[key] !== keys[key])
					   throw new Error(format(ERROR.INVALID_TYPE, [typeof obj[key], key]));
				} else {
					var errorStr = "Unknown property, " + key + ". Valid properties are:";
					for (var validKey in keys)
						if (keys.hasOwnProperty(validKey))
							errorStr = errorStr+" "+validKey;
					throw new Error(errorStr);
				}
			}
		}
	};

	/**
	 * Return a new function which runs the user function bound
	 * to a fixed scope.
	 * @param {function} User function
	 * @param {object} Function scope
	 * @return {function} User function bound to another scope
	 * @private
	 */
	var scope = function (f, scope) {
		return function () {
			return f.apply(scope, arguments);
		};
	};

	/**
	 * Unique message type identifiers, with associated
	 * associated integer values.
	 * @private
	 */
	var ERROR = {
		OK: {code:0, text:"AMQJSC0000I OK."},
		CONNECT_TIMEOUT: {code:1, text:"AMQJSC0001E Connect timed out."},
		SUBSCRIBE_TIMEOUT: {code:2, text:"AMQJS0002E Subscribe timed out."},
		UNSUBSCRIBE_TIMEOUT: {code:3, text:"AMQJS0003E Unsubscribe timed out."},
		PING_TIMEOUT: {code:4, text:"AMQJS0004E Ping timed out."},
		INTERNAL_ERROR: {code:5, text:"AMQJS0005E Internal error. Error Message: {0}, Stack trace: {1}"},
		CONNACK_RETURNCODE: {code:6, text:"AMQJS0006E Bad Connack return code:{0} {1}."},
		SOCKET_ERROR: {code:7, text:"AMQJS0007E Socket error:{0}."},
		SOCKET_CLOSE: {code:8, text:"AMQJS0008I Socket closed."},
		MALFORMED_UTF: {code:9, text:"AMQJS0009E Malformed UTF data:{0} {1} {2}."},
		UNSUPPORTED: {code:10, text:"AMQJS0010E {0} is not supported by this browser."},
		INVALID_STATE: {code:11, text:"AMQJS0011E Invalid state {0}."},
		INVALID_TYPE: {code:12, text:"AMQJS0012E Invalid type {0} for {1}."},
		INVALID_ARGUMENT: {code:13, text:"AMQJS0013E Invalid argument {0} for {1}."},
		UNSUPPORTED_OPERATION: {code:14, text:"AMQJS0014E Unsupported operation."},
		INVALID_STORED_DATA: {code:15, text:"AMQJS0015E Invalid data in local storage key={0} value={1}."},
		INVALID_MQTT_MESSAGE_TYPE: {code:16, text:"AMQJS0016E Invalid MQTT message type {0}."},
		MALFORMED_UNICODE: {code:17, text:"AMQJS0017E Malformed Unicode string:{0} {1}."},
		BUFFER_FULL: {code:18, text:"AMQJS0018E Message buffer is full, maximum buffer size: {0}."},
	};

	/** CONNACK RC Meaning. */
	var CONNACK_RC = {
		0:"Connection Accepted",
		1:"Connection Refused: unacceptable protocol version",
		2:"Connection Refused: identifier rejected",
		3:"Connection Refused: server unavailable",
		4:"Connection Refused: bad user name or password",
		5:"Connection Refused: not authorized"
	};

	/**
	 * Format an error message text.
	 * @private
	 * @param {error} ERROR.KEY value above.
	 * @param {substitutions} [array] substituted into the text.
	 * @return the text with the substitutions made.
	 */
	var format = function(error, substitutions) {
		var text = error.text;
		if (substitutions) {
		  var field,start;
		  for (var i=0; i<substitutions.length; i++) {
			field = "{"+i+"}";
			start = text.indexOf(field);
			if(start > 0) {
				var part1 = text.substring(0,start);
				var part2 = text.substring(start+field.length);
				text = part1+substitutions[i]+part2;
			}
		  }
		}
		return text;
	};

	//MQTT protocol and version          6    M    Q    I    s    d    p    3
	var MqttProtoIdentifierv3 = [0x00,0x06,0x4d,0x51,0x49,0x73,0x64,0x70,0x03];
	//MQTT proto/version for 311         4    M    Q    T    T    4
	var MqttProtoIdentifierv4 = [0x00,0x04,0x4d,0x51,0x54,0x54,0x04];

	/**
	 * Construct an MQTT wire protocol message.
	 * @param type MQTT packet type.
	 * @param options optional wire message attributes.
	 *
	 * Optional properties
	 *
	 * messageIdentifier: message ID in the range [0..65535]
	 * payloadMessage:	Application Message - PUBLISH only
	 * connectStrings:	array of 0 or more Strings to be put into the CONNECT payload
	 * topics:			array of strings (SUBSCRIBE, UNSUBSCRIBE)
	 * requestQoS:		array of QoS values [0..2]
	 *
	 * "Flag" properties
	 * cleanSession:	true if present / false if absent (CONNECT)
	 * willMessage:  	true if present / false if absent (CONNECT)
	 * isRetained:		true if present / false if absent (CONNECT)
	 * userName:		true if present / false if absent (CONNECT)
	 * password:		true if present / false if absent (CONNECT)
	 * keepAliveInterval:	integer [0..65535]  (CONNECT)
	 *
	 * @private
	 * @ignore
	 */
	var WireMessage = function (type, options) {
		this.type = type;
		for (var name in options) {
			if (options.hasOwnProperty(name)) {
				this[name] = options[name];
			}
		}
	};

	WireMessage.prototype.encode = function() {
		// Compute the first byte of the fixed header
		var first = ((this.type & 0x0f) << 4);

		/*
		 * Now calculate the length of the variable header + payload by adding up the lengths
		 * of all the component parts
		 */

		var remLength = 0;
		var topicStrLength = [];
		var destinationNameLength = 0;
		var willMessagePayloadBytes;

		// if the message contains a messageIdentifier then we need two bytes for that
		if (this.messageIdentifier !== undefined)
			remLength += 2;

		switch(this.type) {
			// If this a Connect then we need to include 12 bytes for its header
			case MESSAGE_TYPE.CONNECT:
				switch(this.mqttVersion) {
					case 3:
						remLength += MqttProtoIdentifierv3.length + 3;
						break;
					case 4:
						remLength += MqttProtoIdentifierv4.length + 3;
						break;
				}

				remLength += UTF8Length(this.clientId) + 2;
				if (this.willMessage !== undefined) {
					remLength += UTF8Length(this.willMessage.destinationName) + 2;
					// Will message is always a string, sent as UTF-8 characters with a preceding length.
					willMessagePayloadBytes = this.willMessage.payloadBytes;
					if (!(willMessagePayloadBytes instanceof Uint8Array))
						willMessagePayloadBytes = new Uint8Array(payloadBytes);
					remLength += willMessagePayloadBytes.byteLength +2;
				}
				if (this.userName !== undefined)
					remLength += UTF8Length(this.userName) + 2;
				if (this.password !== undefined)
					remLength += UTF8Length(this.password) + 2;
			break;

			// Subscribe, Unsubscribe can both contain topic strings
			case MESSAGE_TYPE.SUBSCRIBE:
				first |= 0x02; // Qos = 1;
				for ( var i = 0; i < this.topics.length; i++) {
					topicStrLength[i] = UTF8Length(this.topics[i]);
					remLength += topicStrLength[i] + 2;
				}
				remLength += this.requestedQos.length; // 1 byte for each topic's Qos
				// QoS on Subscribe only
				break;

			case MESSAGE_TYPE.UNSUBSCRIBE:
				first |= 0x02; // Qos = 1;
				for ( var i = 0; i < this.topics.length; i++) {
					topicStrLength[i] = UTF8Length(this.topics[i]);
					remLength += topicStrLength[i] + 2;
				}
				break;

			case MESSAGE_TYPE.PUBREL:
				first |= 0x02; // Qos = 1;
				break;

			case MESSAGE_TYPE.PUBLISH:
				if (this.payloadMessage.duplicate) first |= 0x08;
				first  = first |= (this.payloadMessage.qos << 1);
				if (this.payloadMessage.retained) first |= 0x01;
				destinationNameLength = UTF8Length(this.payloadMessage.destinationName);
				remLength += destinationNameLength + 2;
				var payloadBytes = this.payloadMessage.payloadBytes;
				remLength += payloadBytes.byteLength;
				if (payloadBytes instanceof ArrayBuffer)
					payloadBytes = new Uint8Array(payloadBytes);
				else if (!(payloadBytes instanceof Uint8Array))
					payloadBytes = new Uint8Array(payloadBytes.buffer);
				break;

			case MESSAGE_TYPE.DISCONNECT:
				break;

			default:
				break;
		}

		// Now we can allocate a buffer for the message

		var mbi = encodeMBI(remLength);  // Convert the length to MQTT MBI format
		var pos = mbi.length + 1;        // Offset of start of variable header
		var buffer = new ArrayBuffer(remLength + pos);
		var byteStream = new Uint8Array(buffer);    // view it as a sequence of bytes

		//Write the fixed header into the buffer
		byteStream[0] = first;
		byteStream.set(mbi,1);

		// If this is a PUBLISH then the variable header starts with a topic
		if (this.type == MESSAGE_TYPE.PUBLISH)
			pos = writeString(this.payloadMessage.destinationName, destinationNameLength, byteStream, pos);
		// If this is a CONNECT then the variable header contains the protocol name/version, flags and keepalive time

		else if (this.type == MESSAGE_TYPE.CONNECT) {
			switch (this.mqttVersion) {
				case 3:
					byteStream.set(MqttProtoIdentifierv3, pos);
					pos += MqttProtoIdentifierv3.length;
					break;
				case 4:
					byteStream.set(MqttProtoIdentifierv4, pos);
					pos += MqttProtoIdentifierv4.length;
					break;
			}
			var connectFlags = 0;
			if (this.cleanSession)
				connectFlags = 0x02;
			if (this.willMessage !== undefined ) {
				connectFlags |= 0x04;
				connectFlags |= (this.willMessage.qos<<3);
				if (this.willMessage.retained) {
					connectFlags |= 0x20;
				}
			}
			if (this.userName !== undefined)
				connectFlags |= 0x80;
			if (this.password !== undefined)
				connectFlags |= 0x40;
			byteStream[pos++] = connectFlags;
			pos = writeUint16 (this.keepAliveInterval, byteStream, pos);
		}

		// Output the messageIdentifier - if there is one
		if (this.messageIdentifier !== undefined)
			pos = writeUint16 (this.messageIdentifier, byteStream, pos);

		switch(this.type) {
			case MESSAGE_TYPE.CONNECT:
				pos = writeString(this.clientId, UTF8Length(this.clientId), byteStream, pos);
				if (this.willMessage !== undefined) {
					pos = writeString(this.willMessage.destinationName, UTF8Length(this.willMessage.destinationName), byteStream, pos);
					pos = writeUint16(willMessagePayloadBytes.byteLength, byteStream, pos);
					byteStream.set(willMessagePayloadBytes, pos);
					pos += willMessagePayloadBytes.byteLength;

				}
			if (this.userName !== undefined)
				pos = writeString(this.userName, UTF8Length(this.userName), byteStream, pos);
			if (this.password !== undefined)
				pos = writeString(this.password, UTF8Length(this.password), byteStream, pos);
			break;

			case MESSAGE_TYPE.PUBLISH:
				// PUBLISH has a text or binary payload, if text do not add a 2 byte length field, just the UTF characters.
				byteStream.set(payloadBytes, pos);

				break;

//    	    case MESSAGE_TYPE.PUBREC:
//    	    case MESSAGE_TYPE.PUBREL:
//    	    case MESSAGE_TYPE.PUBCOMP:
//    	    	break;

			case MESSAGE_TYPE.SUBSCRIBE:
				// SUBSCRIBE has a list of topic strings and request QoS
				for (var i=0; i<this.topics.length; i++) {
					pos = writeString(this.topics[i], topicStrLength[i], byteStream, pos);
					byteStream[pos++] = this.requestedQos[i];
				}
				break;

			case MESSAGE_TYPE.UNSUBSCRIBE:
				// UNSUBSCRIBE has a list of topic strings
				for (var i=0; i<this.topics.length; i++)
					pos = writeString(this.topics[i], topicStrLength[i], byteStream, pos);
				break;

			default:
				// Do nothing.
		}

		return buffer;
	};

	function decodeMessage(input,pos) {
	    var startingPos = pos;
		var first = input[pos];
		var type = first >> 4;
		var messageInfo = first &= 0x0f;
		pos += 1;


		// Decode the remaining length (MBI format)

		var digit;
		var remLength = 0;
		var multiplier = 1;
		do {
			if (pos == input.length) {
			    return [null,startingPos];
			}
			digit = input[pos++];
			remLength += ((digit & 0x7F) * multiplier);
			multiplier *= 128;
		} while ((digit & 0x80) !== 0);

		var endPos = pos+remLength;
		if (endPos > input.length) {
		    return [null,startingPos];
		}

		var wireMessage = new WireMessage(type);
		switch(type) {
			case MESSAGE_TYPE.CONNACK:
				var connectAcknowledgeFlags = input[pos++];
				if (connectAcknowledgeFlags & 0x01)
					wireMessage.sessionPresent = true;
				wireMessage.returnCode = input[pos++];
				break;

			case MESSAGE_TYPE.PUBLISH:
				var qos = (messageInfo >> 1) & 0x03;

				var len = readUint16(input, pos);
				pos += 2;
				var topicName = parseUTF8(input, pos, len);
				pos += len;
				// If QoS 1 or 2 there will be a messageIdentifier
				if (qos > 0) {
					wireMessage.messageIdentifier = readUint16(input, pos);
					pos += 2;
				}

				var message = new Paho.MQTT.Message(input.subarray(pos, endPos));
				if ((messageInfo & 0x01) == 0x01)
					message.retained = true;
				if ((messageInfo & 0x08) == 0x08)
					message.duplicate =  true;
				message.qos = qos;
				message.destinationName = topicName;
				wireMessage.payloadMessage = message;
				break;

			case  MESSAGE_TYPE.PUBACK:
			case  MESSAGE_TYPE.PUBREC:
			case  MESSAGE_TYPE.PUBREL:
			case  MESSAGE_TYPE.PUBCOMP:
			case  MESSAGE_TYPE.UNSUBACK:
				wireMessage.messageIdentifier = readUint16(input, pos);
				break;

			case  MESSAGE_TYPE.SUBACK:
				wireMessage.messageIdentifier = readUint16(input, pos);
				pos += 2;
				wireMessage.returnCode = input.subarray(pos, endPos);
				break;

			default:
				break;
		}

		return [wireMessage,endPos];
	}

	function writeUint16(input, buffer, offset) {
		buffer[offset++] = input >> 8;      //MSB
		buffer[offset++] = input % 256;     //LSB
		return offset;
	}

	function writeString(input, utf8Length, buffer, offset) {
		offset = writeUint16(utf8Length, buffer, offset);
		stringToUTF8(input, buffer, offset);
		return offset + utf8Length;
	}

	function readUint16(buffer, offset) {
		return 256*buffer[offset] + buffer[offset+1];
	}

	/**
	 * Encodes an MQTT Multi-Byte Integer
	 * @private
	 */
	function encodeMBI(number) {
		var output = new Array(1);
		var numBytes = 0;

		do {
			var digit = number % 128;
			number = number >> 7;
			if (number > 0) {
				digit |= 0x80;
			}
			output[numBytes++] = digit;
		} while ( (number > 0) && (numBytes<4) );

		return output;
	}

	/**
	 * Takes a String and calculates its length in bytes when encoded in UTF8.
	 * @private
	 */
	function UTF8Length(input) {
		var output = 0;
		for (var i = 0; i<input.length; i++)
		{
			var charCode = input.charCodeAt(i);
				if (charCode > 0x7FF)
				   {
					  // Surrogate pair means its a 4 byte character
					  if (0xD800 <= charCode && charCode <= 0xDBFF)
						{
						  i++;
						  output++;
						}
				   output +=3;
				   }
			else if (charCode > 0x7F)
				output +=2;
			else
				output++;
		}
		return output;
	}

	/**
	 * Takes a String and writes it into an array as UTF8 encoded bytes.
	 * @private
	 */
	function stringToUTF8(input, output, start) {
		var pos = start;
		for (var i = 0; i<input.length; i++) {
			var charCode = input.charCodeAt(i);

			// Check for a surrogate pair.
			if (0xD800 <= charCode && charCode <= 0xDBFF) {
				var lowCharCode = input.charCodeAt(++i);
				if (isNaN(lowCharCode)) {
					throw new Error(format(ERROR.MALFORMED_UNICODE, [charCode, lowCharCode]));
				}
				charCode = ((charCode - 0xD800)<<10) + (lowCharCode - 0xDC00) + 0x10000;

			}

			if (charCode <= 0x7F) {
				output[pos++] = charCode;
			} else if (charCode <= 0x7FF) {
				output[pos++] = charCode>>6  & 0x1F | 0xC0;
				output[pos++] = charCode     & 0x3F | 0x80;
			} else if (charCode <= 0xFFFF) {
				output[pos++] = charCode>>12 & 0x0F | 0xE0;
				output[pos++] = charCode>>6  & 0x3F | 0x80;
				output[pos++] = charCode     & 0x3F | 0x80;
			} else {
				output[pos++] = charCode>>18 & 0x07 | 0xF0;
				output[pos++] = charCode>>12 & 0x3F | 0x80;
				output[pos++] = charCode>>6  & 0x3F | 0x80;
				output[pos++] = charCode     & 0x3F | 0x80;
			}
		}
		return output;
	}

	function parseUTF8(input, offset, length) {
		var output = "";
		var utf16;
		var pos = offset;

		while (pos < offset+length)
		{
			var byte1 = input[pos++];
			if (byte1 < 128)
				utf16 = byte1;
			else
			{
				var byte2 = input[pos++]-128;
				if (byte2 < 0)
					throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16),""]));
				if (byte1 < 0xE0)             // 2 byte character
					utf16 = 64*(byte1-0xC0) + byte2;
				else
				{
					var byte3 = input[pos++]-128;
					if (byte3 < 0)
						throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16), byte3.toString(16)]));
					if (byte1 < 0xF0)        // 3 byte character
						utf16 = 4096*(byte1-0xE0) + 64*byte2 + byte3;
								else
								{
								   var byte4 = input[pos++]-128;
								   if (byte4 < 0)
						throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16), byte3.toString(16), byte4.toString(16)]));
								   if (byte1 < 0xF8)        // 4 byte character
										   utf16 = 262144*(byte1-0xF0) + 4096*byte2 + 64*byte3 + byte4;
					   else                     // longer encodings are not supported
						throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16), byte3.toString(16), byte4.toString(16)]));
								}
				}
			}

				if (utf16 > 0xFFFF)   // 4 byte character - express as a surrogate pair
				  {
					 utf16 -= 0x10000;
					 output += String.fromCharCode(0xD800 + (utf16 >> 10)); // lead character
					 utf16 = 0xDC00 + (utf16 & 0x3FF);  // trail character
				  }
			output += String.fromCharCode(utf16);
		}
		return output;
	}

	/**
	 * Repeat keepalive requests, monitor responses.
	 * @ignore
	 */
	var Pinger = function(client, window, keepAliveInterval) {
		this._client = client;
		this._window = window;
		this._keepAliveInterval = keepAliveInterval*1000;
		this.isReset = false;

		var pingReq = new WireMessage(MESSAGE_TYPE.PINGREQ).encode();

		var doTimeout = function (pinger) {
			return function () {
				return doPing.apply(pinger);
			};
		};

		/** @ignore */
		var doPing = function() {
			if (!this.isReset) {
				this._client._trace("Pinger.doPing", "Timed out");
				this._client._disconnected( ERROR.PING_TIMEOUT.code , format(ERROR.PING_TIMEOUT));
			} else {
				this.isReset = false;
				this._client._trace("Pinger.doPing", "send PINGREQ");
				this._client.socket.send(pingReq);
				this.timeout = this._window.setTimeout(doTimeout(this), this._keepAliveInterval);
			}
		};

		this.reset = function() {
			this.isReset = true;
			this._window.clearTimeout(this.timeout);
			if (this._keepAliveInterval > 0)
				this.timeout = setTimeout(doTimeout(this), this._keepAliveInterval);
		};

		this.cancel = function() {
			this._window.clearTimeout(this.timeout);
		};
	 };

	/**
	 * Monitor request completion.
	 * @ignore
	 */
	var Timeout = function(client, window, timeoutSeconds, action, args) {
		this._window = window;
		if (!timeoutSeconds)
			timeoutSeconds = 30;

		var doTimeout = function (action, client, args) {
			return function () {
				return action.apply(client, args);
			};
		};
		this.timeout = setTimeout(doTimeout(action, client, args), timeoutSeconds * 1000);

		this.cancel = function() {
			this._window.clearTimeout(this.timeout);
		};
	};

	/*
	 * Internal implementation of the Websockets MQTT V3.1 client.
	 *
	 * @name Paho.MQTT.ClientImpl @constructor
	 * @param {String} host the DNS nameof the webSocket host.
	 * @param {Number} port the port number for that host.
	 * @param {String} clientId the MQ client identifier.
	 */
	var ClientImpl = function (uri, host, port, path, clientId) {
		// Check dependencies are satisfied in this browser.
		if (!("WebSocket" in global && global.WebSocket !== null)) {
			throw new Error(format(ERROR.UNSUPPORTED, ["WebSocket"]));
		}
		if (!("localStorage" in global && global.localStorage !== null)) {
			throw new Error(format(ERROR.UNSUPPORTED, ["localStorage"]));
		}
		if (!("ArrayBuffer" in global && global.ArrayBuffer !== null)) {
			throw new Error(format(ERROR.UNSUPPORTED, ["ArrayBuffer"]));
		}
		this._trace("Paho.MQTT.Client", uri, host, port, path, clientId);

		this.host = host;
		this.port = port;
		this.path = path;
		this.uri = uri;
		this.clientId = clientId;
		this._wsuri = null;

		// Local storagekeys are qualified with the following string.
		// The conditional inclusion of path in the key is for backward
		// compatibility to when the path was not configurable and assumed to
		// be /mqtt
		this._localKey=host+":"+port+(path!="/mqtt"?":"+path:"")+":"+clientId+":";

		// Create private instance-only message queue
		// Internal queue of messages to be sent, in sending order.
		this._msg_queue = [];
		this._buffered_msg_queue = [];

		// Messages we have sent and are expecting a response for, indexed by their respective message ids.
		this._sentMessages = {};

		// Messages we have received and acknowleged and are expecting a confirm message for
		// indexed by their respective message ids.
		this._receivedMessages = {};

		// Internal list of callbacks to be executed when messages
		// have been successfully sent over web socket, e.g. disconnect
		// when it doesn't have to wait for ACK, just message is dispatched.
		this._notify_msg_sent = {};

		// Unique identifier for SEND messages, incrementing
		// counter as messages are sent.
		this._message_identifier = 1;

		// Used to determine the transmission sequence of stored sent messages.
		this._sequence = 0;


		// Load the local state, if any, from the saved version, only restore state relevant to this client.
		for (var key in localStorage)
			if (   key.indexOf("Sent:"+this._localKey) === 0 || key.indexOf("Received:"+this._localKey) === 0)
			this.restore(key);
	};

	// Messaging Client public instance members.
	ClientImpl.prototype.host = null;
	ClientImpl.prototype.port = null;
	ClientImpl.prototype.path = null;
	ClientImpl.prototype.uri = null;
	ClientImpl.prototype.clientId = null;

	// Messaging Client private instance members.
	ClientImpl.prototype.socket = null;
	/* true once we have received an acknowledgement to a CONNECT packet. */
	ClientImpl.prototype.connected = false;
	/* The largest message identifier allowed, may not be larger than 2**16 but
	 * if set smaller reduces the maximum number of outbound messages allowed.
	 */
	ClientImpl.prototype.maxMessageIdentifier = 65536;
	ClientImpl.prototype.connectOptions = null;
	ClientImpl.prototype.hostIndex = null;
	ClientImpl.prototype.onConnected = null;
	ClientImpl.prototype.onConnectionLost = null;
	ClientImpl.prototype.onMessageDelivered = null;
	ClientImpl.prototype.onMessageArrived = null;
	ClientImpl.prototype.traceFunction = null;
	ClientImpl.prototype._msg_queue = null;
	ClientImpl.prototype._buffered_msg_queue = null;
	ClientImpl.prototype._connectTimeout = null;
	/* The sendPinger monitors how long we allow before we send data to prove to the server that we are alive. */
	ClientImpl.prototype.sendPinger = null;
	/* The receivePinger monitors how long we allow before we require evidence that the server is alive. */
	ClientImpl.prototype.receivePinger = null;
	ClientImpl.prototype._reconnectInterval = 1; // Reconnect Delay, starts at 1 second
	ClientImpl.prototype._reconnecting = false;
	ClientImpl.prototype._reconnectTimeout = null;
	ClientImpl.prototype.disconnectedPublishing = false;
	ClientImpl.prototype.disconnectedBufferSize = 5000;

	ClientImpl.prototype.receiveBuffer = null;

	ClientImpl.prototype._traceBuffer = null;
	ClientImpl.prototype._MAX_TRACE_ENTRIES = 100;

	ClientImpl.prototype.connect = function (connectOptions) {
		var connectOptionsMasked = this._traceMask(connectOptions, "password");
		this._trace("Client.connect", connectOptionsMasked, this.socket, this.connected);

		if (this.connected)
			throw new Error(format(ERROR.INVALID_STATE, ["already connected"]));
		if (this.socket)
			throw new Error(format(ERROR.INVALID_STATE, ["already connected"]));

		if (this._reconnecting) {
			// connect() function is called while reconnect is in progress.
			// Terminate the auto reconnect process to use new connect options.
			this._reconnectTimeout.cancel();
			this._reconnectTimeout = null;
			this._reconnecting = false;
		}

		this.connectOptions = connectOptions;
		this._reconnectInterval = 1;
		this._reconnecting = false;
		if (connectOptions.uris) {
			this.hostIndex = 0;
			this._doConnect(connectOptions.uris[0]);
		} else {
			this._doConnect(this.uri);
		}

	};

	ClientImpl.prototype.subscribe = function (filter, subscribeOptions) {
		this._trace("Client.subscribe", filter, subscribeOptions);

		if (!this.connected)
			throw new Error(format(ERROR.INVALID_STATE, ["not connected"]));

		var wireMessage = new WireMessage(MESSAGE_TYPE.SUBSCRIBE);
		wireMessage.topics=[filter];
		if (subscribeOptions.qos !== undefined)
			wireMessage.requestedQos = [subscribeOptions.qos];
		else
			wireMessage.requestedQos = [0];

		if (subscribeOptions.onSuccess) {
			wireMessage.onSuccess = function(grantedQos) {subscribeOptions.onSuccess({invocationContext:subscribeOptions.invocationContext,grantedQos:grantedQos});};
		}

		if (subscribeOptions.onFailure) {
			wireMessage.onFailure = function(errorCode) {subscribeOptions.onFailure({invocationContext:subscribeOptions.invocationContext,errorCode:errorCode, errorMessage:format(errorCode)});};
		}

		if (subscribeOptions.timeout) {
			wireMessage.timeOut = new Timeout(this, window, subscribeOptions.timeout, subscribeOptions.onFailure,
						[{invocationContext:subscribeOptions.invocationContext,
						errorCode:ERROR.SUBSCRIBE_TIMEOUT.code,
						errorMessage:format(ERROR.SUBSCRIBE_TIMEOUT)}]);
		}

		// All subscriptions return a SUBACK.
		this._requires_ack(wireMessage);
		this._schedule_message(wireMessage);
	};

	/** @ignore */
	ClientImpl.prototype.unsubscribe = function(filter, unsubscribeOptions) {
		this._trace("Client.unsubscribe", filter, unsubscribeOptions);

		if (!this.connected)
		   throw new Error(format(ERROR.INVALID_STATE, ["not connected"]));

		var wireMessage = new WireMessage(MESSAGE_TYPE.UNSUBSCRIBE);
		wireMessage.topics = [filter];

		if (unsubscribeOptions.onSuccess) {
			wireMessage.callback = function() {unsubscribeOptions.onSuccess({invocationContext:unsubscribeOptions.invocationContext});};
		}
		if (unsubscribeOptions.timeout) {
			wireMessage.timeOut = new Timeout(this, window, unsubscribeOptions.timeout, unsubscribeOptions.onFailure,
					  [{invocationContext:unsubscribeOptions.invocationContext,
						errorCode:ERROR.UNSUBSCRIBE_TIMEOUT.code,
						errorMessage:format(ERROR.UNSUBSCRIBE_TIMEOUT)}]);
		}

		// All unsubscribes return a SUBACK.
		this._requires_ack(wireMessage);
		this._schedule_message(wireMessage);
	};

	ClientImpl.prototype.send = function (message) {
		this._trace("Client.send", message);

		wireMessage = new WireMessage(MESSAGE_TYPE.PUBLISH);
		wireMessage.payloadMessage = message;

		if (this.connected) {
			// Mark qos 1 & 2 message as "ACK required"
			// For qos 0 message, invoke onMessageDelivered callback if there is one.
			// Then schedule the message.
			if (message.qos > 0) {
			this._requires_ack(wireMessage);
			} else if (this.onMessageDelivered) {
			this._notify_msg_sent[wireMessage] = this.onMessageDelivered(wireMessage.payloadMessage);
			}
		this._schedule_message(wireMessage);
		} else {
			// Currently disconnected, will not schedule this message
			// Check if reconnecting is in progress and disconnected publish is enabled.
			if (this._reconnecting && this.disconnectedPublishing) {
				// Check the limit which include the "required ACK" messages
				var messageCount = Object.keys(this._sentMessages).length + this._buffered_msg_queue.length;
				if (messageCount > this.disconnectedBufferSize) {
					throw new Error(format(ERROR.BUFFER_FULL, [this.disconnectedBufferSize]));
				} else {
					if (message.qos > 0) {
						// Mark this message as "ACK required"
						this._requires_ack(wireMessage);
					} else {
						wireMessage.sequence = ++this._sequence;
						this._buffered_msg_queue.push(wireMessage);
					}
				}
			} else {
				throw new Error(format(ERROR.INVALID_STATE, ["not connected"]));
			}
		}
	};

	ClientImpl.prototype.disconnect = function () {
		this._trace("Client.disconnect");

		if (this._reconnecting) {
			// disconnect() function is called while reconnect is in progress.
			// Terminate the auto reconnect process.
			this._reconnectTimeout.cancel();
			this._reconnectTimeout = null;
			this._reconnecting = false;
		}

		if (!this.socket)
			throw new Error(format(ERROR.INVALID_STATE, ["not connecting or connected"]));

		wireMessage = new WireMessage(MESSAGE_TYPE.DISCONNECT);

		// Run the disconnected call back as soon as the message has been sent,
		// in case of a failure later on in the disconnect processing.
		// as a consequence, the _disconected call back may be run several times.
		this._notify_msg_sent[wireMessage] = scope(this._disconnected, this);

		this._schedule_message(wireMessage);
	};

	ClientImpl.prototype.getTraceLog = function () {
		if ( this._traceBuffer !== null ) {
			this._trace("Client.getTraceLog", new Date());
			this._trace("Client.getTraceLog in flight messages", this._sentMessages.length);
			for (var key in this._sentMessages)
				this._trace("_sentMessages ",key, this._sentMessages[key]);
			for (var key in this._receivedMessages)
				this._trace("_receivedMessages ",key, this._receivedMessages[key]);

			return this._traceBuffer;
		}
	};

	ClientImpl.prototype.startTrace = function () {
		if ( this._traceBuffer === null ) {
			this._traceBuffer = [];
		}
		this._trace("Client.startTrace", new Date(), version);
	};

	ClientImpl.prototype.stopTrace = function () {
		delete this._traceBuffer;
	};

	ClientImpl.prototype._doConnect = function (wsurl) {
		// When the socket is open, this client will send the CONNECT WireMessage using the saved parameters.
		if (this.connectOptions.useSSL) {
		    var uriParts = wsurl.split(":");
		    uriParts[0] = "wss";
		    wsurl = uriParts.join(":");
		}
		this._wsuri = wsurl;
		this.connected = false;



		if (this.connectOptions.mqttVersion < 4) {
			this.socket = new WebSocket(wsurl, ["mqttv3.1"]);
		} else {
			this.socket = new WebSocket(wsurl, ["mqtt"]);
		}
		this.socket.binaryType = 'arraybuffer';
		this.socket.onopen = scope(this._on_socket_open, this);
		this.socket.onmessage = scope(this._on_socket_message, this);
		this.socket.onerror = scope(this._on_socket_error, this);
		this.socket.onclose = scope(this._on_socket_close, this);

		this.sendPinger = new Pinger(this, window, this.connectOptions.keepAliveInterval);
		this.receivePinger = new Pinger(this, window, this.connectOptions.keepAliveInterval);
		if (this._connectTimeout) {
			this._connectTimeout.cancel();
			this._connectTimeout = null;
		}
		this._connectTimeout = new Timeout(this, window, this.connectOptions.timeout, this._disconnected,  [ERROR.CONNECT_TIMEOUT.code, format(ERROR.CONNECT_TIMEOUT)]);
	};


	// Schedule a new message to be sent over the WebSockets
	// connection. CONNECT messages cause WebSocket connection
	// to be started. All other messages are queued internally
	// until this has happened. When WS connection starts, process
	// all outstanding messages.
	ClientImpl.prototype._schedule_message = function (message) {
		this._msg_queue.push(message);
		// Process outstanding messages in the queue if we have an  open socket, and have received CONNACK.
		if (this.connected) {
			this._process_queue();
		}
	};

	ClientImpl.prototype.store = function(prefix, wireMessage) {
		var storedMessage = {type:wireMessage.type, messageIdentifier:wireMessage.messageIdentifier, version:1};

		switch(wireMessage.type) {
		  case MESSAGE_TYPE.PUBLISH:
			  if(wireMessage.pubRecReceived)
				  storedMessage.pubRecReceived = true;

			  // Convert the payload to a hex string.
			  storedMessage.payloadMessage = {};
			  var hex = "";
			  var messageBytes = wireMessage.payloadMessage.payloadBytes;
			  for (var i=0; i<messageBytes.length; i++) {
				if (messageBytes[i] <= 0xF)
				  hex = hex+"0"+messageBytes[i].toString(16);
				else
				  hex = hex+messageBytes[i].toString(16);
			  }
			  storedMessage.payloadMessage.payloadHex = hex;

			  storedMessage.payloadMessage.qos = wireMessage.payloadMessage.qos;
			  storedMessage.payloadMessage.destinationName = wireMessage.payloadMessage.destinationName;
			  if (wireMessage.payloadMessage.duplicate)
				  storedMessage.payloadMessage.duplicate = true;
			  if (wireMessage.payloadMessage.retained)
				  storedMessage.payloadMessage.retained = true;

			  // Add a sequence number to sent messages.
			  if ( prefix.indexOf("Sent:") === 0 ) {
				  if ( wireMessage.sequence === undefined )
					  wireMessage.sequence = ++this._sequence;
				  storedMessage.sequence = wireMessage.sequence;
			  }
			  break;

			default:
				throw Error(format(ERROR.INVALID_STORED_DATA, [key, storedMessage]));
		}
		localStorage.setItem(prefix+this._localKey+wireMessage.messageIdentifier, JSON.stringify(storedMessage));
	};

	ClientImpl.prototype.restore = function(key) {
		var value = localStorage.getItem(key);
		var storedMessage = JSON.parse(value);

		var wireMessage = new WireMessage(storedMessage.type, storedMessage);

		switch(storedMessage.type) {
		  case MESSAGE_TYPE.PUBLISH:
			  // Replace the payload message with a Message object.
			  var hex = storedMessage.payloadMessage.payloadHex;
			  var buffer = new ArrayBuffer((hex.length)/2);
			  var byteStream = new Uint8Array(buffer);
			  var i = 0;
			  while (hex.length >= 2) {
				  var x = parseInt(hex.substring(0, 2), 16);
				  hex = hex.substring(2, hex.length);
				  byteStream[i++] = x;
			  }
			  var payloadMessage = new Paho.MQTT.Message(byteStream);

			  payloadMessage.qos = storedMessage.payloadMessage.qos;
			  payloadMessage.destinationName = storedMessage.payloadMessage.destinationName;
			  if (storedMessage.payloadMessage.duplicate)
				  payloadMessage.duplicate = true;
			  if (storedMessage.payloadMessage.retained)
				  payloadMessage.retained = true;
			  wireMessage.payloadMessage = payloadMessage;

			  break;

			default:
			  throw Error(format(ERROR.INVALID_STORED_DATA, [key, value]));
		}

		if (key.indexOf("Sent:"+this._localKey) === 0) {
			wireMessage.payloadMessage.duplicate = true;
			this._sentMessages[wireMessage.messageIdentifier] = wireMessage;
		} else if (key.indexOf("Received:"+this._localKey) === 0) {
			this._receivedMessages[wireMessage.messageIdentifier] = wireMessage;
		}
	};

	ClientImpl.prototype._process_queue = function () {
		var message = null;
		// Process messages in order they were added
		var fifo = this._msg_queue.reverse();

		// Send all queued messages down socket connection
		while ((message = fifo.pop())) {
			this._socket_send(message);
			// Notify listeners that message was successfully sent
			if (this._notify_msg_sent[message]) {
				this._notify_msg_sent[message]();
				delete this._notify_msg_sent[message];
			}
		}
	};

	/**
	 * Expect an ACK response for this message. Add message to the set of in progress
	 * messages and set an unused identifier in this message.
	 * @ignore
	 */
	ClientImpl.prototype._requires_ack = function (wireMessage) {
		var messageCount = Object.keys(this._sentMessages).length;
		if (messageCount > this.maxMessageIdentifier)
			throw Error ("Too many messages:"+messageCount);

		while(this._sentMessages[this._message_identifier] !== undefined) {
			this._message_identifier++;
		}
		wireMessage.messageIdentifier = this._message_identifier;
		this._sentMessages[wireMessage.messageIdentifier] = wireMessage;
		if (wireMessage.type === MESSAGE_TYPE.PUBLISH) {
			this.store("Sent:", wireMessage);
		}
		if (this._message_identifier === this.maxMessageIdentifier) {
			this._message_identifier = 1;
		}
	};

	/**
	 * Called when the underlying websocket has been opened.
	 * @ignore
	 */
	ClientImpl.prototype._on_socket_open = function () {
		// Create the CONNECT message object.
		var wireMessage = new WireMessage(MESSAGE_TYPE.CONNECT, this.connectOptions);
		wireMessage.clientId = this.clientId;
		this._socket_send(wireMessage);
	};

	/**
	 * Called when the underlying websocket has received a complete packet.
	 * @ignore
	 */
	ClientImpl.prototype._on_socket_message = function (event) {
		this._trace("Client._on_socket_message", event.data);
		var messages = this._deframeMessages(event.data);
		for (var i = 0; i < messages.length; i+=1) {
		    this._handleMessage(messages[i]);
		}
	};

	ClientImpl.prototype._deframeMessages = function(data) {
		var byteArray = new Uint8Array(data);
		var messages = [];
	    if (this.receiveBuffer) {
	        var newData = new Uint8Array(this.receiveBuffer.length+byteArray.length);
	        newData.set(this.receiveBuffer);
	        newData.set(byteArray,this.receiveBuffer.length);
	        byteArray = newData;
	        delete this.receiveBuffer;
	    }
		try {
		    var offset = 0;
		    while(offset < byteArray.length) {
		        var result = decodeMessage(byteArray,offset);
		        var wireMessage = result[0];
		        offset = result[1];
		        if (wireMessage !== null) {
		            messages.push(wireMessage);
		        } else {
		            break;
		        }
		    }
		    if (offset < byteArray.length) {
		    	this.receiveBuffer = byteArray.subarray(offset);
		    }
		} catch (error) {
			var errorStack = ((error.hasOwnProperty('stack') == 'undefined') ? error.stack.toString() : "No Error Stack Available");
			this._disconnected(ERROR.INTERNAL_ERROR.code , format(ERROR.INTERNAL_ERROR, [error.message,errorStack]));
			return;
		}
		return messages;
	};

	ClientImpl.prototype._handleMessage = function(wireMessage) {

		this._trace("Client._handleMessage", wireMessage);

		try {
			switch(wireMessage.type) {
			case MESSAGE_TYPE.CONNACK:
				this._connectTimeout.cancel();
				if (this._reconnectTimeout)
					this._reconnectTimeout.cancel();

				// If we have started using clean session then clear up the local state.
				if (this.connectOptions.cleanSession) {
					for (var key in this._sentMessages) {
						var sentMessage = this._sentMessages[key];
						localStorage.removeItem("Sent:"+this._localKey+sentMessage.messageIdentifier);
					}
					this._sentMessages = {};

					for (var key in this._receivedMessages) {
						var receivedMessage = this._receivedMessages[key];
						localStorage.removeItem("Received:"+this._localKey+receivedMessage.messageIdentifier);
					}
					this._receivedMessages = {};
				}
				// Client connected and ready for business.
				if (wireMessage.returnCode === 0) {

					this.connected = true;
					// Jump to the end of the list of uris and stop looking for a good host.

					if (this.connectOptions.uris)
            this.hostIndex = this.connectOptions.uris.length;

				} else {
					this._disconnected(ERROR.CONNACK_RETURNCODE.code , format(ERROR.CONNACK_RETURNCODE, [wireMessage.returnCode, CONNACK_RC[wireMessage.returnCode]]));
					break;
				}

				// Resend messages.
				var sequencedMessages = [];
				for (var msgId in this._sentMessages) {
					if (this._sentMessages.hasOwnProperty(msgId))
						sequencedMessages.push(this._sentMessages[msgId]);
				}

				// Also schedule qos 0 buffered messages if any
				if (this._buffered_msg_queue.length > 0) {
					var msg = null;
					var fifo = this._buffered_msg_queue.reverse();
					while ((msg = fifo.pop())) {
						sequencedMessages.push(msg);
						if (this.onMessageDelivered)
							this._notify_msg_sent[msg] = this.onMessageDelivered(msg.payloadMessage);
					}
				}

				// Sort sentMessages into the original sent order.
				var sequencedMessages = sequencedMessages.sort(function(a,b) {return a.sequence - b.sequence;} );
				for (var i=0, len=sequencedMessages.length; i<len; i++) {
					var sentMessage = sequencedMessages[i];
					if (sentMessage.type == MESSAGE_TYPE.PUBLISH && sentMessage.pubRecReceived) {
						var pubRelMessage = new WireMessage(MESSAGE_TYPE.PUBREL, {messageIdentifier:sentMessage.messageIdentifier});
						this._schedule_message(pubRelMessage);
					} else {
						this._schedule_message(sentMessage);
				}
				}

				// Execute the connectOptions.onSuccess callback if there is one.
        // Will also now return if this connection was the result of an automatic
        // reconnect and which URI was successfully connected to.
				if (this.connectOptions.onSuccess) {
					this.connectOptions.onSuccess({invocationContext:this.connectOptions.invocationContext});
				}

				var reconnected = false;
				if (this._reconnecting) {
					reconnected = true;
					this._reconnectInterval = 1;
					this._reconnecting = false;
				}

				// Execute the onConnected callback if there is one.
				this._connected(reconnected, this._wsuri);

				// Process all queued messages now that the connection is established.
				this._process_queue();
				break;

			case MESSAGE_TYPE.PUBLISH:
				this._receivePublish(wireMessage);
				break;

			case MESSAGE_TYPE.PUBACK:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				 // If this is a re flow of a PUBACK after we have restarted receivedMessage will not exist.
				if (sentMessage) {
					delete this._sentMessages[wireMessage.messageIdentifier];
					localStorage.removeItem("Sent:"+this._localKey+wireMessage.messageIdentifier);
					if (this.onMessageDelivered)
						this.onMessageDelivered(sentMessage.payloadMessage);
				}
				break;

			case MESSAGE_TYPE.PUBREC:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				// If this is a re flow of a PUBREC after we have restarted receivedMessage will not exist.
				if (sentMessage) {
					sentMessage.pubRecReceived = true;
					var pubRelMessage = new WireMessage(MESSAGE_TYPE.PUBREL, {messageIdentifier:wireMessage.messageIdentifier});
					this.store("Sent:", sentMessage);
					this._schedule_message(pubRelMessage);
				}
				break;

			case MESSAGE_TYPE.PUBREL:
				var receivedMessage = this._receivedMessages[wireMessage.messageIdentifier];
				localStorage.removeItem("Received:"+this._localKey+wireMessage.messageIdentifier);
				// If this is a re flow of a PUBREL after we have restarted receivedMessage will not exist.
				if (receivedMessage) {
					this._receiveMessage(receivedMessage);
					delete this._receivedMessages[wireMessage.messageIdentifier];
				}
				// Always flow PubComp, we may have previously flowed PubComp but the server lost it and restarted.
				var pubCompMessage = new WireMessage(MESSAGE_TYPE.PUBCOMP, {messageIdentifier:wireMessage.messageIdentifier});
				this._schedule_message(pubCompMessage);


				break;

			case MESSAGE_TYPE.PUBCOMP:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				delete this._sentMessages[wireMessage.messageIdentifier];
				localStorage.removeItem("Sent:"+this._localKey+wireMessage.messageIdentifier);
				if (this.onMessageDelivered)
					this.onMessageDelivered(sentMessage.payloadMessage);
				break;

			case MESSAGE_TYPE.SUBACK:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				if (sentMessage) {
					if(sentMessage.timeOut)
						sentMessage.timeOut.cancel();
					// This will need to be fixed when we add multiple topic support
          			if (wireMessage.returnCode[0] === 0x80) {
						if (sentMessage.onFailure) {
							sentMessage.onFailure(wireMessage.returnCode);
						}
					} else if (sentMessage.onSuccess) {
						sentMessage.onSuccess(wireMessage.returnCode);
					}
					delete this._sentMessages[wireMessage.messageIdentifier];
				}
				break;

			case MESSAGE_TYPE.UNSUBACK:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				if (sentMessage) {
					if (sentMessage.timeOut)
						sentMessage.timeOut.cancel();
					if (sentMessage.callback) {
						sentMessage.callback();
					}
					delete this._sentMessages[wireMessage.messageIdentifier];
				}

				break;

			case MESSAGE_TYPE.PINGRESP:
				/* The sendPinger or receivePinger may have sent a ping, the receivePinger has already been reset. */
				this.sendPinger.reset();
				break;

			case MESSAGE_TYPE.DISCONNECT:
				// Clients do not expect to receive disconnect packets.
				this._disconnected(ERROR.INVALID_MQTT_MESSAGE_TYPE.code , format(ERROR.INVALID_MQTT_MESSAGE_TYPE, [wireMessage.type]));
				break;

			default:
				this._disconnected(ERROR.INVALID_MQTT_MESSAGE_TYPE.code , format(ERROR.INVALID_MQTT_MESSAGE_TYPE, [wireMessage.type]));
			}
		} catch (error) {
			var errorStack = ((error.hasOwnProperty('stack') == 'undefined') ? error.stack.toString() : "No Error Stack Available");
			this._disconnected(ERROR.INTERNAL_ERROR.code , format(ERROR.INTERNAL_ERROR, [error.message,errorStack]));
			return;
		}
	};

	/** @ignore */
	ClientImpl.prototype._on_socket_error = function (error) {
		if (!this._reconnecting) {
		this._disconnected(ERROR.SOCKET_ERROR.code , format(ERROR.SOCKET_ERROR, [error.data]));
		}
	};

	/** @ignore */
	ClientImpl.prototype._on_socket_close = function () {
		if (!this._reconnecting) {
		this._disconnected(ERROR.SOCKET_CLOSE.code , format(ERROR.SOCKET_CLOSE));
		}
	};

	/** @ignore */
	ClientImpl.prototype._socket_send = function (wireMessage) {

		if (wireMessage.type == 1) {
			var wireMessageMasked = this._traceMask(wireMessage, "password");
			this._trace("Client._socket_send", wireMessageMasked);
		}
		else this._trace("Client._socket_send", wireMessage);

		this.socket.send(wireMessage.encode());
		/* We have proved to the server we are alive. */
		this.sendPinger.reset();
	};

	/** @ignore */
	ClientImpl.prototype._receivePublish = function (wireMessage) {
		switch(wireMessage.payloadMessage.qos) {
			case "undefined":
			case 0:
				this._receiveMessage(wireMessage);
				break;

			case 1:
				var pubAckMessage = new WireMessage(MESSAGE_TYPE.PUBACK, {messageIdentifier:wireMessage.messageIdentifier});
				this._schedule_message(pubAckMessage);
				this._receiveMessage(wireMessage);
				break;

			case 2:
				this._receivedMessages[wireMessage.messageIdentifier] = wireMessage;
				this.store("Received:", wireMessage);
				var pubRecMessage = new WireMessage(MESSAGE_TYPE.PUBREC, {messageIdentifier:wireMessage.messageIdentifier});
				this._schedule_message(pubRecMessage);

				break;

			default:
				throw Error("Invaild qos="+wireMmessage.payloadMessage.qos);
		}
	};

	/** @ignore */
	ClientImpl.prototype._receiveMessage = function (wireMessage) {
		if (this.onMessageArrived) {
			this.onMessageArrived(wireMessage.payloadMessage);
		}
	};

	/**
	 * Client has connected.
	 * @param {reconnect} [boolean] indicate if this was a result of reconnect operation.
	 * @param {uri} [string] fully qualified WebSocket URI of the server.
	 */
	ClientImpl.prototype._connected = function (reconnect, uri) {
		// Execute the onConnected callback if there is one.
		if (this.onConnected)
			this.onConnected(reconnect, uri);
	};

	/**
	 * Attempts to reconnect the client to the server.
   * For each reconnect attempt, will double the reconnect interval
   * up to 128 seconds.
	 */
	ClientImpl.prototype._reconnect = function () {
		this._trace("Client._reconnect");
		if (!this.connected) {
			this._reconnecting = true;
			this.sendPinger.cancel();
			this.receivePinger.cancel();
			if (this._reconnectInterval < 128)
				this._reconnectInterval = this._reconnectInterval * 2;
			if (this.connectOptions.uris) {
				this.hostIndex = 0;
				this._doConnect(this.connectOptions.uris[0]);
			} else {
				this._doConnect(this.uri);
			}
		}
	};

	/**
	 * Client has disconnected either at its own request or because the server
	 * or network disconnected it. Remove all non-durable state.
	 * @param {errorCode} [number] the error number.
	 * @param {errorText} [string] the error text.
	 * @ignore
	 */
	ClientImpl.prototype._disconnected = function (errorCode, errorText) {
		this._trace("Client._disconnected", errorCode, errorText);

		if (errorCode !== undefined && this._reconnecting) {
      //Continue automatic reconnect process
  		this._reconnectTimeout = new Timeout(this, window, this._reconnectInterval, this._reconnect);
			return;
		}

		this.sendPinger.cancel();
		this.receivePinger.cancel();
		if (this._connectTimeout) {
			this._connectTimeout.cancel();
			this._connectTimeout = null;
		}

		// Clear message buffers.
		this._msg_queue = [];
		this._buffered_msg_queue = [];
		this._notify_msg_sent = {};

		if (this.socket) {
			// Cancel all socket callbacks so that they cannot be driven again by this socket.
			this.socket.onopen = null;
			this.socket.onmessage = null;
			this.socket.onerror = null;
			this.socket.onclose = null;
			if (this.socket.readyState === 1)
				this.socket.close();
			delete this.socket;
		}

		if (this.connectOptions.uris && this.hostIndex < this.connectOptions.uris.length-1) {
			// Try the next host.
			this.hostIndex++;
			this._doConnect(this.connectOptions.uris[this.hostIndex]);
		} else {

			if (errorCode === undefined) {
				errorCode = ERROR.OK.code;
				errorText = format(ERROR.OK);
			}

			// Run any application callbacks last as they may attempt to reconnect and hence create a new socket.
			if (this.connected) {
				this.connected = false;
				// Execute the connectionLostCallback if there is one, and we were connected.
				if (this.onConnectionLost) {
					this.onConnectionLost({errorCode:errorCode, errorMessage:errorText, reconnect:this.connectOptions.reconnect, uri:this._wsuri});
				}
				if (errorCode !== ERROR.OK.code && this.connectOptions.reconnect) {
					// Start automatic reconnect process for the very first time since last successful connect.
					this._reconnectInterval = 1;
					this._reconnect();
					return;
				}
			} else {
				// Otherwise we never had a connection, so indicate that the connect has failed.
				if (this.connectOptions.mqttVersion === 4 && this.connectOptions.mqttVersionExplicit === false) {
					this._trace("Failed to connect V4, dropping back to V3");
					this.connectOptions.mqttVersion = 3;
					if (this.connectOptions.uris) {
						this.hostIndex = 0;
						this._doConnect(this.connectOptions.uris[0]);
					} else {
						this._doConnect(this.uri);
					}
				} else if(this.connectOptions.onFailure) {
					this.connectOptions.onFailure({invocationContext:this.connectOptions.invocationContext, errorCode:errorCode, errorMessage:errorText});
				}
			}
		}
	};

	/** @ignore */
	ClientImpl.prototype._trace = function () {
		// Pass trace message back to client's callback function
		if (this.traceFunction) {
			for (var i in arguments)
			{
				if (typeof arguments[i] !== "undefined")
					arguments.splice(i, 1, JSON.stringify(arguments[i]));
			}
			var record = Array.prototype.slice.call(arguments).join("");
			this.traceFunction ({severity: "Debug", message: record	});
		}

		//buffer style trace
		if ( this._traceBuffer !== null ) {
			for (var i = 0, max = arguments.length; i < max; i++) {
				if ( this._traceBuffer.length == this._MAX_TRACE_ENTRIES ) {
					this._traceBuffer.shift();
				}
				if (i === 0) this._traceBuffer.push(arguments[i]);
				else if (typeof arguments[i] === "undefined" ) this._traceBuffer.push(arguments[i]);
				else this._traceBuffer.push("  "+JSON.stringify(arguments[i]));
		   }
		}
	};

	/** @ignore */
	ClientImpl.prototype._traceMask = function (traceObject, masked) {
		var traceObjectMasked = {};
		for (var attr in traceObject) {
			if (traceObject.hasOwnProperty(attr)) {
				if (attr == masked)
					traceObjectMasked[attr] = "******";
				else
					traceObjectMasked[attr] = traceObject[attr];
			}
		}
		return traceObjectMasked;
	};

	// ------------------------------------------------------------------------
	// Public Programming interface.
	// ------------------------------------------------------------------------

	/**
	 * The JavaScript application communicates to the server using a {@link Paho.MQTT.Client} object.
	 * <p>
	 * Most applications will create just one Client object and then call its connect() method,
	 * however applications can create more than one Client object if they wish.
	 * In this case the combination of host, port and clientId attributes must be different for each Client object.
	 * <p>
	 * The send, subscribe and unsubscribe methods are implemented as asynchronous JavaScript methods
	 * (even though the underlying protocol exchange might be synchronous in nature).
	 * This means they signal their completion by calling back to the application,
	 * via Success or Failure callback functions provided by the application on the method in question.
	 * Such callbacks are called at most once per method invocation and do not persist beyond the lifetime
	 * of the script that made the invocation.
	 * <p>
	 * In contrast there are some callback functions, most notably <i>onMessageArrived</i>,
	 * that are defined on the {@link Paho.MQTT.Client} object.
	 * These may get called multiple times, and aren't directly related to specific method invocations made by the client.
	 *
	 * @name Paho.MQTT.Client
	 *
	 * @constructor
	 *
	 * @param {string} host - the address of the messaging server, as a fully qualified WebSocket URI, as a DNS name or dotted decimal IP address.
	 * @param {number} port - the port number to connect to - only required if host is not a URI
	 * @param {string} path - the path on the host to connect to - only used if host is not a URI. Default: '/mqtt'.
	 * @param {string} clientId - the Messaging client identifier, between 1 and 23 characters in length.
	 *
	 * @property {string} host - <i>read only</i> the server's DNS hostname or dotted decimal IP address.
	 * @property {number} port - <i>read only</i> the server's port.
	 * @property {string} path - <i>read only</i> the server's path.
	 * @property {string} clientId - <i>read only</i> used when connecting to the server.
	 * @property {function} onConnectionLost - called when a connection has been lost.
	 *                            after a connect() method has succeeded.
	 *                            Establish the call back used when a connection has been lost. The connection may be
	 *                            lost because the client initiates a disconnect or because the server or network
	 *                            cause the client to be disconnected. The disconnect call back may be called without
	 *                            the connectionComplete call back being invoked if, for example the client fails to
	 *                            connect.
	 *                            A single response object parameter is passed to the onConnectionLost callback containing the following fields:
	 *                            <ol>
	 *                            <li>errorCode
	 *                            <li>errorMessage
	 *                            </ol>
	 * @property {function} onMessageDelivered - called when a message has been delivered.
	 *                            All processing that this Client will ever do has been completed. So, for example,
	 *                            in the case of a Qos=2 message sent by this client, the PubComp flow has been received from the server
	 *                            and the message has been removed from persistent storage before this callback is invoked.
	 *                            Parameters passed to the onMessageDelivered callback are:
	 *                            <ol>
	 *                            <li>{@link Paho.MQTT.Message} that was delivered.
	 *                            </ol>
	 * @property {function} onMessageArrived - called when a message has arrived in this Paho.MQTT.client.
	 *                            Parameters passed to the onMessageArrived callback are:
	 *                            <ol>
	 *                            <li>{@link Paho.MQTT.Message} that has arrived.
	 *                            </ol>
	 * @property {function} onConnected - called when a connection is successfully made to the server.
	 *                                  after a connect() method.
	 *                                  Parameters passed to the onConnected callback are:
	 *                                  <ol>
	 *                                  <li>reconnect (boolean) - If true, the connection was the result of a reconnect.</li>
	 *                                  <li>URI (string) - The URI used to connect to the server.</li>
	 *                                  </ol>
	 * @property {boolean} disconnectedPublishing - if set, will enable disconnected publishing in
	 *                                            in the event that the connection to the server is lost.
	 * @property {number} disconnectedBufferSize - Used to set the maximum number of messages that the disconnected
	 *                                             buffer will hold before rejecting new messages. Default size: 5000 messages
	 * @property {function} trace - called whenever trace is called. TODO
	 */
	var Client = function (host, port, path, clientId) {

	    var uri;

		if (typeof host !== "string")
			throw new Error(format(ERROR.INVALID_TYPE, [typeof host, "host"]));

	    if (arguments.length == 2) {
	        // host: must be full ws:// uri
	        // port: clientId
	        clientId = port;
	        uri = host;
	        var match = uri.match(/^(wss?):\/\/((\[(.+)\])|([^\/]+?))(:(\d+))?(\/.*)$/);
	        if (match) {
	            host = match[4]||match[2];
	            port = parseInt(match[7]);
	            path = match[8];
	        } else {
	            throw new Error(format(ERROR.INVALID_ARGUMENT,[host,"host"]));
	        }
	    } else {
	        if (arguments.length == 3) {
				clientId = path;
				path = "/mqtt";
			}
			if (typeof port !== "number" || port < 0)
				throw new Error(format(ERROR.INVALID_TYPE, [typeof port, "port"]));
			if (typeof path !== "string")
				throw new Error(format(ERROR.INVALID_TYPE, [typeof path, "path"]));

			var ipv6AddSBracket = (host.indexOf(":") !== -1 && host.slice(0,1) !== "[" && host.slice(-1) !== "]");
			uri = "ws://"+(ipv6AddSBracket?"["+host+"]":host)+":"+port+path;
		}

		var clientIdLength = 0;
		for (var i = 0; i<clientId.length; i++) {
			var charCode = clientId.charCodeAt(i);
			if (0xD800 <= charCode && charCode <= 0xDBFF)  {
				 i++; // Surrogate pair.
			}
			clientIdLength++;
		}
		if (typeof clientId !== "string" || clientIdLength > 65535)
			throw new Error(format(ERROR.INVALID_ARGUMENT, [clientId, "clientId"]));

		var client = new ClientImpl(uri, host, port, path, clientId);
		this._getHost =  function() { return host; };
		this._setHost = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getPort = function() { return port; };
		this._setPort = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getPath = function() { return path; };
		this._setPath = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getURI = function() { return uri; };
		this._setURI = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getClientId = function() { return client.clientId; };
		this._setClientId = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getOnConnected = function() { return client.onConnected; };
		this._setOnConnected = function(newOnConnected) {
			if (typeof newOnConnected === "function")
				client.onConnected = newOnConnected;
			else
				throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnConnected, "onConnected"]));
		};

		this._getDisconnectedPublishing = function() { return client.disconnectedPublishing; };
		this._setDisconnectedPublishing = function(newDisconnectedPublishing) {
			client.disconnectedPublishing = newDisconnectedPublishing;
		};

		this._getDisconnectedBufferSize = function() { return client.disconnectedBufferSize; };
		this._setDisconnectedBufferSize = function(newDisconnectedBufferSize) {
			client.disconnectedBufferSize = newDisconnectedBufferSize;
		};

		this._getOnConnectionLost = function() { return client.onConnectionLost; };
		this._setOnConnectionLost = function(newOnConnectionLost) {
			if (typeof newOnConnectionLost === "function")
				client.onConnectionLost = newOnConnectionLost;
			else
				throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnConnectionLost, "onConnectionLost"]));
		};

		this._getOnMessageDelivered = function() { return client.onMessageDelivered; };
		this._setOnMessageDelivered = function(newOnMessageDelivered) {
			if (typeof newOnMessageDelivered === "function")
				client.onMessageDelivered = newOnMessageDelivered;
			else
				throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnMessageDelivered, "onMessageDelivered"]));
		};

		this._getOnMessageArrived = function() { return client.onMessageArrived; };
		this._setOnMessageArrived = function(newOnMessageArrived) {
			if (typeof newOnMessageArrived === "function")
				client.onMessageArrived = newOnMessageArrived;
			else
				throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnMessageArrived, "onMessageArrived"]));
		};

		this._getTrace = function() { return client.traceFunction; };
		this._setTrace = function(trace) {
			if(typeof trace === "function"){
				client.traceFunction = trace;
			}else{
				throw new Error(format(ERROR.INVALID_TYPE, [typeof trace, "onTrace"]));
			}
		};

		/**
		 * Connect this Messaging client to its server.
		 *
		 * @name Paho.MQTT.Client#connect
		 * @function
		 * @param {object} connectOptions - Attributes used with the connection.
		 * @param {number} connectOptions.timeout - If the connect has not succeeded within this
		 *                    number of seconds, it is deemed to have failed.
		 *                    The default is 30 seconds.
		 * @param {string} connectOptions.userName - Authentication username for this connection.
		 * @param {string} connectOptions.password - Authentication password for this connection.
		 * @param {Paho.MQTT.Message} connectOptions.willMessage - sent by the server when the client
		 *                    disconnects abnormally.
		 * @param {number} connectOptions.keepAliveInterval - the server disconnects this client if
		 *                    there is no activity for this number of seconds.
		 *                    The default value of 60 seconds is assumed if not set.
		 * @param {boolean} connectOptions.cleanSession - if true(default) the client and server
		 *                    persistent state is deleted on successful connect.
		 * @param {boolean} connectOptions.useSSL - if present and true, use an SSL Websocket connection.
		 * @param {object} connectOptions.invocationContext - passed to the onSuccess callback or onFailure callback.
		 * @param {function} connectOptions.onSuccess - called when the connect acknowledgement
		 *                    has been received from the server.
		 * A single response object parameter is passed to the onSuccess callback containing the following fields:
		 * <ol>
		 * <li>invocationContext as passed in to the onSuccess method in the connectOptions.
		 * </ol>
     * @param {function} connectOptions.onFailure - called when the connect request has failed or timed out.
		 * A single response object parameter is passed to the onFailure callback containing the following fields:
		 * <ol>
		 * <li>invocationContext as passed in to the onFailure method in the connectOptions.
		 * <li>errorCode a number indicating the nature of the error.
		 * <li>errorMessage text describing the error.
		 * </ol>
     * @param {array} connectOptions.hosts - If present this contains either a set of hostnames or fully qualified
		 * WebSocket URIs (ws://iot.eclipse.org:80/ws), that are tried in order in place
		 * of the host and port paramater on the construtor. The hosts are tried one at at time in order until
		 * one of then succeeds.
     * @param {array} connectOptions.ports - If present the set of ports matching the hosts. If hosts contains URIs, this property
		 * is not used.
     * @param {boolean} connectOptions.reconnect - Sets whether the client will automatically attempt to reconnect
     * to the server if the connection is lost.
     *<ul>
     *<li>If set to false, the client will not attempt to automatically reconnect to the server in the event that the
     * connection is lost.</li>
     *<li>If set to true, in the event that the connection is lost, the client will attempt to reconnect to the server.
     * It will initially wait 1 second before it attempts to reconnect, for every failed reconnect attempt, the delay
     * will double until it is at 2 minutes at which point the delay will stay at 2 minutes.</li>
     *</ul>
     * @param {number} connectOptions.mqttVersion - The version of MQTT to use to connect to the MQTT Broker.
     *<ul>
     *<li>3 - MQTT V3.1</li>
     *<li>4 - MQTT V3.1.1</li>
     *</ul>
     * @param {boolean} connectOptions.mqttVersionExplicit - If set to true, will force the connection to use the
     * selected MQTT Version or will fail to connect.
     * @param {array} connectOptions.uris - If present, should contain a list of fully qualified WebSocket uris
     * (e.g. ws://iot.eclipse.org:80/ws), that are tried in order in place of the host and port parameter of the construtor.
     * The uris are tried one at a time in order until one of them succeeds. Do not use this in conjunction with hosts as
     * the hosts array will be converted to uris and will overwrite this property.
		 * @throws {InvalidState} If the client is not in disconnected state. The client must have received connectionLost
		 * or disconnected before calling connect for a second or subsequent time.
		 */
		this.connect = function (connectOptions) {
			connectOptions = connectOptions || {} ;
			validate(connectOptions,  {timeout:"number",
									   userName:"string",
									   password:"string",
									   willMessage:"object",
									   keepAliveInterval:"number",
									   cleanSession:"boolean",
									   useSSL:"boolean",
									   invocationContext:"object",
									   onSuccess:"function",
									   onFailure:"function",
									   hosts:"object",
									   ports:"object",
									   reconnect:"boolean",
									   mqttVersion:"number",
									   mqttVersionExplicit:"boolean",
									   uris: "object"});

			// If no keep alive interval is set, assume 60 seconds.
			if (connectOptions.keepAliveInterval === undefined)
				connectOptions.keepAliveInterval = 60;

			if (connectOptions.mqttVersion > 4 || connectOptions.mqttVersion < 3) {
				throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.mqttVersion, "connectOptions.mqttVersion"]));
			}

			if (connectOptions.mqttVersion === undefined) {
				connectOptions.mqttVersionExplicit = false;
				connectOptions.mqttVersion = 4;
			} else {
				connectOptions.mqttVersionExplicit = true;
			}

			//Check that if password is set, so is username
			if (connectOptions.password !== undefined && connectOptions.userName === undefined)
				throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.password, "connectOptions.password"]));

			if (connectOptions.willMessage) {
				if (!(connectOptions.willMessage instanceof Message))
					throw new Error(format(ERROR.INVALID_TYPE, [connectOptions.willMessage, "connectOptions.willMessage"]));
				// The will message must have a payload that can be represented as a string.
				// Cause the willMessage to throw an exception if this is not the case.
				connectOptions.willMessage.stringPayload = null;

				if (typeof connectOptions.willMessage.destinationName === "undefined")
					throw new Error(format(ERROR.INVALID_TYPE, [typeof connectOptions.willMessage.destinationName, "connectOptions.willMessage.destinationName"]));
			}
			if (typeof connectOptions.cleanSession === "undefined")
				connectOptions.cleanSession = true;
			if (connectOptions.hosts) {

				if (!(connectOptions.hosts instanceof Array) )
					throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts, "connectOptions.hosts"]));
				if (connectOptions.hosts.length <1 )
					throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts, "connectOptions.hosts"]));

				var usingURIs = false;
				for (var i = 0; i<connectOptions.hosts.length; i++) {
					if (typeof connectOptions.hosts[i] !== "string")
						throw new Error(format(ERROR.INVALID_TYPE, [typeof connectOptions.hosts[i], "connectOptions.hosts["+i+"]"]));
					if (/^(wss?):\/\/((\[(.+)\])|([^\/]+?))(:(\d+))?(\/.*)$/.test(connectOptions.hosts[i])) {
						if (i === 0) {
							usingURIs = true;
						} else if (!usingURIs) {
							throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts[i], "connectOptions.hosts["+i+"]"]));
						}
					} else if (usingURIs) {
						throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts[i], "connectOptions.hosts["+i+"]"]));
					}
				}

				if (!usingURIs) {
					if (!connectOptions.ports)
						throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.ports, "connectOptions.ports"]));
					if (!(connectOptions.ports instanceof Array) )
						throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.ports, "connectOptions.ports"]));
					if (connectOptions.hosts.length !== connectOptions.ports.length)
						throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.ports, "connectOptions.ports"]));

					connectOptions.uris = [];

					for (var i = 0; i<connectOptions.hosts.length; i++) {
						if (typeof connectOptions.ports[i] !== "number" || connectOptions.ports[i] < 0)
							throw new Error(format(ERROR.INVALID_TYPE, [typeof connectOptions.ports[i], "connectOptions.ports["+i+"]"]));
						var host = connectOptions.hosts[i];
						var port = connectOptions.ports[i];

						var ipv6 = (host.indexOf(":") !== -1);
						uri = "ws://"+(ipv6?"["+host+"]":host)+":"+port+path;
						connectOptions.uris.push(uri);
					}
				} else {
					connectOptions.uris = connectOptions.hosts;
				}
			}

			client.connect(connectOptions);
		};

		/**
		 * Subscribe for messages, request receipt of a copy of messages sent to the destinations described by the filter.
		 *
		 * @name Paho.MQTT.Client#subscribe
		 * @function
		 * @param {string} filter describing the destinations to receive messages from.
		 * <br>
		 * @param {object} subscribeOptions - used to control the subscription
		 *
		 * @param {number} subscribeOptions.qos - the maiximum qos of any publications sent
		 *                                  as a result of making this subscription.
		 * @param {object} subscribeOptions.invocationContext - passed to the onSuccess callback
		 *                                  or onFailure callback.
		 * @param {function} subscribeOptions.onSuccess - called when the subscribe acknowledgement
		 *                                  has been received from the server.
		 *                                  A single response object parameter is passed to the onSuccess callback containing the following fields:
		 *                                  <ol>
		 *                                  <li>invocationContext if set in the subscribeOptions.
		 *                                  </ol>
		 * @param {function} subscribeOptions.onFailure - called when the subscribe request has failed or timed out.
		 *                                  A single response object parameter is passed to the onFailure callback containing the following fields:
		 *                                  <ol>
		 *                                  <li>invocationContext - if set in the subscribeOptions.
		 *                                  <li>errorCode - a number indicating the nature of the error.
		 *                                  <li>errorMessage - text describing the error.
		 *                                  </ol>
		 * @param {number} subscribeOptions.timeout - which, if present, determines the number of
		 *                                  seconds after which the onFailure calback is called.
		 *                                  The presence of a timeout does not prevent the onSuccess
		 *                                  callback from being called when the subscribe completes.
		 * @throws {InvalidState} if the client is not in connected state.
		 */
		this.subscribe = function (filter, subscribeOptions) {
			if (typeof filter !== "string")
				throw new Error("Invalid argument:"+filter);
			subscribeOptions = subscribeOptions || {} ;
			validate(subscribeOptions,  {qos:"number",
										 invocationContext:"object",
										 onSuccess:"function",
										 onFailure:"function",
										 timeout:"number"
										});
			if (subscribeOptions.timeout && !subscribeOptions.onFailure)
				throw new Error("subscribeOptions.timeout specified with no onFailure callback.");
			if (typeof subscribeOptions.qos !== "undefined" && !(subscribeOptions.qos === 0 || subscribeOptions.qos === 1 || subscribeOptions.qos === 2 ))
				throw new Error(format(ERROR.INVALID_ARGUMENT, [subscribeOptions.qos, "subscribeOptions.qos"]));
			client.subscribe(filter, subscribeOptions);
		};

		/**
		 * Unsubscribe for messages, stop receiving messages sent to destinations described by the filter.
		 *
		 * @name Paho.MQTT.Client#unsubscribe
		 * @function
		 * @param {string} filter - describing the destinations to receive messages from.
		 * @param {object} unsubscribeOptions - used to control the subscription
		 * @param {object} unsubscribeOptions.invocationContext - passed to the onSuccess callback
		                                      or onFailure callback.
		 * @param {function} unsubscribeOptions.onSuccess - called when the unsubscribe acknowledgement has been received from the server.
		 *                                    A single response object parameter is passed to the
		 *                                    onSuccess callback containing the following fields:
		 *                                    <ol>
		 *                                    <li>invocationContext - if set in the unsubscribeOptions.
		 *                                    </ol>
		 * @param {function} unsubscribeOptions.onFailure called when the unsubscribe request has failed or timed out.
		 *                                    A single response object parameter is passed to the onFailure callback containing the following fields:
		 *                                    <ol>
		 *                                    <li>invocationContext - if set in the unsubscribeOptions.
		 *                                    <li>errorCode - a number indicating the nature of the error.
		 *                                    <li>errorMessage - text describing the error.
		 *                                    </ol>
		 * @param {number} unsubscribeOptions.timeout - which, if present, determines the number of seconds
		 *                                    after which the onFailure callback is called. The presence of
		 *                                    a timeout does not prevent the onSuccess callback from being
		 *                                    called when the unsubscribe completes
		 * @throws {InvalidState} if the client is not in connected state.
		 */
		this.unsubscribe = function (filter, unsubscribeOptions) {
			if (typeof filter !== "string")
				throw new Error("Invalid argument:"+filter);
			unsubscribeOptions = unsubscribeOptions || {} ;
			validate(unsubscribeOptions,  {invocationContext:"object",
										   onSuccess:"function",
										   onFailure:"function",
										   timeout:"number"
										  });
			if (unsubscribeOptions.timeout && !unsubscribeOptions.onFailure)
				throw new Error("unsubscribeOptions.timeout specified with no onFailure callback.");
			client.unsubscribe(filter, unsubscribeOptions);
		};

		/**
		 * Send a message to the consumers of the destination in the Message.
		 *
		 * @name Paho.MQTT.Client#send
		 * @function
		 * @param {string|Paho.MQTT.Message} topic - <b>mandatory</b> The name of the destination to which the message is to be sent.
		 * 					   - If it is the only parameter, used as Paho.MQTT.Message object.
		 * @param {String|ArrayBuffer} payload - The message data to be sent.
		 * @param {number} qos The Quality of Service used to deliver the message.
		 * 		<dl>
		 * 			<dt>0 Best effort (default).
		 *     			<dt>1 At least once.
		 *     			<dt>2 Exactly once.
		 * 		</dl>
		 * @param {Boolean} retained If true, the message is to be retained by the server and delivered
		 *                     to both current and future subscriptions.
		 *                     If false the server only delivers the message to current subscribers, this is the default for new Messages.
		 *                     A received message has the retained boolean set to true if the message was published
		 *                     with the retained boolean set to true
		 *                     and the subscrption was made after the message has been published.
		 * @throws {InvalidState} if the client is not connected.
		 */
		this.send = function (topic,payload,qos,retained) {
			var message ;

			if(arguments.length === 0){
				throw new Error("Invalid argument."+"length");

			}else if(arguments.length == 1) {

				if (!(topic instanceof Message) && (typeof topic !== "string"))
					throw new Error("Invalid argument:"+ typeof topic);

				message = topic;
				if (typeof message.destinationName === "undefined")
					throw new Error(format(ERROR.INVALID_ARGUMENT,[message.destinationName,"Message.destinationName"]));
				client.send(message);

			}else {
				//parameter checking in Message object
				message = new Message(payload);
				message.destinationName = topic;
				if(arguments.length >= 3)
					message.qos = qos;
				if(arguments.length >= 4)
					message.retained = retained;
				client.send(message);
			}
		};

		/**
		 * Publish a message to the consumers of the destination in the Message.
		 * Synonym for Paho.Mqtt.Client#send
		 *
		 * @name Paho.MQTT.Client#publish
		 * @function
		 * @param {string|Paho.MQTT.Message} topic - <b>mandatory</b> The name of the topic to which the message is to be published.
		 * 					   - If it is the only parameter, used as Paho.MQTT.Message object.
		 * @param {String|ArrayBuffer} payload - The message data to be published.
		 * @param {number} qos The Quality of Service used to deliver the message.
		 * 		<dl>
		 * 			<dt>0 Best effort (default).
		 *     			<dt>1 At least once.
		 *     			<dt>2 Exactly once.
		 * 		</dl>
		 * @param {Boolean} retained If true, the message is to be retained by the server and delivered
		 *                     to both current and future subscriptions.
		 *                     If false the server only delivers the message to current subscribers, this is the default for new Messages.
		 *                     A received message has the retained boolean set to true if the message was published
		 *                     with the retained boolean set to true
		 *                     and the subscrption was made after the message has been published.
		 * @throws {InvalidState} if the client is not connected.
		 */
		 this.publish = function(topic,payload,qos,retained) {
			 console.log("Publising message to: ", topic);
			 var message ;

 			if(arguments.length === 0){
 				throw new Error("Invalid argument."+"length");

 			}else if(arguments.length == 1) {

 				if (!(topic instanceof Message) && (typeof topic !== "string"))
 					throw new Error("Invalid argument:"+ typeof topic);

 				message = topic;
 				if (typeof message.destinationName === "undefined")
 					throw new Error(format(ERROR.INVALID_ARGUMENT,[message.destinationName,"Message.destinationName"]));
 				client.send(message);

 			}else {
 				//parameter checking in Message object
 				message = new Message(payload);
 				message.destinationName = topic;
 				if(arguments.length >= 3)
 					message.qos = qos;
 				if(arguments.length >= 4)
 					message.retained = retained;
 				client.send(message);
 			}
		};

		/**
		 * Normal disconnect of this Messaging client from its server.
		 *
		 * @name Paho.MQTT.Client#disconnect
		 * @function
		 * @throws {InvalidState} if the client is already disconnected.
		 */
		this.disconnect = function () {
			client.disconnect();
		};

		/**
		 * Get the contents of the trace log.
		 *
		 * @name Paho.MQTT.Client#getTraceLog
		 * @function
		 * @return {Object[]} tracebuffer containing the time ordered trace records.
		 */
		this.getTraceLog = function () {
			return client.getTraceLog();
		};

		/**
		 * Start tracing.
		 *
		 * @name Paho.MQTT.Client#startTrace
		 * @function
		 */
		this.startTrace = function () {
			client.startTrace();
		};

		/**
		 * Stop tracing.
		 *
		 * @name Paho.MQTT.Client#stopTrace
		 * @function
		 */
		this.stopTrace = function () {
			client.stopTrace();
		};

		this.isConnected = function() {
			return client.connected;
		};
	};

	Client.prototype = {
		get host() { return this._getHost(); },
		set host(newHost) { this._setHost(newHost); },

		get port() { return this._getPort(); },
		set port(newPort) { this._setPort(newPort); },

		get path() { return this._getPath(); },
		set path(newPath) { this._setPath(newPath); },

		get clientId() { return this._getClientId(); },
		set clientId(newClientId) { this._setClientId(newClientId); },

		get onConnected() { return this._getOnConnected(); },
		set onConnected(newOnConnected) { this._setOnConnected(newOnConnected); },

		get disconnectedPublishing() { return this._getDisconnectedPublishing(); },
		set disconnectedPublishing(newDisconnectedPublishing) { this._setDisconnectedPublishing(newDisconnectedPublishing); },

		get disconnectedBufferSize() { return this._getDisconnectedBufferSize(); },
		set disconnectedBufferSize(newDisconnectedBufferSize) { this._setDisconnectedBufferSize(newDisconnectedBufferSize); },

		get onConnectionLost() { return this._getOnConnectionLost(); },
		set onConnectionLost(newOnConnectionLost) { this._setOnConnectionLost(newOnConnectionLost); },

		get onMessageDelivered() { return this._getOnMessageDelivered(); },
		set onMessageDelivered(newOnMessageDelivered) { this._setOnMessageDelivered(newOnMessageDelivered); },

		get onMessageArrived() { return this._getOnMessageArrived(); },
		set onMessageArrived(newOnMessageArrived) { this._setOnMessageArrived(newOnMessageArrived); },

		get trace() { return this._getTrace(); },
		set trace(newTraceFunction) { this._setTrace(newTraceFunction); }

	};

	/**
	 * An application message, sent or received.
	 * <p>
	 * All attributes may be null, which implies the default values.
	 *
	 * @name Paho.MQTT.Message
	 * @constructor
	 * @param {String|ArrayBuffer} payload The message data to be sent.
	 * <p>
	 * @property {string} payloadString <i>read only</i> The payload as a string if the payload consists of valid UTF-8 characters.
	 * @property {ArrayBuffer} payloadBytes <i>read only</i> The payload as an ArrayBuffer.
	 * <p>
	 * @property {string} destinationName <b>mandatory</b> The name of the destination to which the message is to be sent
	 *                    (for messages about to be sent) or the name of the destination from which the message has been received.
	 *                    (for messages received by the onMessage function).
	 * <p>
	 * @property {number} qos The Quality of Service used to deliver the message.
	 * <dl>
	 *     <dt>0 Best effort (default).
	 *     <dt>1 At least once.
	 *     <dt>2 Exactly once.
	 * </dl>
	 * <p>
	 * @property {Boolean} retained If true, the message is to be retained by the server and delivered
	 *                     to both current and future subscriptions.
	 *                     If false the server only delivers the message to current subscribers, this is the default for new Messages.
	 *                     A received message has the retained boolean set to true if the message was published
	 *                     with the retained boolean set to true
	 *                     and the subscrption was made after the message has been published.
	 * <p>
	 * @property {Boolean} duplicate <i>read only</i> If true, this message might be a duplicate of one which has already been received.
	 *                     This is only set on messages received from the server.
	 *
	 */
	var Message = function (newPayload) {
		var payload;
		if (   typeof newPayload === "string" ||
		newPayload instanceof ArrayBuffer ||
		newPayload instanceof Int8Array   ||
		newPayload instanceof Uint8Array  ||
		newPayload instanceof Int16Array  ||
		newPayload instanceof Uint16Array ||
		newPayload instanceof Int32Array  ||
		newPayload instanceof Uint32Array ||
		newPayload instanceof Float32Array ||
		newPayload instanceof Float64Array
		   ) {
			payload = newPayload;
		} else {
			throw (format(ERROR.INVALID_ARGUMENT, [newPayload, "newPayload"]));
		}

		this._getPayloadString = function () {
			if (typeof payload === "string")
				return payload;
			else
				return parseUTF8(payload, 0, payload.length);
		};

		this._getPayloadBytes = function() {
			if (typeof payload === "string") {
				var buffer = new ArrayBuffer(UTF8Length(payload));
				var byteStream = new Uint8Array(buffer);
				stringToUTF8(payload, byteStream, 0);

				return byteStream;
			} else {
				return payload;
			}
		};

		var destinationName;
		this._getDestinationName = function() { return destinationName; };
		this._setDestinationName = function(newDestinationName) {
			if (typeof newDestinationName === "string")
				destinationName = newDestinationName;
			else
				throw new Error(format(ERROR.INVALID_ARGUMENT, [newDestinationName, "newDestinationName"]));
		};

		var qos = 0;
		this._getQos = function() { return qos; };
		this._setQos = function(newQos) {
			if (newQos === 0 || newQos === 1 || newQos === 2 )
				qos = newQos;
			else
				throw new Error("Invalid argument:"+newQos);
		};

		var retained = false;
		this._getRetained = function() { return retained; };
		this._setRetained = function(newRetained) {
			if (typeof newRetained === "boolean")
				retained = newRetained;
			else
				throw new Error(format(ERROR.INVALID_ARGUMENT, [newRetained, "newRetained"]));
		};

		var duplicate = false;
		this._getDuplicate = function() { return duplicate; };
		this._setDuplicate = function(newDuplicate) { duplicate = newDuplicate; };
	};

	Message.prototype = {
		get payloadString() { return this._getPayloadString(); },
		get payloadBytes() { return this._getPayloadBytes(); },

		get destinationName() { return this._getDestinationName(); },
		set destinationName(newDestinationName) { this._setDestinationName(newDestinationName); },

		get topic() { return this._getDestinationName(); },
		set topic(newTopic) { this._setDestinationName(newTopic); },

		get qos() { return this._getQos(); },
		set qos(newQos) { this._setQos(newQos); },

		get retained() { return this._getRetained(); },
		set retained(newRetained) { this._setRetained(newRetained); },

		get duplicate() { return this._getDuplicate(); },
		set duplicate(newDuplicate) { this._setDuplicate(newDuplicate); }
	};

	// Module contents.
	return {
		Client: Client,
		Message: Message
	};
})(window);
return PahoMQTT;
});


J. Resumen

En esta lección se mostró un chat sencillo.

20. Relaciones a uno en la base de datos

Versión para imprimir.

A. Introducción

En esta lección se muestra el acceso a bases de datos que implementan relaciones a uno, usando servicios.
Se usa un select para seleccionar objetos de la base de datos.
La técnica aquí mostrada se usa en el lado con la llave foránea de las asocioaciones uno a uno y uno a muchos.
Puedes probar el ejemplo en http://srvauno.rf.gd/.

B. Diagrama entidad relación

C. Diagrama relacional

D. Diagrama de despliegue

E. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvauno.rf.gd/.
Descarga el archivo /src/srvauno.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

F. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvauno.rf.gd/.
Descarga el archivo /src/srvauno.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

G. Archivos

Haz clic en los triángulos para expandir las carpetas

H. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Relaciones a uno</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Relaciones a uno</h1>

 <p><a href="agrega.html">Agregar</a></p>

 <dl id="lista">
  <dt>Cargando…</dt>
  <dd><progress max="100">Cargando…</progress></dd>
 </dl>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"

  descargaVista("php/amigo-vista-index.php")

 </script>

</body>

</html>

I. agrega.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Agregar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Agregar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <p>
   <label>
    Nombre *
    <input name="nombre">
   </label>
  </p>

  <p>
   <label>
    Pasatiempo
    <select name="pasId">
     <option value="">Cargando…</option>
    </select>
   </label>
  </p>

  <p>* Obligatorio</p>

  <p><button type="submit">Agregar</button></p>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { submitAccion } from "./js/lib/submitAccion.js"

  descargaDatos()

  async function descargaDatos() {

   await descargaVista("php/amigo-vista-agrega.php")

   formulario.addEventListener(
    "submit",
    event => submitAccion(
     event, "php/amigo-agrega.php", formulario, "index.html"
    )
   )

  }

 </script>

</body>

</html>

J. modifica.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Modificar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Modificar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <input type="hidden" name="id">

  <p>
   <label>
    Nombre *
    <input name="nombre" value="Cargando…">
   </label>
  </p>

  <p>
   <label>
    Pasatiempo
    <select name="pasId">
     <option value="">Cargando…</option>
    </select>
   </label>
  </p>

  <p>* Obligatorio</p>

  <p>

   <button type="submit">Guardar</button>

   <button id="botonEliminar" type="button">
    Eliminar
   </button>

  </p>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { submitAccion } from "./js/lib/submitAccion.js"
  import { accionElimina } from "./js/lib/accionElimina.js"

  const params = new URL(location.href).searchParams
  descargaDatos()

  async function descargaDatos() {

   if (params.size > 0) {

    await descargaVista("php/amigo-vista-modifica.php?" + params)

    formulario.addEventListener(
     "submit",
     event => submitAccion(
      event, "php/amigo-modifica.php", formulario, "index.html"
     )
    )

    botonEliminar.addEventListener(
     "click",
     () => accionElimina(
      "php/amigo-elimina.php",
      formulario,
      "Confirma la eliminación",
      "index.html"
     )
    )

   }

  }

 </script>

</body>

</html>

K. Carpeta « php »

Versión para imprimir.

A. php / amigo-agrega.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEntero.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/recibeEnteroOpcional.php";
require_once __DIR__ . "/lib/devuelveCreated.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/pasatiempoOptions.php";

$nombre = recibeTextoObligatorio("nombre");
$pasId = recibeEnteroOpcional("pasId");

$pdo = Bd::pdo();
$stmt = $pdo->prepare(
 "INSERT INTO AMIGO (
   AMI_NOMBRE, PAS_ID
  ) values (
   :PAS_NOMBRE, :PAS_ID
  )"
);
$stmt->execute([
 ":PAS_NOMBRE" => $nombre,
 ":PAS_ID" => $pasId
]);
$id = $pdo->lastInsertId();

$encodeId = urlencode($id);
devuelveCreated(
 "/php/amigo-vista-modifica.php?id=$encodeId",
 [
  "id" => ["value" => $id],
  "nombre" => ["value" => $nombre],
  "pasId" => [
   "innerHTML" => pasatiempoOptons(),
   "value" => $pasId === null ? "" : $pasId
  ]
 ]
);


B. php / amigo-elimina.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/devuelveNoContent.php";
require_once __DIR__ . "/Bd.php";

$id = recibeEnteroObligatorio("id");

$bd = Bd::pdo();
$stmt = $bd->prepare("DELETE FROM AMIGO WHERE AMI_ID = :AMI_ID");
$stmt->execute([":AMI_ID" => $id]);

devuelveNoContent();


C. php / amigo-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/recibeEnteroOpcional.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/pasatiempoOptions.php";

$id = recibeEnteroObligatorio("id");
$nombre = recibeTextoObligatorio("nombre");
$pasId = recibeEnteroOpcional("pasId");

$bd = Bd::pdo();
$stmt = $bd->prepare(
 "UPDATE AMIGO
   SET
    AMI_NOMBRE = :AMI_NOMBRE,
    PAS_ID = :PAS_ID
   WHERE
    AMI_ID = :AMI_ID"
);
$stmt->execute([
 ":AMI_NOMBRE" => $nombre,
 ":PAS_ID" => $pasId,
 ":AMI_ID" => $id,
]);

devuelveJson([
 "id" => ["value" => $id],
 "nombre" => ["value" => $nombre],
 "pasId" => [
  "innerHTML" => pasatiempoOptons(),
  "value" => $pasId === null ? "" : $pasId
 ]
]);


D. php / amigo-vista-agrega.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/pasatiempoOptions.php";

devuelveJson(["pasId" => ["innerHTML" => pasatiempoOptons()]]);


E. php / amigo-vista-index.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";

$bd = Bd::pdo();
$stmt = $bd->query(
 "SELECT
    A.AMI_ID,
    A.AMI_NOMBRE,
    P.PAS_NOMBRE
   FROM AMIGO A
    LEFT JOIN PASATIEMPO P
    ON A.PAS_ID = P.PAS_ID
   ORDER BY
    A.AMI_NOMBRE"
);
$lista = $stmt->fetchAll(PDO::FETCH_ASSOC);

$render = "";
foreach ($lista as $modelo) {
 $encodeAmiId = urlencode($modelo["AMI_ID"]);
 $amiId = htmlentities($encodeAmiId);
 $amiNombre = htmlentities($modelo["AMI_NOMBRE"]);
 $pasNombre = $modelo["PAS_NOMBRE"] === null
  ? "<em>-- Sin pasatiempo --</em>"
  : htmlentities($modelo["PAS_NOMBRE"]);
 $render .=
  "<dt><a href='modifica.html?id=$amiId'>$amiNombre</a></dt>
    <dd><a href='modifica.html?id=$amiId'>$pasNombre</a></dd>";
}

devuelveJson(["lista" => ["innerHTML" => $render]]);


F. php / amigo-vista-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/pasatiempoOptions.php";

$amiId = recibeEnteroObligatorio("id");

$bd = Bd::pdo();
$stmt = $bd->prepare("SELECT * FROM AMIGO WHERE AMI_ID = :AMI_ID");
$stmt->execute([":AMI_ID" => $amiId]);
$modelo = $stmt->fetch(PDO::FETCH_ASSOC);

$modelo = validaEntidadObligatoria("Amigo",  $modelo);

devuelveJson([
 "id" => ["value" => $amiId],
 "nombre" => ["value" => $modelo["AMI_NOMBRE"]],
 "pasId" => [
  "innerHTML" => pasatiempoOptons(),
  "value" => $modelo["PAS_ID"] === null ? "" : $modelo["PAS_ID"]
 ]
]);


G. php / Bd.php

<?php

class Bd
{
 private static ?PDO $pdo = null;

 static function pdo(): PDO
 {
  if (self::$pdo === null) {

   self::$pdo = new PDO(
    // cadena de conexión
    "sqlite:" . __DIR__ . "/srvauno.db",
    // usuario
    null,
    // contraseña
    null,
    // Opciones: pdos no persistentes y lanza excepciones.
    [PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
   );

   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS PASATIEMPO (
      PAS_ID INTEGER,
      PAS_NOMBRE TEXT NOT NULL,
      CONSTRAINT PAS_PK
       PRIMARY KEY(PAS_ID),
      CONSTRAINT PAS_NOM_UNQ
       UNIQUE(PAS_NOMBRE),
      CONSTRAINT PAS_NOM_NV
       CHECK(LENGTH(PAS_NOMBRE) > 0)
     )'
   );
   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS AMIGO (
      AMI_ID INTEGER,
      AMI_NOMBRE TEXT NOT NULL,
      PAS_ID INTEGER,
      CONSTRAINT AMI_PK
       PRIMARY KEY(AMI_ID),
      CONSTRAINT AMI_NOM_UNQ
       UNIQUE(AMI_NOMBRE),
      CONSTRAINT AMI_NOM_NV
       CHECK(LENGTH(AMI_NOMBRE) > 0),
      CONSTRAINT AMI_PAS_FK
       FOREIGN KEY (PAS_ID) REFERENCES PASATIEMPO(PAS_ID)
     )'
   );

   $cantidadDePasatiempos =
    self::$pdo->query("SELECT COUNT(PAS_ID) FROM PASATIEMPO")->fetchColumn(0);

   if ($cantidadDePasatiempos === 0) {
    self::$pdo->exec(
     "INSERT INTO PASATIEMPO (PAS_NOMBRE) VALUES ('Futbol'), ('Videojuegos')"
    );
   }
  }

  return self::$pdo;
 }
}


H. php / pasatiempoOptions.php

<?php

require_once __DIR__ . "/Bd.php";

function pasatiempoOptons()
{
 $bd = Bd::pdo();
 $stmt = $bd->query("SELECT * FROM PASATIEMPO ORDER BY PAS_NOMBRE");
 $lista = $stmt->fetchAll(PDO::FETCH_ASSOC);

 $render = "<option value=''>-- Sin pasatiempo --</option>";
 foreach ($lista as $modelo) {
  $id = htmlentities($modelo["PAS_ID"]);
  $nombre = htmlentities($modelo["PAS_NOMBRE"]);
  $render .= "<option value='$id'>{$nombre}</option>";
 }

 return $render;
}


I. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveCreated.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveCreated($urlDelNuevo, $resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(201);
  header("Location: $urlDelNuevo");
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
}


3. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


4. php / lib / devuelveNoContent.php

<?php

function devuelveNoContent()
{
 http_response_code(204);
}


5. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


6. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

7. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


8. php / lib / NOT_FOUND.php


1	<?php
2
3	const NOT_FOUND = 404;
4

9. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


10. php / lib / recibeEntero.php

<?php

require_once __DIR__ . "/recibeTexto.php";

/**
 * Devuelve el valor entero de un parámetro recibido en el
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false
 *
 * Si se recibe una cadena vacía, se devuelve null.
 * 
 * Si parámetro no se puede convertir a entero, se genera
 * un error.
 */
function recibeEntero(string $parametro): false|null|int
{
 $valor = recibeTexto($parametro);
 if ($valor === false) {
  return false;
 } else {
  $valor = trim($valor);
  if ($valor === "") {
   return null;
  } else {
   return (int) $valor;
  }
 }
}


11. php / lib / recibeEnteroObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeEntero.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeEnteroObligatorio(string $parametro)
{
 $entero = recibeEntero($parametro);

 if ($entero === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 if ($entero === null)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenteroenblanco.html",
   "detail" => "Pon un número entero en el campo $parametro."
  ]);

 return $entero;
}


12. php / lib / recibeEnteroOpcional.php

<?php

require_once __DIR__ . "/recibeEntero.php";

function recibeEnteroOpcional(string $parametro)
{
 $enteroOpcional = recibeEntero($parametro);
 return $enteroOpcional === false ? null : $enteroOpcional;
}


13. php / lib / recibeTexto.php

<?php

/**
 * Devuelve el texto de un parámetro enviado al
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false.
 */
function recibeTexto(string $parametro): false|string
{
 /* Si el parámetro está asignado en $_REQUEST,
  * devuelve su valor; de lo contrario, devuelve false.
  */
 $valor = isset($_REQUEST[$parametro])
  ? $_REQUEST[$parametro]
  : false;
 return $valor;
}


14. php / lib / recibeTextoObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeTexto.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeTextoObligatorio(string $parametro)
{
 $texto = recibeTexto($parametro);

 if ($texto === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 $trimTexto = trim($texto);

 if ($trimTexto === "")
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenblanco.html",
   "detail" => "Pon texto en el campo $parametro."
  ]);

 return $trimTexto;
}


15. php / lib / validaEntidadObligatoria.php

<?php

require_once __DIR__ . "/NOT_FOUND.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function validaEntidadObligatoria(string $nombre,  $entidad)
{

 if ($entidad === false)
  throw new ProblemDetailsException([
  "status" => NOT_FOUND,
  "title" => "Registro de $nombre no encontrado.",
  "type" => "/errors/entidadnoencontrada.html",
  "detail" => "No se encontró ningún registro de $nombre con el id solicitado.",
  ]);

 return $entidad;
}


L. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / accionElimina.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} mensaje
 * @param {string} nuevaVista
 */
export async function accionElimina(url, formulario, mensaje, nuevaVista) {
 if (confirm(mensaje)) {
  await consume(enviaFormRecibeJson(url, formulario))
  location.href = nuevaVista
 }
}

2. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

3. js / lib / descargaVista.js

import { consume } from "./consume.js"
import { muestraObjeto } from "./muestraObjeto.js"
import { recibeJson } from "./recibeJson.js"

/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function descargaVista(url, metodoHttp = "GET") {
 const respuesta = await consume(recibeJson(url, metodoHttp))
 const json = await respuesta.json()
 muestraObjeto(document, json)
 return json
}

4. js / lib / enviaFormRecibeJson.js

/**
 * Envía los datos de un formolario a la url usando la codificación
 * multipart/form-data.
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" },
   body: new FormData(formulario)
  }
 )
}

5. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


6. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

7. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const data_Length = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > data_Length
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(data_Length)] = valor
   }
  }
 }
}

8. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

9. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

10. js / lib / submitAccion.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {Event} event
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} nuevaVista
 */
export async function submitAccion(event, url, formulario, nuevaVista) {
 event.preventDefault()
 await consume(enviaFormRecibeJson(url, formulario))
 location.href = nuevaVista
}

M. Carpeta « errors »

Versión para imprimir.

A. errors / campoenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo en blanco</title>

</head>

<body>

 <h1>Campo en blanco</h1>

 <p>Pon texto en el campo obligatorio que está en blanco.</p>

</body>

</html>

B. errors / campoenteroenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo entero en blanco</title>

</head>

<body>

 <h1>Campo entero en blanco</h1>

 <p>
  Pon un número entero en el campo que pide un valor entero obligatorio y está
  en blanco.
 </p>

</body>

</html>

C. errors / entidadnoencontrada.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Registro no encontrado</title>

</head>

<body>

 <h1>Registro no encontrado</h1>

 <p>No se encontró ningún registro con el id solicitado.</p>

</body>

</html>

D. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

E. errors / faltavalor.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta un valor</title>

</head>

<body>

 <h1>Falta un valor</h1>

 <p>La solicitud no tiene un valor obligatorio.</p>

</body>

</html>

F. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

N. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

O. Resumen

En esta lección se mostró el acceso a bases de datos que implementan relaciones a uno, usando servicios..

21. Relaciones a muchos - Usuarios y roles

Versión para imprimir.

A. Introducción

En esta lección se muestra el acceso a bases de datos que implementan relaciones a muchos, usando servicios.
Se usa varios checkbox para seleccionar objetos de la base de datos.
La técnica aquí mostrada se usa para el lado muchos de una asociación uno a muchos y en cualquiera de los lados de una asociación muchos a muchos.
El ejemplo es una estructura de usuarios y roles.
Puedes probar el ejemplo en http://srvamuchos.rf.gd/.

B. Diagrama entidad relación

Algunos navegadores web bloquean las interfaces que muestran etiquetas como usuario, id, email, etcétera, suponiendo que es un intento de engañar al usuario; para evitar este problema, al campo con el nombre de usuario se le llama cue.

C. Diagrama relacional

D. Diagrama de despliegue

E. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvamuchos.rf.gd/.
Descarga el archivo /src/srvamuchos.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

F. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvamuchos.rf.gd/.
Descarga el archivo /src/srvamuchos.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

G. Archivos

Haz clic en los triángulos para expandir las carpetas

H. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Relaciones a muchos</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>
 
</head>

<body>

 <h1>Relaciones a muchos</h1>

 <p><a href="agrega.html">Agregar</a></p>

 <dl id="lista">
  <dt>Cargando…</dt>
  <dd><progress max="100">Cargando…</progress></dd>
 </dl>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"

  descargaVista("php/usuario-vista-index.php")

 </script>

</body>

</html>

I. agrega.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Agregar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Agregar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <p>
   <label>
    San *
    <input name="san">
   </label>
  </p>

  <fieldset id="roles">

   <legend>Roles</legend>

   <p>
    <progress max="100">Cargando…</progress>
   </p>

  </fieldset>

  <p>* Obligatorio</p>

  <p><button type="submit">Agregar</button></p>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { submitAccion } from "./js/lib/submitAccion.js"

  descargaDatos()

  async function descargaDatos() {

   await descargaVista("php/usuario-vista-agrega.php")

   formulario.addEventListener(
    "submit",
    event => submitAccion(
     event, "php/usuario-agrega.php", formulario, "index.html"
    )
   )

  }

 </script>

</body>

</html>

J. modifica.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Modificar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Modificar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <input type="hidden" name="id">

  <p>
   <label>
    San *
    <input name="san" value="Cargando…">
   </label>
  </p>

  <fieldset id="roles">
   <legend>Roles</legend>

   <p>
    <progress max="100">Cargando…</progress>
   </p>

  </fieldset>

  <p>* Obligatorio</p>

  <p>

   <button type="submit">Guardar</button>

   <button id="botonEliminar" type="button">
    Eliminar
   </button>

  </p>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { submitAccion } from "./js/lib/submitAccion.js"
  import { accionElimina } from "./js/lib/accionElimina.js"

  const params = new URL(location.href).searchParams
  descargaDatos()

  async function descargaDatos() {

   if (params.size > 0) {

    await descargaVista("php/usuario-vista-modifica.php?" + params)

    formulario.addEventListener(
     "submit",
     event => submitAccion(
      event, "php/usuario-modifica.php", formulario, "index.html"
     )
    )

    botonEliminar.addEventListener(
     "click",
     () => accionElimina(
      "php/usuario-elimina.php",
      formulario,
      "Confirma la eliminación",
      "index.html"
     )
    )

   }

  }

 </script>

</body>

</html>

K. Carpeta « php »

Versión para imprimir.

A. php / Bd.php

<?php

require_once __DIR__ . "/lib/rolBusca.php";
require_once __DIR__ . "/lib/rolAgrega.php";

class Bd
{

 private static ?PDO $pdo = null;

 static function pdo(): PDO
 {
  if (self::$pdo === null) {

   self::$pdo = new PDO(
    // cadena de conexión
    "sqlite:" . __DIR__ . "/srvamuchos.db",
    // usuario
    null,
    // contraseña
    null,
    // Opciones: pdos no persistentes y lanza excepciones.
    [PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
   );

   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS USUARIO (
      USU_ID INTEGER,
      USU_SAN TEXT NOT NULL,
      CONSTRAINT USU_PK
       PRIMARY KEY(USU_ID),
      CONSTRAINT USU_SAN_UNQ
       UNIQUE(USU_SAN),
      CONSTRAINT USU_SAN_NV
       CHECK(LENGTH(USU_SAN) > 0)
     )'
   );
   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS ROL (
      ROL_ID TEXT NOT NULL,
      ROL_DESCRIPCION TEXT NOT NULL,
      CONSTRAINT ROL_PK
       PRIMARY KEY(ROL_ID),
      CONSTRAINT ROL_ID_NV
       CHECK(LENGTH(ROL_ID) > 0),
      CONSTRAINT ROL_DESCR_UNQ
       UNIQUE(ROL_DESCRIPCION),
      CONSTRAINT ROL_DESCR_NV
       CHECK(LENGTH(ROL_DESCRIPCION) > 0)
     )'
   );
   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS USU_ROL (
      USU_ID INTEGER NOT NULL,
      ROL_ID TEXT NOT NULL,
      CONSTRAINT USU_ROL_PK
       PRIMARY KEY(USU_ID, ROL_ID),
      CONSTRAINT USU_ROL_USU_FK
       FOREIGN KEY (USU_ID) REFERENCES USUARIO(USU_ID),
      CONSTRAINT USU_ROL_ROL_FK
       FOREIGN KEY (ROL_ID) REFERENCES ROL(ROL_ID)
     )'
   );

   self::$pdo->beginTransaction();

   if (rolBusca(self::$pdo, "Administrador") === false) {
    rolAgrega(
     bd: self::$pdo,
     id: "Administrador",
     descripcion: "Administra el sistema."
    );
   }

   if (rolBusca(self::$pdo, "Cliente") === false) {
    rolAgrega(
     bd: self::$pdo,
     id: "Cliente",
     descripcion: "Realiza compras."
    );
   }

   self::$pdo->commit();
  }

  return self::$pdo;
 }
}


B. php / rolCheckboxes.php

<?php

require_once __DIR__ . "/Bd.php";

function rolCheckboxes()
{
 $bd = Bd::pdo();
 $lista =
  $bd->query("SELECT * FROM ROL ORDER BY ROL_ID")->fetchAll(PDO::FETCH_ASSOC);

 $render = "<legend>Roles</legend>";
 foreach ($lista as $modelo) {
  $id = htmlentities($modelo["ROL_ID"]);
  $descripcion = htmlentities($modelo["ROL_DESCRIPCION"]);
  $render .=
   "<p>
    <label style='display: flex'>
     <input type='checkbox' name='rolIds[]' value='$id'>
     <span>
      <strong style='display: block'>$id</strong>
      $descripcion
     </span>
    </label>
   </p>";
 }

 return $render;
}


C. php / usuario-agrega.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/recibeArray.php";
require_once __DIR__ . "/lib/usuRolAgrega.php";
require_once __DIR__ . "/lib/devuelveCreated.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/rolCheckboxes.php";

$san = recibeTextoObligatorio("san");
$rolIds = recibeArray("rolIds");

$bd = Bd::pdo();
$bd->beginTransaction();

$stmt = $bd->prepare(
 "INSERT INTO USUARIO (
    USU_SAN
   ) values (
    :USU_SAN
   )"
);
$stmt->execute([
 ":USU_SAN" => $san
]);
$usuId = $bd->lastInsertId();

usuRolAgrega($bd, $usuId, $rolIds);

$bd->commit();

$encodeUsuId = urlencode($usuId);
devuelveCreated("/php/usuario-vista-modifica.php?id=$encodeUsuId", [
 "id" => ["value" => $usuId],
 "san" => ["value" => $san],
 "roles" => ["innerHTML" =>  rolCheckboxes()],
 "rolIds[]" => ["value" => $rolIds],
]);


D. php / usuario-elimina.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/devuelveNoContent.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/usuRolElimina.php";

$usuId = recibeEnteroObligatorio("id");

$bd = Bd::pdo();
$bd->beginTransaction();

usuRolElimina($bd, $usuId);

$stmt = $bd->prepare("DELETE FROM USUARIO WHERE USU_ID = :USU_ID");
$stmt->execute([":USU_ID" => $usuId]);

$bd->commit();

devuelveNoContent();


E. php / usuario-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/recibeArray.php";
require_once __DIR__ . "/lib/usuRolAgrega.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/usuRolElimina.php";
require_once __DIR__ . "/rolCheckboxes.php";

$usuId = recibeEnteroObligatorio("id");
$san = recibeTextoObligatorio("san");
$rolIds = recibeArray("rolIds");

$bd = Bd::pdo();
$bd->beginTransaction();

$stmt = $bd->prepare(
 "UPDATE USUARIO
   SET
    USU_SAN = :USU_SAN
   WHERE
    USU_ID = :USU_ID"
);
$stmt->execute([
 ":USU_SAN" => $san,
 ":USU_ID" => $usuId,
]);

usuRolElimina($bd, $usuId);

usuRolAgrega($bd, $usuId, $rolIds);

$bd->commit();

devuelveJson([
 "id" => ["value" => $usuId],
 "san" => ["value" => $san],
 "roles" => ["innerHTML" =>  rolCheckboxes()],
 "rolIds" => ["value" => $rolIds],
]);


F. php / usuario-vista-agrega.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/rolCheckboxes.php";

devuelveJson(["roles" => ["innerHTML" =>  rolCheckboxes()]]);


G. php / usuario-vista-index.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";

$bd = Bd::pdo();
$stmt = $bd->query(
 "SELECT
    U.USU_ID,
    U.USU_SAN,
    GROUP_CONCAT(UR.ROL_ID, ', ') AS roles
   FROM
    USUARIO U LEFT JOIN USU_ROL UR
     ON U.USU_ID = UR.USU_ID
   GROUP BY
    U.USU_SAN
   ORDER BY
    U.USU_SAN"
);
$lista = $stmt->fetchAll(PDO::FETCH_ASSOC);

$render = "";
foreach ($lista as $modelo) {
 $encodeUsuId = urlencode($modelo["USU_ID"]);
 $usuId = htmlentities($encodeUsuId);
 $usuSan = htmlentities($modelo["USU_SAN"]);
 $roles = $modelo["roles"] === null || $modelo["roles"] === ""
  ? "<em>-- Sin roles --</em>"
  : htmlentities($modelo["roles"]);
 $render .=
  "<dt><a href='modifica.html?id=$usuId'>$usuSan</a></dt>
    <dd><a href='modifica.html?id=$usuId'>$roles</a></dd>";
}

devuelveJson(["lista" => ["innerHTML" => $render]]);


H. php / usuario-vista-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/lib/rolIdsParaUsuId.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/rolCheckboxes.php";

$usuId = recibeEnteroObligatorio("id");

$bd = Bd::pdo();

$stmt = $bd->prepare("SELECT * FROM USUARIO WHERE USU_ID = :USU_ID");
$stmt->execute([":USU_ID" => $usuId]);
$modelo = $stmt->fetch(PDO::FETCH_ASSOC);

$modelo = validaEntidadObligatoria("Usuario",  $modelo);

$rolIds = rolIdsParaUsuId(Bd::pdo(), $usuId);

devuelveJson([
 "id" => ["value" => $usuId],
 "san" => ["value" => $modelo["USU_SAN"]],
 "roles" => ["innerHTML" =>  rolCheckboxes()],
 "rolIds[]" => $rolIds
]);


I. php / usuRolElimina.php

<?php

function usuRolElimina(\PDO $bd, string $usuId)
{
 $usuRolElimina = $bd->prepare("DELETE FROM USU_ROL WHERE USU_ID = :USU_ID");
 $usuRolElimina->execute([":USU_ID" => $usuId]);
}


J. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveCreated.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveCreated($urlDelNuevo, $resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(201);
  header("Location: $urlDelNuevo");
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
}


3. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


4. php / lib / devuelveNoContent.php

<?php

function devuelveNoContent()
{
 http_response_code(204);
}


5. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


6. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

7. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


8. php / lib / NOT_FOUND.php


1	<?php
2
3	const NOT_FOUND = 404;
4

9. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


10. php / lib / recibeArray.php

<?php

/**
 * Devuelve los valores asociados a un
 * parámetro multivaluado; por ejemplo, un
 * grupo de checkbox, recibido en el servidor
 * por medio de GET, POST o cookie.
 * 
 * Si no se recibe el parámetro, devuelve [].
 * 
 * Si el valor recibido no es un arreglo, lo
 * coloca dentro de uno.
 */
function recibeArray(string $parametro)
{
 if (isset($_REQUEST[$parametro])) {
  $valor = $_REQUEST[$parametro];
  return is_array($valor)
   ? $valor
   : [$valor];
 } else {
  return [];
 }
}


11. php / lib / recibeEntero.php

<?php

require_once __DIR__ . "/recibeTexto.php";

/**
 * Devuelve el valor entero de un parámetro recibido en el
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false
 *
 * Si se recibe una cadena vacía, se devuelve null.
 * 
 * Si parámetro no se puede convertir a entero, se genera
 * un error.
 */
function recibeEntero(string $parametro): false|null|int
{
 $valor = recibeTexto($parametro);
 if ($valor === false) {
  return false;
 } else {
  $valor = trim($valor);
  if ($valor === "") {
   return null;
  } else {
   return (int) $valor;
  }
 }
}


12. php / lib / recibeEnteroObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeEntero.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeEnteroObligatorio(string $parametro)
{
 $entero = recibeEntero($parametro);

 if ($entero === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 if ($entero === null)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenteroenblanco.html",
   "detail" => "Pon un número entero en el campo $parametro."
  ]);

 return $entero;
}


13. php / lib / recibeTexto.php

<?php

/**
 * Devuelve el texto de un parámetro enviado al
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false.
 */
function recibeTexto(string $parametro): false|string
{
 /* Si el parámetro está asignado en $_REQUEST,
  * devuelve su valor; de lo contrario, devuelve false.
  */
 $valor = isset($_REQUEST[$parametro])
  ? $_REQUEST[$parametro]
  : false;
 return $valor;
}


14. php / lib / recibeTextoObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeTexto.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeTextoObligatorio(string $parametro)
{
 $texto = recibeTexto($parametro);

 if ($texto === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 $trimTexto = trim($texto);

 if ($trimTexto === "")
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenblanco.html",
   "detail" => "Pon texto en el campo $parametro."
  ]);

 return $trimTexto;
}


15. php / lib / rolAgrega.php

<?php

function rolAgrega(\PDO $bd, string $id, string $descripcion)
{
 $rolAgrega = $bd->prepare(
  "INSERT INTO ROL (
     ROL_ID, ROL_DESCRIPCION
    ) VALUES (
     :ROL_ID, :ROL_DESCRIPCION
    )"
 );
 $rolAgrega->execute([
  ":ROL_ID" => $id,
  ":ROL_DESCRIPCION" => $descripcion,
 ]);
}


16. php / lib / rolBusca.php

<?php

function rolBusca(\PDO $bd, string $id)
{
 $rolBusca =  $bd->prepare("SELECT * FROM ROL WHERE ROL_ID = :ROL_ID");
 $rolBusca->execute([":ROL_ID" => $id]);
 $rol = $rolBusca->fetch(PDO::FETCH_ASSOC);
 return $rol;
}


17. php / lib / rolIdsParaUsuId.php

<?php

function rolIdsParaUsuId(\PDO $bd, int $usuId)
{
 $stmt = $bd->prepare(
  "SELECT ROL_ID
   FROM USU_ROL
   WHERE USU_ID = :USU_ID
   ORDER BY USU_ID"
 );
 $stmt->execute([":USU_ID" => $usuId]);
 $rolIds = $stmt->fetchAll(PDO::FETCH_COLUMN, 0);
 return $rolIds;
}


18. php / lib / usuRolAgrega.php

<?php

function usuRolAgrega(\PDO $bd, string $usuId, array $rolIds)
{
 $usuRolAgrega = $bd->prepare(
  "INSERT INTO USU_ROL (USU_ID, ROL_ID) values (:USU_ID, :ROL_ID)"
 );
 foreach ($rolIds as $rolId) {
  $usuRolAgrega->execute([
   ":USU_ID" => $usuId,
   ":ROL_ID" => $rolId,
  ]);
 }
}


19. php / lib / validaEntidadObligatoria.php

<?php

require_once __DIR__ . "/NOT_FOUND.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function validaEntidadObligatoria(string $nombre,  $entidad)
{

 if ($entidad === false)
  throw new ProblemDetailsException([
  "status" => NOT_FOUND,
  "title" => "Registro de $nombre no encontrado.",
  "type" => "/errors/entidadnoencontrada.html",
  "detail" => "No se encontró ningún registro de $nombre con el id solicitado.",
  ]);

 return $entidad;
}


L. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / accionElimina.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} mensaje
 * @param {string} nuevaVista
 */
export async function accionElimina(url, formulario, mensaje, nuevaVista) {
 if (confirm(mensaje)) {
  await consume(enviaFormRecibeJson(url, formulario))
  location.href = nuevaVista
 }
}

2. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

3. js / lib / descargaVista.js

import { consume } from "./consume.js"
import { muestraObjeto } from "./muestraObjeto.js"
import { recibeJson } from "./recibeJson.js"

/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function descargaVista(url, metodoHttp = "GET") {
 const respuesta = await consume(recibeJson(url, metodoHttp))
 const json = await respuesta.json()
 muestraObjeto(document, json)
 return json
}

4. js / lib / enviaFormRecibeJson.js

/**
 * Envía los datos de un formolario a la url usando la codificación
 * multipart/form-data.
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" },
   body: new FormData(formulario)
  }
 )
}

5. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


6. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

7. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const dataLength = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > dataLength
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(dataLength)] = valor
   }
  }
 }
}

8. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

9. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

10. js / lib / submitAccion.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {Event} event
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} nuevaVista
 */
export async function submitAccion(event, url, formulario, nuevaVista) {
 event.preventDefault()
 await consume(enviaFormRecibeJson(url, formulario))
 location.href = nuevaVista
}

M. Carpeta « errors »

Versión para imprimir.

A. errors / campoenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo en blanco</title>

</head>

<body>

 <h1>Campo en blanco</h1>

 <p>Pon texto en el campo obligatorio que está en blanco.</p>

</body>

</html>

B. errors / campoenteroenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo entero en blanco</title>

</head>

<body>

 <h1>Campo entero en blanco</h1>

 <p>
  Pon un número entero en el campo que pide un valor entero obligatorio y está
  en blanco.
 </p>

</body>

</html>

C. errors / entidadnoencontrada.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Registro no encontrado</title>

</head>

<body>

 <h1>Registro no encontrado</h1>

 <p>No se encontró ningún registro con el id solicitado.</p>

</body>

</html>

D. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

E. errors / faltavalor.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta un valor</title>

</head>

<body>

 <h1>Falta un valor</h1>

 <p>La solicitud no tiene un valor obligatorio.</p>

</body>

</html>

F. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

N. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

O. Resumen

En esta lección se mostró el acceso a bases de datos que implementan relaciones a muchos, usando servicios. El ejemplo también implementa una estructura de usuarios y roles.

22. Autenticación

Versión para imprimir.

A. Introducción

En esta lección se amplía el ejemplo de la lección anterior para controlar el acceso a una app.
Puedes probar el ejemplo en https://srvaut.rf.gd/.
Prueba con los siguientes usarios y contraseñas:

pepito

cuentos

susana

alegria

bebe

saurio
Este ejmplo se puede complementar usando reCaptcha..
Este ejemplo usa sesión en el navegador, que es un archivo en el servidor que permite guardar la información del usuario. Este mecanismo está cayendo en desuso, porque limita la veocidad del servidor y lo expone a fallas de seguridad.
Hoy en día se prefiere usar servidores de OAuth 2 para autenticar usuarios. Los principales servidores para este tipo de autenticación son Google, Facebook y Microsoft.

B. Diagrama entidad relación

Algunos navegadores web bloquean las interfaces que muestran etiquetas como contraseña, usuario, id, email, etcétera, suponiendo que es un intento de engañar al usuario; para evitar este problema, al campo con el nombre de usuario se le llama cue y a la conreaseña match.

C. Diagrama relacional

D. Diagrama de despliegue

E. Hazlo funcionar (con videos)

Prueba el ejemplo en https://srvaut.rf.gd/.
Descarga el archivo /src/srvaut.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

F. Hazlo funcionar (texto)

Prueba el ejemplo en https://srvaut.rf.gd/.
Descarga el archivo /src/srvaut.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

G. Archivos

Haz clic en los triángulos para expandir las carpetas

H. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Autenticación</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>
 <script type="module" src="./js/custom/mi-nav.js"></script>

</head>

<body>

 <mi-nav></mi-nav>

 <h1>Autenticación</h1>

 <p>Bienvenid@.</p>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"

  addEventListener("load", () => descargaVista("php/vista-index.php"))

 </script>

</body>

</html>

I. perfil.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Perfil</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>
 <script type="module" src="./js/custom/mi-nav.js"></script>


</head>

<body>

 <mi-nav></mi-nav>

 <h1>Perfil</h1>

 <p>
  <output id="outputSan">
   <progress max="100">Cargando…</progress>
  </output>
 </p>

 <p>
  <output id="outputRoles"></output>
 </p>

 <p>

  <a id="login" hidden href="login.html">Iniciar sesión</a>

  <button id="botonLogout" type="button" hidden>
   Terminar sesión
  </button>

 </p>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { consume } from "./js/lib/consume.js"
  import { recibeJson } from "./js/lib/recibeJson.js"

  addEventListener("load", descargaDatos)

  async function descargaDatos() {
   await descargaVista("php/vista-perfil.php")
   botonLogout.addEventListener("click", logout)
  }

  async function logout() {
   await consume(recibeJson('php/logout.php?'))
   location.reload()
  }

 </script>

</body>

</html>

J. login.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Iniciar sesión</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <progress id="ocupado" max="100">Cargando…</progress>

 <form id="formulario" hidden>

  <h1>Iniciar Sesión</h1>

  <p><a href="perfil.html">Cancelar</a></p>

  <p>
   <label>
    San
    <input name="san">
   </label>
  </p>

  <p>
   <label>
    Sen
    <input type="password" name="sen">
   </label>
  </p>

  <p><button type="submit">Iniciar sesión</button></p>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { submitAccion } from "./js/lib/submitAccion.js"

  descargaDatos()

  async function descargaDatos() {

   await descargaVista("php/vista-login.php")

   formulario.addEventListener(
    "submit",
    event => submitAccion(event, "php/login.php", formulario, "perfil.html")
   )

  }

 </script>

</body>

</html>

K. administrador.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Solo Administradores</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>
 <script type="module" src="./js/custom/mi-nav.js"></script>

</head>

<body>

 <mi-nav></mi-nav>

 <main id="main" hidden>

  <h1>Solo Administradores</h1>

  <p>Hola.</p>

  <p>
   <button id="botonSaludo">
    Ejecuta servicio
   </button>
  </p>

 </main>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { consume } from "./js/lib/consume.js"
  import { recibeJson } from "./js/lib/recibeJson.js"

  addEventListener("load", descargaDatos)

  async function descargaDatos() {
   await descargaVista("php/vista-administrador.php")
   botonSaludo.addEventListener("click", saludo)
  }

  async function saludo() {
   const respuesta = await consume(recibeJson('php/saludo-cliente.php'))
   const json = await respuesta.json()
   alert(json)
  }

 </script>

</body>

</html>

L. cliente.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Solo Clientes</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>
 <script type="module" src="./js/custom/mi-nav.js"></script>

</head>

<body>

 <mi-nav id="nav"></mi-nav>

 <main id="main" hidden>

  <h1>Solo Clientes</h1>

  <p>Hola.</p>

  <p>
   <button id="botonSaludo">
    Ejecuta servicio
   </button>
  </p>

 </main>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { consume } from "./js/lib/consume.js"
  import { recibeJson } from "./js/lib/recibeJson.js"

  addEventListener("load", descargaDatos)

  async function descargaDatos() {
   await descargaVista("php/vista-cliente.php")
   botonSaludo.addEventListener("click", saludo)
  }

  async function saludo() {
   const respuesta = await consume(recibeJson('php/saludo-cliente.php'))
   const json = await respuesta.json()
   alert(json)
  }

 </script>

</body>

</html>

M. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / custom »

Versión para imprimir.

1. js / custom / mi-nav.js

export class MiNav extends HTMLElement {

 constructor() {
  super()
  this.cargado = false
 }

 connectedCallback() {

  this.style.display = "block"

  if (this.cargado === false) {
   this.innerHTML = /* html */
    `<nav>
      <ul style="display: flex;
                 flex-wrap: wrap;
                 padding:0;
                 gap: 0.5em;
                 list-style-type: none">
       <li id="ocupado"><progress max="100">Cargando…</progress></li>
       <li id="aIndex" hidden><a href="index.html">Inicio</a></li>
       <li id="aAdmin" hidden>
        <a href="administrador.html">Para administradores</a>
       </li>
       <li id="aCliente" hidden><a href="cliente.html">Para clientes</a></li>
       <li id="san" hidden></li>
       <li id="aPerfil" hidden><a href="perfil.html">Perfil</a></li>
      </ul>
     </nav>`

   this.cargado = true
  }
 }

}

customElements.define("mi-nav", MiNav)

B. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

2. js / lib / descargaVista.js

import { consume } from "./consume.js"
import { muestraObjeto } from "./muestraObjeto.js"
import { recibeJson } from "./recibeJson.js"

/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function descargaVista(url, metodoHttp = "GET") {
 const respuesta = await consume(recibeJson(url, metodoHttp))
 const json = await respuesta.json()
 muestraObjeto(document, json)
 return json
}

3. js / lib / enviaFormRecibeJson.js

/**
 * Envía los datos de un formolario a la url usando la codificación
 * multipart/form-data.
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" },
   body: new FormData(formulario)
  }
 )
}

4. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


5. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

6. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const dataLength = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > dataLength
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(dataLength)] = valor
   }
  }
 }
}

7. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

8. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

9. js / lib / submitAccion.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {Event} event
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} nuevaVista
 */
export async function submitAccion(event, url, formulario, nuevaVista) {
 event.preventDefault()
 await consume(enviaFormRecibeJson(url, formulario))
 location.href = nuevaVista
}

N. Carpeta « php »

Versión para imprimir.

A. php / Bd.php

<?php

require_once __DIR__ . "/ROL_ID_CLIENTE.php";
require_once __DIR__ . "/ROL_ID_ADMINISTRADOR.php";
require_once __DIR__ . "/lib/rolBusca.php";
require_once __DIR__ . "/lib/rolAgrega.php";
require_once __DIR__ . "/lib/usuRolAgrega.php";
require_once __DIR__ . "/usuarioBuscaSan.php";

class Bd
{

 private static ?PDO $pdo = null;

 static function pdo(): PDO
 {
  if (self::$pdo === null) {

   self::$pdo = new PDO(
    // cadena de conexión
    "sqlite:" . __DIR__ . "/srvaut.db",
    // usuario
    null,
    // contraseña
    null,
    // Opciones: pdos no persistentes y lanza excepciones.
    [PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
   );

   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS USUARIO (
      USU_ID INTEGER,
      USU_SAN TEXT NOT NULL,
      USU_SEN TEXT NOT NULL,
      CONSTRAINT USU_PK
       PRIMARY KEY(USU_ID),
      CONSTRAINT USU_SAN_UNQ
       UNIQUE(USU_SAN),
      CONSTRAINT USU_SAN_NV
       CHECK(LENGTH(USU_SAN) > 0)
     )'
   );
   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS ROL (
      ROL_ID TEXT NOT NULL,
      ROL_DESCRIPCION TEXT NOT NULL,
      CONSTRAINT ROL_PK
       PRIMARY KEY(ROL_ID),
      CONSTRAINT ROL_ID_NV
       CHECK(LENGTH(ROL_ID) > 0),
      CONSTRAINT ROL_DESCR_UNQ
       UNIQUE(ROL_DESCRIPCION),
      CONSTRAINT ROL_DESCR_NV
       CHECK(LENGTH(ROL_DESCRIPCION) > 0)
     )'
   );
   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS USU_ROL (
       USU_ID INTEGER NOT NULL,
       ROL_ID TEXT NOT NULL,
       CONSTRAINT USU_ROL_PK
        PRIMARY KEY(USU_ID, ROL_ID),
       CONSTRAINT USU_ROL_USU_FK
        FOREIGN KEY (USU_ID) REFERENCES USUARIO(USU_ID),
       CONSTRAINT USU_ROL_ROL_FK
        FOREIGN KEY (ROL_ID) REFERENCES ROL(ROL_ID)
      )'
   );

   self::$pdo->beginTransaction();

   if (rolBusca(self::$pdo, "Administrador") === false) {
    rolAgrega(
     bd: self::$pdo,
     id: "Administrador",
     descripcion: "Administra el sistema."
    );
   }

   if (rolBusca(self::$pdo, "Cliente") === false) {
    rolAgrega(
     bd: self::$pdo,
     id: "Cliente",
     descripcion: "Realiza compras."
    );
   }

   $usuarioAgrega = self::$pdo->prepare(
    "INSERT INTO USUARIO (
        USU_SAN, USU_SEN
       ) VALUES (
        :USU_SAN, :USU_SEN
       )"
   );

   if (usuarioBuscaSan(self::$pdo, "pepito") === false) {
    $usuarioAgrega->execute([
     ":USU_SAN" => "pepito",
     ":USU_SEN" => password_hash("cuentos", PASSWORD_DEFAULT),
    ]);
    $usuId = self::$pdo->lastInsertId();
    usuRolAgrega(self::$pdo, $usuId, [ROL_ID_CLIENTE]);
   }

   if (usuarioBuscaSan(self::$pdo, "susana") === false) {
    $usuarioAgrega->execute([
     ":USU_SAN" => "susana",
     ":USU_SEN" => password_hash("alegria", PASSWORD_DEFAULT),
    ]);
    $usuId = self::$pdo->lastInsertId();
    usuRolAgrega(self::$pdo, $usuId, [ROL_ID_ADMINISTRADOR]);
   }

   if (usuarioBuscaSan(self::$pdo, "bebe") === false) {
    $usuarioAgrega->execute([
     ":USU_SAN" => "bebe",
     ":USU_SEN" => password_hash("saurio", PASSWORD_DEFAULT),
    ]);
    $usuId = self::$pdo->lastInsertId();
    usuRolAgrega(self::$pdo, $usuId, [ROL_ID_CLIENTE,ROL_ID_ADMINISTRADOR]);
   }

   self::$pdo->commit();
  }

  return self::$pdo;
 }
}


B. php / jsonMiNav.php

<?php

function jsonMiNav(string $san, array $rolIds)
{
 $json = [
  "ocupado" => ["hidden" => true],
  "aIndex" => ["hidden" => false],
  "aAdmin" => [
   "hidden" => array_search(ROL_ID_ADMINISTRADOR, $rolIds, true) === false
  ],
  "aCliente" => [
   "hidden" => array_search(ROL_ID_CLIENTE, $rolIds, true) === false
  ],
  "san" => [
   "hidden" => $san === "",
   "textContent" => $san
  ],
  "aPerfil" => ["hidden" => false],
 ];

 return $json;
}


C. php / login.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/BAD_REQUEST.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/recibeTexto.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/lib/rolIdsParaUsuId.php";
require_once __DIR__ . "/SAN.php";
require_once __DIR__ . "/USU_ID.php";
require_once __DIR__ . "/ROL_IDS.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/protegeLogin.php";
require_once __DIR__ . "/usuarioBuscaSan.php";

list($san, $rolIds) = protegeLogin([]);

$san = recibeTextoObligatorio("san");
$sen = recibeTexto("sen");

$bd = Bd::pdo();

$usuario = usuarioBuscaSan($bd, $san);

if (
 $usuario === false
 || !password_verify(
  ($sen === false || $sen === null) ? "" : $sen,
  $usuario["USU_SEN"]
 )
)
 throw new ProblemDetailsException([
  "status" => BAD_REQUEST,
  "type" => "/errors/datosincorrectos.html",
  "title" => "Datos incorrectos.",
  "detail" => "El san y/o el sen proporcionados son incorrectos.",
 ]);

$_SESSION[SAN] = $san;
$_SESSION[USU_ID] = $usuario[USU_ID];

devuelveJson([
 SAN => $san,
 ROL_IDS => rolIdsParaUsuId($bd, $usuario[USU_ID])
]);


D. php / logout.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveNoContent.php";
require_once __DIR__ . "/SAN.php";
require_once __DIR__ . "/ROL_IDS.php";

session_start();

if (isset($_SESSION[SAN])) {
 unset($_SESSION[SAN]);
}
if (isset($_SESSION[ROL_IDS])) {
 unset($_SESSION[ROL_IDS]);
}

session_destroy();

devuelveNoContent();


E. php / protege.php

<?php

require_once __DIR__ . "/lib/NO_AUTORIZADO.php";
require_once __DIR__ . "/lib/ProblemDetailsException.php";
require_once __DIR__ . "/lib/rolIdsParaUsuId.php";
require_once __DIR__ . "/SAN.php";
require_once __DIR__ . "/USU_ID.php";
require_once __DIR__ . "/Bd.php";

function protege(array $rolIdsPermitidos)
{

 session_start();

 $san = isset($_SESSION[SAN]) ? $_SESSION[SAN] : "";
 $usuId = isset($_SESSION[USU_ID]) ? $_SESSION[USU_ID] : -1;
 $rolIds = rolIdsParaUsuId(Bd::pdo(), $usuId);

 if (count($rolIdsPermitidos) === 0) {

  return [$san, $rolIds, $usuId];
 } else {

  if ($san === "")  throw creaNoAutorizado();

  foreach ($rolIdsPermitidos as $rolId) {
   if (array_search($rolId, $rolIds, true) !== false) {
    return [$san, $rolIds, $usuId];
   }
  }

  throw creaNoAutorizado();
 }
}

function creaNoAutorizado()
{
 return new ProblemDetailsException([
  "status" => NO_AUTORIZADO,
  "type" => "/errors/noautorizado.html",
  "title" => "No autorizado.",
  "detail" => "No estás autorizado para usar este recurso.",
 ]);
}


F. php / protegeLogin.php

<?php

require_once __DIR__ . "/lib/NO_AUTORIZADO.php";
require_once __DIR__ . "/lib/ProblemDetailsException.php";
require_once __DIR__ . "/protege.php";

function protegeLogin(array $rolIdsPermitidos)
{

 list($san, $rolIds, $usuId) = protege($rolIdsPermitidos);

 if ($san !== "")
  throw new ProblemDetailsException([
   "status" => NO_AUTORIZADO,
   "type" => "/errors/sesioniniciada.html",
   "title" => "Sesión iniciada.",
   "detail" => "La sesión ya está iniciada.",
  ]);

 return [$san, $rolIds, $usuId];
}


G. php / ROL_IDS.php


1	<?php
2
3	const ROL_IDS = "rolIds";

H. php / ROL_ID_ADMINISTRADOR.php


1	<?php
2
3	const ROL_ID_ADMINISTRADOR = "Administrador";
4

I. php / ROL_ID_CLIENTE.php


1	<?php
2
3	const ROL_ID_CLIENTE = "Cliente";

J. php / saludo-cliente.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/ROL_ID_CLIENTE.php";
require_once __DIR__ . "/protege.php";

list($san) = protege([ROL_ID_CLIENTE]);

devuelveJson("Hola " . $san);


K. php / SAN.php


1	<?php
2
3	const SAN = "san";

L. php / usuarioBuscaSan.php

<?php

function usuarioBuscaSan(\PDO $bd, string $san)
{
 $usuarioBusca = $bd->prepare("SELECT * FROM USUARIO WHERE USU_SAN = :USU_SAN");
 $usuarioBusca->execute([":USU_SAN" => $san]);
 $usuario = $usuarioBusca->fetch(PDO::FETCH_ASSOC);
 return $usuario;
}


M. php / USU_ID.php


1	<?php
2
3	const USU_ID = "USU_ID";

N. php / vista-administrador.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/protege.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/ROL_ID_ADMINISTRADOR.php";
require_once __DIR__ . "/jsonMiNav.php";

list($san, $rolIds) = protege([ROL_ID_ADMINISTRADOR]);
devuelveJson([
 ...jsonMiNav($san, $rolIds),
 "main" => ["hidden" => false],
]);


O. php / vista-cliente.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/protege.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/ROL_ID_CLIENTE.php";
require_once __DIR__ . "/jsonMiNav.php";

list($san, $rolIds) = protege([ROL_ID_CLIENTE]);

devuelveJson([
 ...jsonMiNav($san, $rolIds),
 "main" => ["hidden" => false],
]);


P. php / vista-index.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/protege.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/jsonMiNav.php";

list($san, $rolIds) = protege([]);

devuelveJson(jsonMiNav($san, $rolIds));


Q. php / vista-login.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/protegeLogin.php";

list($san) = protegeLogin([]);

devuelveJson([
 "ocupado" => ["hidden" => true],
 "formulario" => ["hidden" =>  false],
]);


R. php / vista-perfil.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/protege.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/jsonMiNav.php";

list($san, $rolIds) = protege([]);

if ($san === "") {
 devuelveJson([
  ...jsonMiNav($san, $rolIds),
  "login" => ["hidden" => false],
  "outputSan" => ["value" => "No has iniciado sesión."],
  "outputRoles" => ["value" => ""],
 ]);
} else {
 devuelveJson([
  ...jsonMiNav($san, $rolIds),
  "botonLogout" => ["hidden" => false],
  "outputSan" => ["value" => $san],
  "outputRoles" => [
   "value" => count($rolIds) === 0
    ? "Sin roles."
    : implode(", ", $rolIds),
  ],
 ]);
}


S. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


3. php / lib / devuelveNoContent.php

<?php

function devuelveNoContent()
{
 http_response_code(204);
}


4. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


5. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

6. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


7. php / lib / NO_AUTORIZADO.php


1	<?php
2
3	const NO_AUTORIZADO = 401;
4

8. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


9. php / lib / recibeTexto.php

<?php

/**
 * Devuelve el texto de un parámetro enviado al
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false.
 */
function recibeTexto(string $parametro): false|string
{
 /* Si el parámetro está asignado en $_REQUEST,
  * devuelve su valor; de lo contrario, devuelve false.
  */
 $valor = isset($_REQUEST[$parametro])
  ? $_REQUEST[$parametro]
  : false;
 return $valor;
}


10. php / lib / recibeTextoObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeTexto.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeTextoObligatorio(string $parametro)
{
 $texto = recibeTexto($parametro);

 if ($texto === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 $trimTexto = trim($texto);

 if ($trimTexto === "")
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenblanco.html",
   "detail" => "Pon texto en el campo $parametro."
  ]);

 return $trimTexto;
}


11. php / lib / rolAgrega.php

<?php

function rolAgrega(\PDO $bd, string $id, string $descripcion)
{
 $rolAgrega = $bd->prepare(
  "INSERT INTO ROL (
     ROL_ID, ROL_DESCRIPCION
    ) VALUES (
     :ROL_ID, :ROL_DESCRIPCION
    )"
 );
 $rolAgrega->execute([
  ":ROL_ID" => $id,
  ":ROL_DESCRIPCION" => $descripcion,
 ]);
}


12. php / lib / rolBusca.php

<?php

function rolBusca(\PDO $bd, string $id)
{
 $rolBusca =  $bd->prepare("SELECT * FROM ROL WHERE ROL_ID = :ROL_ID");
 $rolBusca->execute([":ROL_ID" => $id]);
 $rol = $rolBusca->fetch(PDO::FETCH_ASSOC);
 return $rol;
}


13. php / lib / rolIdsParaUsuId.php

<?php

function rolIdsParaUsuId(\PDO $bd, int $usuId)
{
 $stmt = $bd->prepare(
  "SELECT ROL_ID
   FROM USU_ROL
   WHERE USU_ID = :USU_ID
   ORDER BY USU_ID"
 );
 $stmt->execute([":USU_ID" => $usuId]);
 $rolIds = $stmt->fetchAll(PDO::FETCH_COLUMN, 0);
 return $rolIds;
}


14. php / lib / usuRolAgrega.php

<?php

function usuRolAgrega(\PDO $bd, string $usuId, array $rolIds)
{
 $usuRolAgrega = $bd->prepare(
  "INSERT INTO USU_ROL (USU_ID, ROL_ID) values (:USU_ID, :ROL_ID)"
 );
 foreach ($rolIds as $rolId) {
  $usuRolAgrega->execute([
   ":USU_ID" => $usuId,
   ":ROL_ID" => $rolId,
  ]);
 }
}


O. Carpeta « errors »

Versión para imprimir.

A. errors / campoenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo en blanco</title>

</head>

<body>

 <h1>Campo en blanco</h1>

 <p>Pon texto en el campo obligatorio que está en blanco.</p>

</body>

</html>

B. errors / datosincorrectos.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Datos incorrectos</title>

</head>

<body>

 <h1>Datos incorrectos</h1>

 <p>El san y/o el sen proporcionados son incorrectos.</p>
</body>

</html>

C. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

D. errors / faltavalor.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta un valor</title>

</head>

<body>

 <h1>Falta un valor</h1>

 <p>La solicitud no tiene un valor obligatorio.</p>

</body>

</html>

E. errors / noautorizado.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>No autorizado</title>

</head>

<body>

 <h1>No autorizado</h1>

 <p>No está autorizado para usar este recurso.</p>

</body>

</html>

F. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

G. errors / sesioniniciada.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Sesión iniciada</title>

</head>

<body>

 <h1>Sesión iniciada</h1>

 <p>La sesión ya está iniciada.</p>

</body>

</html>

P. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

Q. Resumen

En esta lección se amplió el ejemplo de la lección anterior para controlar el acceso a una app.

23. Archivos en la base de datos

Versión para imprimir.

A. Introducción

En esta lección se muestra el almacenamiento de un archivo por registro de la base de datos, usando servicios.
Puedes probar el ejemplo en http://srvarchivos.rf.gd/.
Este ejemplo toma como base la lección de asociaciones a uno, pero en caso de necesitar varios archivos por producto, puedes tomar como base la lección de asociaciones a muchos.

B. Diagrama entidad relación

C. Diagrama relacional

D. Diagrama de despliegue

E. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvarchivos.rf.gd/.
Descarga el archivo /src/srvarchivos.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

F. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvarchivos.rf.gd/.
Descarga el archivo /src/srvarchivos.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

G. Archivos

Haz clic en los triángulos para expandir las carpetas

H. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Archivos</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Archivos</h1>

 <p><a href="agrega.html">Agregar</a></p>

 <dl id="lista">
  <dt>Cargando…</dt>
  <dd><progress max="100">Cargando…</progress></dd>
 </dl>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"

  descargaVista("php/producto-vista-index.php")

 </script>

</body>

</html>

I. agrega.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Agregar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario"">

  <h1>Agregar</h1>

  <p><a href=" index.html">Cancelar</a></p>

  <p>
   <label>
    Nombre *
    <input name="nombre">
   </label>
  </p>

  <p>
   <label>
    Imagen *
    <input name="imagen" type="file" accept="image/*">
   </label>
  </p>

  <p>* Obligatorio</p>

  <p><button type="submit">Agregar</button></p>

  <figure>
   <img id="preview" hidden alt="Imagen del producto" style="max-width: 100%;">
  </figure>

 </form>

 <script type="module">

  import { submitAccion } from "./js/lib/submitAccion.js"
  import {
   muestraImagenSeleccionada
  } from "./js/lib/muestraImagenSeleccionada.js"

  formulario.addEventListener(
   "submit",
   event => submitAccion(
    event, "php/producto-agrega.php", formulario, "index.html"
   )
  )

  formulario.imagen.addEventListener(
   "input",
   () => muestraImagenSeleccionada(formulario.imagen, preview)
  )

  muestraImagenSeleccionada(formulario.imagen, preview)

 </script>
</body>

</html>

J. modifica.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Modificar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Modificar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <input type="hidden" name="id">

  <p>
   <label>
    Nombre *
    <input name="nombre" value="Cargando…">
   </label>
  </p>

  <p>
   <label>
    Imagen
    <input name="imagen" type="file" accept="image/*">
   </label>
  </p>

  <p>* Obligatorio</p>

  <p>

   <button type="submit">Guardar</button>

   <button id="botonEliminar" type="button">
    Eliminar
   </button>

  </p>

  <figure>
   <img id="preview" hidden alt="Imagen del producto" style="max-width: 100%;">
  </figure>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { submitAccion } from "./js/lib/submitAccion.js"
  import { accionElimina } from "./js/lib/accionElimina.js"
  import {
   muestraImagenSeleccionada
  } from "./js/lib/muestraImagenSeleccionada.js"

  const params = new URL(location.href).searchParams
  descargaDatos()

  async function descargaDatos() {

   if (params.size > 0) {

    await descargaVista("php/producto-vista-modifica.php?" + params)
    muestraImagenSeleccionada(formulario.imagen, preview)

    formulario.addEventListener(
     "submit",
     event => submitAccion(
      event, "php/producto-modifica.php", formulario, "index.html"
     )
    )

    formulario.imagen.addEventListener(
     "input",
     () => muestraImagenSeleccionada(formulario.imagen, preview)
    )

    botonEliminar.addEventListener(
     "click",
     () => accionElimina(
      "php/producto-elimina.php",
      formulario,
      "Confirma la eliminación",
      "index.html"
     )
    )

   }

  }

 </script>

</body>

</html>

K. Carpeta « php »

Versión para imprimir.

A. php / archivo.php

<?php

require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/Bd.php";

// Evita que la imagen se cargue en el caché del navegador.
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

$archId = recibeEnteroObligatorio("id");

$bd = Bd::pdo();

$stmt = $bd->prepare("SELECT * FROM ARCHIVO WHERE ARCH_ID = :ARCH_ID");
$stmt->execute([":ARCH_ID" => $archId]);
$archivo = $stmt->fetch(PDO::FETCH_ASSOC);

$archivo = validaEntidadObligatoria("Archivo",  $archivo);

$bytes = $archivo["ARCH_BYTES"];
$contentType = (new finfo(FILEINFO_MIME_TYPE))->buffer($bytes);
header("Content-Type: $contentType");
echo $bytes;


B. php / archivoAgrega.php

<?php

function archivoAgrega(PDO $bd, string $bytes)
{
 $stmt = $bd->prepare(
  "INSERT INTO ARCHIVO (
    ARCH_BYTES
   ) values (
    :ARCH_BYTES
   )"
 );
 $stmt->execute([
  ":ARCH_BYTES" => $bytes
 ]);
 $archId = $bd->lastInsertId();
 return $archId;
}


C. php / Bd.php

<?php

class Bd
{
 private static ?PDO $pdo = null;

 static function pdo(): PDO
 {
  if (self::$pdo === null) {

   self::$pdo = new PDO(
    // cadena de conexión
    "sqlite:" . __DIR__ . "/srvarchivos.db",
    // usuario
    null,
    // contraseña
    null,
    // Opciones: pdos no persistentes y lanza excepciones.
    [PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
   );

   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS ARCHIVO (
      ARCH_ID INTEGER,
      ARCH_BYTES BLOB NOT NULL,
      CONSTRAINT ARCH_PK
       PRIMARY KEY(ARCH_ID)
     )'
   );
   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS PRODUCTO (
      PROD_ID INTEGER,
      PROD_NOMBRE TEXT NOT NULL,
      ARCH_ID INTEGER NOT NULL,
      CONSTRAINT PROD_PK
       PRIMARY KEY(PROD_ID),
      CONSTRAINT PROD_NOM_UNQ
       UNIQUE(PROD_NOMBRE),
      CONSTRAINT PROD_NOM_NV
       CHECK(LENGTH(PROD_NOMBRE) > 0),
      CONSTRAINT PROD_ARCH_FK
       FOREIGN KEY (ARCH_ID) REFERENCES ARCHIVO(ARCH_ID)
      )'
   );
  }

  return self::$pdo;
 }
}


D. php / producto-agrega.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/recibeBytesObligatorios.php";
require_once __DIR__ . "/lib/devuelveCreated.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/archivoAgrega.php";

$nombre = recibeTextoObligatorio("nombre");
$bytes = recibeBytesObligatorios("imagen");

$bd = Bd::pdo();
$bd->beginTransaction();

$archId = archivoAgrega($bd, $bytes);

$stmt = $bd->prepare(
 "INSERT INTO PRODUCTO (
    PROD_NOMBRE, ARCH_ID
   ) values (
    :PROD_NOMBRE, :ARCH_ID
   )"
);
$stmt->execute([
 ":PROD_NOMBRE" => $nombre,
 ":ARCH_ID" => $archId
]);
$prodId = $bd->lastInsertId();

$bd->commit();

$encodeId = urlencode($prodId);
$encodeArchId = urlencode($archId);
$htmlEncodeArchId = htmlentities($encodeArchId);
// Los bytes de las imágenes se descargan con "archivo.php"; no desde aquí.
devuelveCreated("/php/producto-vista-modifica.php?id=$encodeId", [
 "id" => ["value" => $prodId],
 "nombre" => ["value" => $nombre],
 "imagen" => [
  "imagen" => [
   "data-src" => $htmlEncodeArchId === ""
    ? ""
    : "php/archivo.php?id=$htmlEncodeArchId"
  ]
 ]
]);


E. php / producto-elimina.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/devuelveNoContent.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/productoBusca.php";

$prodId = recibeEnteroObligatorio("id");

$bd = Bd::pdo();
$bd->beginTransaction();

$producto = productoBusca($bd, $prodId);
if ($producto !== false) {

 $stmt = $bd->prepare("DELETE FROM PRODUCTO WHERE PROD_ID = :PROD_ID");
 $stmt->execute([":PROD_ID" => $prodId]);

 if ($producto["ARCH_ID"] !== null) {
  $stmt = $bd->prepare("DELETE FROM ARCHIVO WHERE ARCH_ID = :ARCH_ID");
  $stmt->execute([":ARCH_ID" => $producto["ARCH_ID"]]);
 }
}

$bd->commit();

devuelveNoContent();


F. php / producto-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/recibeBytesOpcionales.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/productoBusca.php";

$prodId = recibeEnteroObligatorio("id");
$nombre = recibeTextoObligatorio("nombre");
$bytes = recibeBytesOpcionales("imagen");

$bd = Bd::pdo();
$bd->beginTransaction();

$producto = productoBusca($bd, $prodId);
$producto = validaEntidadObligatoria("Producto",  $producto);

$archId = $producto["ARCH_ID"];

if ($bytes !== "") {
 if ($archId === null) {
  $archId = archivoAgrega($bd, $bytes);
 } else {
  $stmt = $bd->prepare(
   "UPDATE ARCHIVO
   SET
    ARCH_BYTES = :ARCH_BYTES
   WHERE
    ARCH_ID = :ARCH_ID"
  );
  $stmt->execute([
   ":ARCH_BYTES" => $bytes,
   ":ARCH_ID" => $archId,
  ]);
 }
}

$stmt = $bd->prepare(
 "UPDATE PRODUCTO
   SET
    PROD_NOMBRE = :PROD_NOMBRE,
    ARCH_ID = :ARCH_ID
   WHERE
    PROD_ID = :PROD_ID"
);
$stmt->execute([
 ":PROD_NOMBRE" => $nombre,
 ":ARCH_ID" => $archId,
 ":PROD_ID" => $prodId,
]);

$bd->commit();

$encodeArchId = $archId === null ? "" : urlencode($archId);
$htmlEncodeArchId = htmlentities($encodeArchId);
// Los bytes de las imágenes se descargan con "archivo.php"; no desde aquí.
devuelveJson([
 "id" => ["value" => $prodId],
 "nombre" => ["value" => $nombre],
 "imagen" => [
  "data-src" => $htmlEncodeArchId === ""
   ? ""
   : "php/archivo.php?id=$htmlEncodeArchId"
 ]
]);


G. php / producto-vista-index.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";

$bd = Bd::pdo();
$stmt = $bd->query("SELECT * FROM PRODUCTO ORDER BY PROD_NOMBRE");
$lista = $stmt->fetchAll(PDO::FETCH_ASSOC);

$render = "";
foreach ($lista as $modelo) {
 $prodId = htmlentities($modelo["PROD_ID"]);
 $prodNombre = htmlentities($modelo["PROD_NOMBRE"]);
 $encodeArchId =
 $modelo["ARCH_ID"] === null ? "" : urlencode($modelo["ARCH_ID"]);
 $archId = $encodeArchId === "" ? "" : htmlentities($encodeArchId);
 $src = $archId === "" ? "" : "php/archivo.php?id=$archId";
 // Los bytes de las imágenes se descargan con "archivo.php"; no desde aquí.
 $render .=
  "<div style='display: flex; flex-direction: row-reverse;
      align-items: center; gap: 0.5rem'>
     <dt style='flex: 1 1 0'>
      <a href='modifica.html?id=$prodId'>$prodNombre</a>
     </dt>
     <dd style='flex: 1 1 0; margin: 0'>
      <a href='modifica.html?id=$prodId'><img
        style='width: 100%; aspect-ratio:16/9; object-fit: cover'
        alt='Imagen del producto' src='$src'></a>
     </dd>
    </div>";
}

devuelveJson(["lista" => ["innerHTML" => $render]]);


H. php / producto-vista-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/productoBusca.php";

$prodId = recibeEnteroObligatorio("id");

$bd = Bd::pdo();
$modelo = productoBusca($bd, $prodId);

$modelo = validaEntidadObligatoria("Producto",  $modelo);

$encodeArchId =
 $modelo["ARCH_ID"] === null ? "" : urlencode($modelo["ARCH_ID"]);
$htmlEncodeArchId = htmlentities($encodeArchId);
// Los bytes de las imágenes se descargan con "archivo.php"; no desde aquí.
devuelveJson([
 "id" => ["value" => $prodId],
 "nombre" => ["value" => $modelo["PROD_NOMBRE"]],
 "imagen" => [
  "data-src" => $htmlEncodeArchId === ""
   ? ""
   : "php/archivo.php?id=$htmlEncodeArchId"
 ]
]);


I. php / productoBusca.php

<?php

function productoBusca(PDO $bd, int $prodId)
{
 $stmt = $bd->prepare("SELECT * FROM PRODUCTO WHERE PROD_ID = :PROD_ID");
 $stmt->execute([":PROD_ID" => $prodId]);
 $modelo = $stmt->fetch(PDO::FETCH_ASSOC);
 return $modelo;
}


J. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveCreated.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveCreated($urlDelNuevo, $resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(201);
  header("Location: $urlDelNuevo");
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
}


3. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


4. php / lib / devuelveNoContent.php

<?php

function devuelveNoContent()
{
 http_response_code(204);
}


5. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


6. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

7. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


8. php / lib / NOT_FOUND.php


1	<?php
2
3	const NOT_FOUND = 404;
4

9. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


10. php / lib / recibeBytes.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeBytes(string $parametro)
{
 if (isset($_FILES[$parametro])) {

  $path = $_FILES[$parametro]["tmp_name"];

  if ($path === "") {

   return "";
  } elseif (is_uploaded_file($path)) {

   $contents = file_get_contents($path);

   if ($contents === false) {

    switch ($_FILES[$parametro]['error']) {

     case UPLOAD_ERR_OK:

      return $contents;

     case UPLOAD_ERR_INI_SIZE:
     case UPLOAD_ERR_FORM_SIZE:

      throw new ProblemDetailsException([
       "status" => BAD_REQUEST,
       "title" => "Archivo demasiado largo.",
       "type" => "/errors/archivodemasiadolargo.html",
       "detail" => "El archivo " - $parametro .
        " excede el tamaño máximo que el servidor puede recibir."
      ]);

     case UPLOAD_ERR_PARTIAL:
      throw new ProblemDetailsException([
       "status" => INTERNAL_SERVER_ERROR,
       "title" => "Carga incompleta de archivo.",
       "type" => "/errors/archivocargaincompleta.html",
       "detail" => "Por una razón desconocida, el archivo " - $parametro .
        " no se cargó completamente."
      ]);

     case UPLOAD_ERR_NO_FILE:

      throw creaArchivoNoRecibido($parametro);

     case UPLOAD_ERR_NO_TMP_DIR:

      throw new ProblemDetailsException([
       "status" => INTERNAL_SERVER_ERROR,
       "title" => "Falta la carpeta temporal.",
       "type" => "/errors/faltacarpetatemporal.html",
       "detail" => "Por una razón desconocida, falta la carpeta temporal " .
        "para cargar el archivo $parametro."
      ]);

     case UPLOAD_ERR_CANT_WRITE:

      throw new ProblemDetailsException([
       "status" => INTERNAL_SERVER_ERROR,
       "title" => "El archivo no se guardó.",
       "type" => "/errors/archivonoguardado.html",
       "detail" => "Por una razón desconocida, el archivo " - $parametro .
        " no se pudo guardar en disco."
      ]);

     case UPLOAD_ERR_EXTENSION:

      throw new ProblemDetailsException([
       "status" => BAD_REQUEST,
       "title" => "Extensión no permitida.",
       "type" => "/errors/extensionprohibida.html",
       "detail" => "La extensión del archivo " - $parametro .
        " no está permitida en el servidor."
      ]);

     default:

      throw new ProblemDetailsException([
       "status" => INTERNAL_SERVER_ERROR,
       "title" => "Error no identificado recuperando el archivo.",
       "type" => "/errors/errorrecuperandoarchivo.html",
       "detail" => "Por una razón desconocida, el archivo " - $parametro .
        " no se pudo recuperar."
      ]);
    }
   } else {

    return $contents;
   }
  } else {

   throw creaArchivoNoRecibido($parametro);
  }
 } else {
  return false;
 }
}

function creaArchivoNoRecibido(string $parametro)
{
 return new ProblemDetailsException([
  "status" => BAD_REQUEST,
  "title" => "Archivo no recibido.",
  "type" => "/errors/archivonorecibido.html",
  "detail" => "El archivo $parametro no fué recibido por el servidor."
 ]);
}


11. php / lib / recibeBytesObligatorios.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeBytes.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeBytesObligatorios(string $parametro)
{
 $bytes = recibeBytes($parametro);

 if ($bytes === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 if ($bytes === "")
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Archivo no seleccionado o vacío para el campo $parametro.",
   "type" => "/errors/archivovacio.html",
   "detail" => "Selecciona un archivo que no esté vacío en el campo $parametro."
  ]);

 return $bytes;
}


12. php / lib / recibeBytesOpcionales.php

<?php

require_once __DIR__ . "/recibeBytes.php";

function recibeBytesOpcionales(string $parametro)
{
 $enteroOpcional = recibeBytes($parametro);
 return $enteroOpcional === false ? "" : $enteroOpcional;
}


13. php / lib / recibeEntero.php

<?php

require_once __DIR__ . "/recibeTexto.php";

/**
 * Devuelve el valor entero de un parámetro recibido en el
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false
 *
 * Si se recibe una cadena vacía, se devuelve null.
 * 
 * Si parámetro no se puede convertir a entero, se genera
 * un error.
 */
function recibeEntero(string $parametro): false|null|int
{
 $valor = recibeTexto($parametro);
 if ($valor === false) {
  return false;
 } else {
  $valor = trim($valor);
  if ($valor === "") {
   return null;
  } else {
   return (int) $valor;
  }
 }
}


14. php / lib / recibeEnteroObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeEntero.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeEnteroObligatorio(string $parametro)
{
 $entero = recibeEntero($parametro);

 if ($entero === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 if ($entero === null)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenteroenblanco.html",
   "detail" => "Pon un número entero en el campo $parametro."
  ]);

 return $entero;
}


15. php / lib / recibeEnteroOpcional.php

<?php

require_once __DIR__ . "/recibeEntero.php";

function recibeEnteroOpcional(string $parametro)
{
 $enteroOpcional = recibeEntero($parametro);
 return $enteroOpcional === false ? null : $enteroOpcional;
}


16. php / lib / recibeTexto.php

<?php

/**
 * Devuelve el texto de un parámetro enviado al
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false.
 */
function recibeTexto(string $parametro): false|string
{
 /* Si el parámetro está asignado en $_REQUEST,
  * devuelve su valor; de lo contrario, devuelve false.
  */
 $valor = isset($_REQUEST[$parametro])
  ? $_REQUEST[$parametro]
  : false;
 return $valor;
}


17. php / lib / recibeTextoObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeTexto.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeTextoObligatorio(string $parametro)
{
 $texto = recibeTexto($parametro);

 if ($texto === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 $trimTexto = trim($texto);

 if ($trimTexto === "")
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenblanco.html",
   "detail" => "Pon texto en el campo $parametro."
  ]);

 return $trimTexto;
}


18. php / lib / validaEntidadObligatoria.php

<?php

require_once __DIR__ . "/NOT_FOUND.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function validaEntidadObligatoria(string $nombre,  $entidad)
{

 if ($entidad === false)
  throw new ProblemDetailsException([
  "status" => NOT_FOUND,
  "title" => "Registro de $nombre no encontrado.",
  "type" => "/errors/entidadnoencontrada.html",
  "detail" => "No se encontró ningún registro de $nombre con el id solicitado.",
  ]);

 return $entidad;
}


L. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / accionElimina.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} mensaje
 * @param {string} nuevaVista
 */
export async function accionElimina(url, formulario, mensaje, nuevaVista) {
 if (confirm(mensaje)) {
  await consume(enviaFormRecibeJson(url, formulario))
  location.href = nuevaVista
 }
}

2. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

3. js / lib / descargaVista.js

import { consume } from "./consume.js"
import { muestraObjeto } from "./muestraObjeto.js"
import { recibeJson } from "./recibeJson.js"

/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function descargaVista(url, metodoHttp = "GET") {
 const respuesta = await consume(recibeJson(url, metodoHttp))
 const json = await respuesta.json()
 muestraObjeto(document, json)
 return json
}

4. js / lib / enviaFormRecibeJson.js

/**
 * Envía los datos de un formolario a la url usando la codificación
 * multipart/form-data.
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" },
   body: new FormData(formulario)
  }
 )
}

5. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


6. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

7. js / lib / muestraImagenSeleccionada.js

import { selectorDeNombre } from "./muestraObjeto.js"

/**
 * @param {HTMLInputElement} input
 * @param {HTMLInputElement} img
 */
export function muestraImagenSeleccionada(input, img) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {

   try {

    const dataUrl = getDataUrlDeSeleccion(input)

    if (dataUrl === "") {

     const src = input.dataset.src
     if (src === undefined || src === "") {
      img.hidden = true
      img.src = ""
     } else {
      img.hidden = false
      img.src = src
     }

    } else {

     img.hidden = false
     img.src = dataUrl

    }

    resolve(true)

   } catch (error) {

    img.hidden = true

    reject(error)

   }

  },
   500)
 })
}

/**
 * @param {HTMLInputElement} input
 */
export function getDataUrlDeSeleccion(input) {
 const seleccion = getArchivoSeleccionado(input)
 if (seleccion === null) {
  return ""
 } else {
  return URL.createObjectURL(seleccion)
 }
}


/**
 * @param { HTMLInputElement } input
 */
export function getArchivoSeleccionado(input) {
 if (input.type !== "file") throw new Error('El input debe ser type="file')
 const seleccion = input.files
 if (seleccion === null) throw new Error('El input debe ser type="file')
 if (seleccion.length === 0) {
  return null
 } else {
  return seleccion.item(0)
 }
}

8. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const data_Length = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > data_Length
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(data_Length)] = valor
   }
  }
 }
}

9. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

10. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

11. js / lib / submitAccion.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {Event} event
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} nuevaVista
 */
export async function submitAccion(event, url, formulario, nuevaVista) {
 event.preventDefault()
 await consume(enviaFormRecibeJson(url, formulario))
 location.href = nuevaVista
}

M. Carpeta « errors »

Versión para imprimir.

A. errors / archivocargaincompleta.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Carga incompleta de archivo</title>

</head>

<body>

 <h1>Carga incompleta de archivo</h1>

 <p>Por una razón desconocida, un archivo no se cargó completamente.</p>

</body>

</html>

B. errors / archivodemasiadolargo.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Archivo demasiado largo</title>

</head>

<body>

 <h1>Archivo demasiado largo</h1>

 <p>Un archivo excede el tamaño máximo que el servidor puede recibir.</p>

</body>

</html>

C. errors / archivonoguardado.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El archivo no se guardó</title>

</head>

<body>

 <h1>El archivo no se guardó</h1>

 <p>Por una razón desconocida, un archivo no se pudo guardar en disco.</p>

</body>

</html>

D. errors / archivonorecibido.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Archivo no recibido</title>

</head>

<body>

 <h1>Archivo no recibido</h1>

 <p>Un archivo no fué recibido por el servidor.</p>

</body>

</html>

E. errors / archivovacio.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Archivo no seleccionado o vacío</title>

</head>

<body>

 <h1>Archivo no seleccionado o vacío/h1>

 <p>
  Selecciona un archivo que no esté vacío en el selector de archivos obligatorio
  que está en blanco.</p>

</body>

</html>

F. errors / campoenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo en blanco</title>

</head>

<body>

 <h1>Campo en blanco</h1>

 <p>Pon texto en el campo obligatorio que está en blanco.</p>

</body>

</html>

G. errors / campoenteroenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo entero en blanco</title>

</head>

<body>

 <h1>Campo entero en blanco</h1>

 <p>
  Pon un número entero en el campo que pide un valor entero obligatorio y está
  en blanco.
 </p>

</body>

</html>

H. errors / entidadnoencontrada.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Registro no encontrado</title>

</head>

<body>

 <h1>Registro no encontrado</h1>

 <p>No se encontró ningún registro con el id solicitado.</p>

</body>

</html>

I. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

J. errors / errorrecuperandoarchivo.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

K. errors / extensionprohibida.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Extensión no permitida</title>

</head>

<body>

 <h1>Extensión no permitida</h1>

 <p>La extensión de un archivo no está permitida en el servidor.</p>

</body>

</html>

L. errors / faltacarpetatemporal.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta la carpeta temporal</title>

</head>

<body>

 <h1>Falta la carpeta temporal</h1>

 <p>
  Por una razón desconocida, falta la carpeta temporal para cargar archivos.
 </p>

</body>

</html>

M. errors / faltavalor.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta un valor</title>

</head>

<body>

 <h1>Falta un valor</h1>

 <p>La solicitud no tiene un valor obligatorio.</p>

</body>

</html>

N. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

N. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

O. Resumen

En esta lección se mostró el almacenamiento de un archivo por registro de la base de datos, usando servicios.

24. Compras sencillas

Versión para imprimir.

A. Introducción

En esta lección se muestra la base de una aplicación que vende o compra.
Para poder manejar compras en línea, es necesario que la venta incluya la referencia al cliente.
Puedes probar el ejemplo en http://srvcompras.rf.gd/.

B. Diagrama entidad relación

C. Diagrama relacional

D. Diagrama de despliegue

E. Hazlo funcionar (con videos)

Prueba el ejemplo en http://srvcompras.rf.gd/.
Descarga el archivo /src/srvcompras.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

F. Hazlo funcionar (texto)

Prueba el ejemplo en http://srvcompras.rf.gd/.
Descarga el archivo /src/srvcompras.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

G. Archivos

Haz clic en los triángulos para expandir las carpetas

H. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Productos</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Productos</h1>

 <p><a href="carrito.html">Ver carrito</a></p>

 <dl id="lista">
  <dt>Cargando…</dt>
  <dd><progress max="100">Cargando…</progress></dd>
 </dl>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"

  descargaVista("php/vista-index.php")

 </script>

</body>

</html>

I. agrega.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Agregar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>
</head>

<body>

 <form id="formulario">

  <h1>Agregar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <input type="hidden" name="id">

  <p>
   <label>
    Producto
    <output name="producto">
     <progress max="100">Cargando…</progress>
    </output>
   </label>
  </p>

  <p>
   <label>
    Precio
    <output name="precio">
     <progress max="100">Cargando…</progress>
    </output>
   </label>
  </p>

  <p>
   <label>
    Cantidad *
    <input name="cantidad" type="number" min="0" step="0.01">
   </label>
  </p>

  <p>* Obligatorio</p>

  <p><button type="submit">Agregar</button></p>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { submitAccion } from "./js/lib/submitAccion.js"

  const params = new URL(location.href).searchParams
  descargaDatos()

  async function descargaDatos() {

   if (params.size > 0) {

    await descargaVista("php/vista-agrega.php?" + params)

    formulario.addEventListener(
     "submit",
     event => submitAccion(
      event, "php/det-venta-agrega.php", formulario, "index.html"
     )
    )

   }

  }

 </script>

</body>

</html>

J. carrito.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Carrito</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Carrito</h1>

 <p>

  <a href="index.html">Productos</a>

  <button id="botonProcesar" type='button'>
   Procesar compra
  </button>

 </p>

 <p>
  <label>
   Folio
   <output id="folio">
    <progress max="100">Cargando…</progress>
   </output>
  </label>
 </p>

 <fieldset>

  <legend>Detalle</legend>

  <dl id="detalles">
   <dt>Cargando…</dt>
   <dd><progress max="100">Cargando…</progress></dd>
  </dl>

 </fieldset>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { consume } from "./js/lib/consume.js"
  import { recibeJson } from "./js/lib/recibeJson.js"

  const params = new URL(location.href).searchParams
  descargaDatos()

  async function descargaDatos() {
   await descargaVista("php/vista-carrito.php")
   botonProcesar.addEventListener("click", procesa)
  }

  async function procesa() {
   if (confirm('Confirma procesar')) {
    await consume(recibeJson('php/venta-en-captura-procesa.php'))
    location.href = 'index.html'
   }
  }

 </script>

</body>

</html>

K. modifica.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Modificar</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Modificar</h1>

  <p><a href="carrito.html">Cancelar</a></p>

  <input type="hidden" name="prodId">

  <p>
   <label>
    Producto
    <output name="prodNombre">
     <progress max="100">Cargando…</progress>
    </output>
   </label>
  </p>

  <p>
   <label>
    Precio
    <output name="precio">
     <progress max="100">Cargando…</progress>
    </output>
   </label>
  </p>

  <p>
   <label>
    Cantidad *
    <input name="cantidad" type="number" min="0" step="0.01">
   </label>
  </p>

  <p>* Obligatorio</p>

  <p>

   <button type="submit">Guardar</button>

   <button id="botonEliminar" type="button">
    Eliminar
   </button>

  </p>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { submitAccion } from "./js/lib/submitAccion.js"
  import { accionElimina } from "./js/lib/accionElimina.js"

  const params = new URL(location.href).searchParams
  descargaDatos()

  async function descargaDatos() {

   if (params.size > 0) {

    await descargaVista("php/vista-modifica.php?" + params)

    formulario.addEventListener(
     "submit",
     event => submitAccion(
      event, "php/det-venta-modifica.php", formulario, "carrito.html"
     )
    )

    botonEliminar.addEventListener(
     "click",
     () => accionElimina(
      "php/det-venta-elimina.php",
      formulario,
      "Confirma la eliminación",
      "carrito.html"
     )
    )

   }

  }

 </script>

</body>

</html>

L. Carpeta « php »

Versión para imprimir.

A. php / Bd.php

<?php

require_once __DIR__ . "/ventaEnCapturaAgrega.php";

class Bd
{

 private static ?PDO $pdo = null;

 public static function pdo(): PDO
 {
  if (self::$pdo === null) {
   self::$pdo = new PDO(
    // cadena de conexión
    "sqlite:" . __DIR__ . "/srvcompras.db",
    // usuario
    null,
    // contraseña
    null,
    // Opciones: pdos no persistentes y lanza excepciones.
    [PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
   );

   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS VENTA (
      VENT_ID INTEGER,
      VENT_EN_CAPTURA INTEGER NOT NULL,
      CONSTRAINT VENT_PK
       PRIMARY KEY(VENT_ID)
     )'
   );
   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS PRODUCTO (
      PROD_ID INTEGER,
      PROD_NOMBRE TEXT NOT NULL,
      PROD_EXISTENCIAS REAL NOT NULL,
      PROD_PRECIO REAL NOT NULL,
      CONSTRAINT PROD_PK
       PRIMARY KEY(PROD_ID),
      CONSTRAINT PROD_NOM_UNQ
       UNIQUE(PROD_NOMBRE),
      CONSTRAINT PROD_NOM_NV
       CHECK(LENGTH(PROD_NOMBRE) > 0)
     )'
   );
   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS DET_VENTA (
      VENT_ID INTEGER NOT NULL,
      PROD_ID INTEGER NOT NULL,
      DTV_CANTIDAD REAL NOT NULL,
      DTV_PRECIO REAL NOT NULL,
      CONSTRAINT DTV_PK
       PRIMARY KEY (VENT_ID, PROD_ID),
      CONSTRAINT DTV_VENT_FK
       FOREIGN KEY (VENT_ID) REFERENCES VENTA(VENT_ID),
      CONSTRAINT DTV_PROD_FK
       FOREIGN KEY (PROD_ID) REFERENCES PRODUCTO(PROD_ID)
      )'
   );

   $cantidadDeProductos =
    self::$pdo->query("SELECT COUNT(PROD_ID) FROM PRODUCTO")->fetchColumn(0);

   if ($cantidadDeProductos === 0) {
    self::$pdo->exec(
     "INSERT INTO PRODUCTO
       (PROD_NOMBRE, PROD_EXISTENCIAS, PROD_PRECIO)
      VALUES
       ('Sandwich', 50, 15),
       ('Hot dog', 40, 30),
       ('Hamburguesa', 30, 40)"
    );
   }

   $cantidadDeVentas =
    self::$pdo->query("SELECT COUNT(VENT_ID) FROM VENTA")->fetchColumn(0);

   if ($cantidadDeVentas === 0) {
    ventaEnCapturaAgrega(self::$pdo);
   }
  }

  return self::$pdo;
 }
}


B. php / det-venta-agrega.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/recibeFlotanteObligatorio.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/lib/devuelveCreated.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/productoBusca.php";
require_once __DIR__ . "/ventaEnCapturaBusca.php";


$prodId = recibeEnteroObligatorio("id");
$cantidad = recibeFlotanteObligatorio("cantidad");

$bd = Bd::pdo();

$producto = productoBusca($bd, $prodId);
$producto = validaEntidadObligatoria("Producto",  $producto);

$venta = ventaEnCapturaBusca($bd);
$venta = validaEntidadObligatoria("Venta en captura",  $venta);

$stmt = $bd->prepare(
 "INSERT INTO DET_VENTA (
    VENT_ID, PROD_ID, DTV_CANTIDAD, DTV_PRECIO
   ) values (
    :VENT_ID, :PROD_ID, :DTV_CANTIDAD, :DTV_PRECIO
   )"
);
$stmt->execute([
 ":VENT_ID" => $venta["VENT_ID"],
 ":PROD_ID" => $prodId,
 ":DTV_CANTIDAD" => $cantidad,
 ":DTV_PRECIO" => $producto["PROD_PRECIO"],
]);

$encodeProdId = urlencode($prodId);
devuelveCreated("/php/vista-modifica.php?id=$encodeProdId", [
 "prodId" => ["value" => $prodId],
 "prodNombre" => ["value" => $producto["PROD_NOMBRE"]],
 "precio" => ["value" => "$" . number_format($producto["PROD_PRECIO"], 2)],
 "cantidad" => ["valueAsNumber" => $cantidad],
]);


C. php / det-venta-elimina.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/devuelveNoContent.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/ventaEnCapturaBusca.php";

$prodId = recibeEnteroObligatorio("prodId");

$bd = Bd::pdo();

$venta = ventaEnCapturaBusca($bd);
if ($venta !== false) {
 $stmt = $bd->prepare(
  "DELETE FROM DET_VENTA WHERE VENT_ID = :VENT_ID AND PROD_ID = :PROD_ID"
 );
 $stmt->execute([":VENT_ID" => $venta["VENT_ID"], ":PROD_ID" => $prodId]);
}
devuelveNoContent();


D. php / det-venta-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/recibeFlotanteObligatorio.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/productoBusca.php";
require_once __DIR__ . "/ventaEnCapturaBusca.php";

$prodId = recibeEnteroObligatorio("prodId");
$cantidad = recibeFlotanteObligatorio("cantidad");

$bd = Bd::pdo();

$producto = productoBusca($bd, $prodId);
$producto = validaEntidadObligatoria("Producto",  $producto);

$venta = ventaEnCapturaBusca($bd);
$venta = validaEntidadObligatoria("Venta en captura",  $venta);

$stmt = $bd->prepare(
 "UPDATE DET_VENTA
   SET
    DTV_CANTIDAD = :DTV_CANTIDAD,
    DTV_PRECIO = :DTV_PRECIO
   WHERE
    VENT_ID = :VENT_ID
    AND PROD_ID = :PROD_ID"
);
$stmt->execute([
 ":DTV_CANTIDAD" => $cantidad,
 ":DTV_PRECIO" => $producto["PROD_PRECIO"],
 ":VENT_ID" => $venta["VENT_ID"],
 ":PROD_ID" => $prodId
]);

devuelveJson([
 "prodId" => ["value" => $prodId],
 "prodNombre" => ["value" => $producto["PROD_NOMBRE"]],
 "precio" => ["value" => "$" . number_format($producto["PROD_PRECIO"], 2)],
 "cantidad" => ["valueAsNumber" => $cantidad],
]);


E. php / detVentaConsulta.php

<?php

function detVentaConsulta(\PDO $bd, int $ventaId)
{
 $stmt = $bd->prepare(
  "SELECT
    DV.PROD_ID,
    P.PROD_NOMBRE,
    P.PROD_EXISTENCIAS,
    P.PROD_PRECIO,
    DV.DTV_CANTIDAD,
    DV.DTV_PRECIO
   FROM DET_VENTA DV, PRODUCTO P
   WHERE
    DV.PROD_ID = P.PROD_ID
    AND DV.VENT_ID = :VENT_ID
   ORDER BY P.PROD_NOMBRE"
 );
 $stmt->execute([":VENT_ID" => $ventaId]);
 $lista = $stmt->fetchAll(PDO::FETCH_ASSOC);
 return $lista;
}


F. php / productoBusca.php

<?php

function productoBusca(\PDO $bd, int $prodId)
{
$stmt = $bd->prepare("SELECT * FROM PRODUCTO WHERE PROD_ID = :PROD_ID");
$stmt->execute([":PROD_ID" => $prodId]);
$modelo = $stmt->fetch(PDO::FETCH_ASSOC);
 return $modelo;
}


G. php / srvcompras.db

SQLite format 3@  .�*
O�W
��
{�,�'tableDET_VENTADET_VENTACREATE TABLE DET_VENTA (
      VENT_ID INTEGER NOT NULL,
      PROD_ID INTEGER NOT NULL,
      DTV_CANTIDAD REAL NOT NULL,
      DTV_PRECIO REAL NOT NULL,
      CONSTRAINT DTV_PK
       PRIMARY KEY (VENT_ID, PROD_ID),
      CONSTRAINT DTV_VENT_FK
       FOREIGN KEY (VENT_ID) REFERENCES VENTA(VENT_ID),
      CONSTRAINT DTV_PROD_FK
       FOREIGN KEY (PROD_ID) REFERENCES PRODUCTO(PROD_ID)
      )1Eindexsqlite_autoindex_DET_VENTA_1DET_VENTA�m�-tablePRODUCTOPRODUCTOCREATE TABLE PRODUCTO (
      PROD_ID INTEGER,
      PROD_NOMBRE TEXT NOT NULL,
      PROD_EXISTENCIAS REAL NOT NULL,
      PROD_PRECIO REAL NOT NULL,
      CONSTRAINT PROD_PK
       PRIMARY KEY(PROD_ID),
      CONSTRAINT PROD_NOM_UNQ
       UNIQUE(PROD_NOMBRE),
      CONSTRAINT PROD_NOM_NV
       CHECK(LENGTH(PROD_NOMBRE) > 0)
     )/Cindexsqlite_autoindex_PRODUCTO_1PRODUCTO�&�+tableVENTAVENTACREATE TABLE VENTA (
      VENT_ID INTEGER,
      VENT_EN_CAPTURA INTEGER NOT NULL,
      CONSTRAINT VENT_PK
       PRIMARY KEY(VENT_ID)
     )
���	
����#Hamburguesa(Hot dog$Sandwich0
����#HamburguesaHot dog	Sandwich
���			
���				

H. php / venta-en-captura-procesa.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveCreated.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/ventaEnCapturaBusca.php";
require_once __DIR__ . "/detVentaConsulta.php";
require_once __DIR__ . "/ventaEnCapturaAgrega.php";

$bd = Bd::pdo();
$bd->beginTransaction();

$venta = ventaEnCapturaBusca($bd);
$venta = validaEntidadObligatoria("Venta en captura",  $venta);

$detalles = detVentaConsulta($bd, $venta["VENT_ID"]);

// Actualiza las existencias de los productos vendidos.
$update = $bd->prepare(
 "UPDATE PRODUCTO
   SET PROD_EXISTENCIAS = :PROD_EXISTENCIAS
   WHERE PROD_ID = :PROD_ID"
);
foreach ($detalles as $detVenta) {
 $update->execute([
  ":PROD_ID" => $detVenta["PROD_ID"],
  ":PROD_EXISTENCIAS" =>
  $detVenta["PROD_EXISTENCIAS"] - $detVenta["DTV_CANTIDAD"]
 ]);
}

$update = $bd->prepare(
 "UPDATE VENTA
   SET VENT_EN_CAPTURA = 0
   WHERE VENT_ID = :VENT_ID"
);
$update->execute([":VENT_ID" => $venta["VENT_ID"]]);

ventaEnCapturaAgrega($bd);
$folio = $bd->lastInsertId();

$bd->commit();

devuelveCreated("/srv/venta-en-captura.php", [
 "folio" => ["value" => $folio],
 "detalles" => ["innerHTML" => ""]
]);


I. php / ventaEnCapturaAgrega.php

<?php

function ventaEnCapturaAgrega(\PDO $bd)
{
 $bd->exec("INSERT INTO VENTA (VENT_EN_CAPTURA) VALUES (1)");
}


J. php / ventaEnCapturaBusca.php

<?php

function ventaEnCapturaBusca(\PDO $bd)
{
 $stmt = $bd->query("SELECT * FROM VENTA WHERE VENT_EN_CAPTURA = 1");
 $venta = $stmt->fetch(PDO::FETCH_ASSOC);
 return $venta;
}


K. php / vista-agrega.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/productoBusca.php";

$id = recibeEnteroObligatorio("id");

$producto = productoBusca(Bd::pdo(), $id);
$producto = validaEntidadObligatoria("Producto",  $producto);

devuelveJson([
 "id" => ["value" => $id],
 "producto" => ["value" => $producto["PROD_NOMBRE"]],
 "precio" => ["value" => "$" . number_format($producto["PROD_PRECIO"], 2)],
]);


L. php / vista-carrito.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/ventaEnCapturaBusca.php";
require_once __DIR__ . "/detVentaConsulta.php";
require_once __DIR__ . "/Bd.php";

$bd = Bd::pdo();

$venta = ventaEnCapturaBusca($bd);
$venta = validaEntidadObligatoria("Venta en captura",  $venta);

$detalles = detVentaConsulta($bd, $venta["VENT_ID"]);

$renderDetalles = "";
foreach ($detalles as $detVenta) {
 $encodeProdId = urlencode($detVenta["PROD_ID"]);
 $prodId = htmlentities($encodeProdId);
 $prodNombre = htmlentities($detVenta["PROD_NOMBRE"]);
 $precio = htmlentities("$" . number_format($detVenta["PROD_PRECIO"], 2));
 $cantidad = htmlentities(number_format($detVenta["DTV_CANTIDAD"], 2));
 $renderDetalles .=
  "<dt>$prodNombre</dt>
    <dd>
     <a href= 'modifica.html?prodId=$prodId'>Modificar o eliminar</a>
    </dd>
    <dd>
     <dl>
      <dt>Cantidad</dt>
      <dd>$cantidad</dd>
      <dt>Precio</dt>
      <dd>$precio</dd>
     </dl>
    </dd>";
}

devuelveJson([
 "folio" => ["value" => $venta["VENT_ID"]],
 "detalles" => ["innerHTML" => $renderDetalles]
]);


M. php / vista-index.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";

$bd = Bd::pdo();
$stmt = $bd->query("SELECT * FROM PRODUCTO ORDER BY PROD_NOMBRE");
$lista = $stmt->fetchAll(PDO::FETCH_ASSOC);

$render = "";
foreach ($lista as $modelo) {
 $encodeId = urlencode($modelo["PROD_ID"]);
 $id = htmlentities($encodeId);
 $nombre = htmlentities($modelo["PROD_NOMBRE"]);
 $precio = htmlentities("$" . number_format($modelo["PROD_PRECIO"], 2));
 $existencias = htmlentities(number_format($modelo["PROD_EXISTENCIAS"], 2));
 $render .=
  "<dt>$nombre</dt>
    <dd>
     <a href='agrega.html?id=$id'>Agregar al carrito</a>
    </dd>
    <dd>
     <dl>
      <dt>Precio</dt>
      <dd>$precio</dd>
      <dt>Existencias</dt>
      <dd>$existencias</dd>
     </dl>
    </dd>";
}
devuelveJson(["lista" => ["innerHTML" => $render]]);


N. php / vista-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
require_once __DIR__ . "/lib/validaEntidadObligatoria.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/productoBusca.php";
require_once __DIR__ . "/ventaEnCapturaBusca.php";

$prodId = recibeEnteroObligatorio("prodId");

$bd = Bd::pdo();

$venta = ventaEnCapturaBusca($bd);
$venta = validaEntidadObligatoria("Venta en captura",  $venta);

$producto = productoBusca($bd, $prodId);
$producto = validaEntidadObligatoria("Producto",  $producto);

$stmt = $bd->prepare(
 "SELECT * FROM DET_VENTA WHERE VENT_ID = :VENT_ID AND PROD_ID = :PROD_ID"
);
$stmt->execute([":VENT_ID" => $venta["VENT_ID"], ":PROD_ID" => $prodId]);
$detVenta = $stmt->fetch(PDO::FETCH_ASSOC);
$detVenta = validaEntidadObligatoria("Detalle de venta",  $detVenta);

devuelveJson([
 "prodId" => ["value" => $prodId],
 "prodNombre" => ["value" => $producto["PROD_NOMBRE"]],
 "precio" => ["value" => "$" . number_format($detVenta["DTV_PRECIO"], 2)],
 "cantidad" => ["valueAsNumber" => $detVenta["DTV_CANTIDAD"]],
]);


O. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveCreated.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveCreated($urlDelNuevo, $resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(201);
  header("Location: $urlDelNuevo");
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
}


3. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


4. php / lib / devuelveNoContent.php

<?php

function devuelveNoContent()
{
 http_response_code(204);
}


5. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


6. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

7. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


8. php / lib / NOT_FOUND.php


1	<?php
2
3	const NOT_FOUND = 404;
4

9. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


10. php / lib / recibeArray.php

<?php

/**
 * Devuelve los valores asociados a un
 * parámetro multivaluado; por ejemplo, un
 * grupo de checkbox, recibido en el servidor
 * por medio de GET, POST o cookie.
 * 
 * Si no se recibe el parámetro, devuelve [].
 * 
 * Si el valor recibido no es un arreglo, lo
 * coloca dentro de uno.
 */
function recibeArray(string $parametro)
{
 if (isset($_REQUEST[$parametro])) {
  $valor = $_REQUEST[$parametro];
  return is_array($valor)
   ? $valor
   : [$valor];
 } else {
  return [];
 }
}


11. php / lib / recibeEntero.php

<?php

require_once __DIR__ . "/recibeTexto.php";

/**
 * Devuelve el valor entero de un parámetro recibido en el
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false
 *
 * Si se recibe una cadena vacía, se devuelve null.
 * 
 * Si parámetro no se puede convertir a entero, se genera
 * un error.
 */
function recibeEntero(string $parametro): false|null|int
{
 $valor = recibeTexto($parametro);
 if ($valor === false) {
  return false;
 } else {
  $valor = trim($valor);
  if ($valor === "") {
   return null;
  } else {
   return (int) $valor;
  }
 }
}


12. php / lib / recibeEnteroObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeEntero.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeEnteroObligatorio(string $parametro)
{
 $entero = recibeEntero($parametro);

 if ($entero === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 if ($entero === null)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenteroenblanco.html",
   "detail" => "Pon un número entero en el campo $parametro."
  ]);

 return $entero;
}


13. php / lib / recibeFlotante.php

<?php

require_once __DIR__ . "/recibeTexto.php";

/**
 * Devuelve el valor decimal de un parámetro (que
 * puede tener fracciones) enviado al servidor por
 * medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuekve false
 * 
 * Si se recibe una cadena vacía, se devuelve null.
 * 
 * Si parámetro no se puede convertir a decimal, se genera
 * un error.
 */
function recibeFlotante(string $parametro): false|null|float
{
 $valor = recibeTexto($parametro);
 if ($valor === false) {
  return false;
 } else {
  $valor = trim($valor);
  if ($valor === "") {
   return null;
  } else {
   return (float) $valor;
  }
 }
}


14. php / lib / recibeFlotanteObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeFlotante.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeFlotanteObligatorio(string $parametro)
{
 $flotante = recibeFlotante($parametro);

 if ($flotante === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/error/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 if ($flotante === null)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/error/camponumericoenblanco.html",
   "detail" => "Pon un número en el campo $parametro."
  ]);

 return $flotante;
}


15. php / lib / recibeTexto.php

<?php

/**
 * Devuelve el texto de un parámetro enviado al
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false.
 */
function recibeTexto(string $parametro): false|string
{
 /* Si el parámetro está asignado en $_REQUEST,
  * devuelve su valor; de lo contrario, devuelve false.
  */
 $valor = isset($_REQUEST[$parametro])
  ? $_REQUEST[$parametro]
  : false;
 return $valor;
}


16. php / lib / recibeTextoObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeTexto.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeTextoObligatorio(string $parametro)
{
 $texto = recibeTexto($parametro);

 if ($texto === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 $trimTexto = trim($texto);

 if ($trimTexto === "")
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenblanco.html",
   "detail" => "Pon texto en el campo $parametro."
  ]);

 return $trimTexto;
}


17. php / lib / validaEntidadObligatoria.php

<?php

require_once __DIR__ . "/NOT_FOUND.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function validaEntidadObligatoria(string $nombre,  $entidad)
{

 if ($entidad === false)
  throw new ProblemDetailsException([
  "status" => NOT_FOUND,
  "title" => "Registro de $nombre no encontrado.",
  "type" => "/errors/entidadnoencontrada.html",
  "detail" => "No se encontró ningún registro de $nombre con el id solicitado.",
  ]);

 return $entidad;
}


M. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / accionElimina.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} mensaje
 * @param {string} nuevaVista
 */
export async function accionElimina(url, formulario, mensaje, nuevaVista) {
 if (confirm(mensaje)) {
  await consume(enviaFormRecibeJson(url, formulario))
  location.href = nuevaVista
 }
}

2. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

3. js / lib / descargaVista.js

import { consume } from "./consume.js"
import { muestraObjeto } from "./muestraObjeto.js"
import { recibeJson } from "./recibeJson.js"

/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function descargaVista(url, metodoHttp = "GET") {
 const respuesta = await consume(recibeJson(url, metodoHttp))
 const json = await respuesta.json()
 muestraObjeto(document, json)
 return json
}

4. js / lib / enviaFormRecibeJson.js

/**
 * Envía los datos de un formolario a la url usando la codificación
 * multipart/form-data.
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" },
   body: new FormData(formulario)
  }
 )
}

5. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


6. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

7. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const dataLength = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > dataLength
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(dataLength)] = valor
   }
  }
 }
}

8. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

9. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

10. js / lib / submitAccion.js

import { consume } from "./consume.js"
import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"

/**
 * @param {Event} event
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param {string} nuevaVista
 */
export async function submitAccion(event, url, formulario, nuevaVista) {
 event.preventDefault()
 await consume(enviaFormRecibeJson(url, formulario))
 location.href = nuevaVista
}

N. Carpeta « errors »

Versión para imprimir.

A. errors / campoenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo en blanco</title>

</head>

<body>

 <h1>Campo en blanco</h1>

 <p>Pon texto en el campo obligatorio que está en blanco.</p>

</body>

</html>

B. errors / campoenteroenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo entero en blanco</title>

</head>

<body>

 <h1>Campo entero en blanco</h1>

 <p>
  Pon un número entero en el campo que pide un valor entero obligatorio y está
  en blanco.
 </p>

</body>

</html>

C. errors / camponumericoenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo numérico en blanco</title>

</head>

<body>

 <h1>Campo numérico en blanco</h1>

 <p>
  Pon un número en el campo que pide un valor numérico obligatorio y está
  en blanco.
 </p>

</body>

</html>

D. errors / entidadnoencontrada.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Registro no encontrado</title>

</head>

<body>

 <h1>Registro no encontrado</h1>

 <p>No se encontró ningún registro con el id solicitado.</p>

</body>

</html>

E. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

F. errors / faltavalor.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta un valor</title>

</head>

<body>

 <h1>Falta un valor</h1>

 <p>La solicitud no tiene un valor obligatorio.</p>

</body>

</html>

G. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

O. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

P. Resumen

En esta lección se mostró la base de una aplicación que vende o compra.

25. Características de un e-commerce

Versión para imprimir.

A. Introducción

En esta lección se presentan las características principales de un e-commerce.

Fuente: https://www.actualidadecommerce.com/las-5-principales-caracteristicas-de-un-sitio-ecommerce-bien-disenado/

B. Facilidad de navegación

Cuando se trata de vender productos, el primer requisito a cumplir para una tienda e-commerce es que el comprador tiene que ser capaz de encontrar rápida y de forma especifica, lo que el o ella están buscando. Una navegación eficaz es fundamental para los sitios e-commerce ya que los visitantes que no pueden encontrar lo que buscan se traducen en ventas perdidas.

C. El diseño no destaca por encima de los productos

En un negocio e-commerce, el foco de atención siempre debe estar en los productos que están disponibles para su compra. Un diseño que es extravagante sin sentido, generalmente hace más daño que beneficio, puesto que al final, el diseño no es lo que se vende, sino los productos.

D. Fácil proceso de compra

La experiencia del usuario en sitios de comercio electrónico es fundamental para el éxito. Es decir, si el proceso de compra implica demasiados pasos o incluso es confuso, los compradores simplemente terminarán abandonando su carrito de compras. Por ello, el checkout siempre debe implicar la mínima cantidad de pasos y debe ser lo más fácil e intuitivo para los compradores.

E. Exhibir los productos más populares

Muchos negocios e-commerce se esfuerzan por mostrar los elementos que pueden ser de interés para los potenciales compradores. Un gran número de sitios de comercio electrónico están utilizando espacios muy amplios en la página de inicio para promover las ventas actuales, el lanzamiento de un nuevo producto o lo que sea que genere interés.

F. Fotos de productos a detalle

La venta de productos en Internet es diferente de vender en una tienda física porque el comprador no puede tocar o ver en persona el producto antes de tomar la decisión de compra. Al ofrecer fotos de los productos que resaltan a detalle las características principales del mismo, se consigue superar ese inconveniente y se hace más fácil para el comprador decidir si conviene o no comprar el producto.

G. Resumen

En esta lección se presentaron las características principales de un e-commerce:
- Facilidad de navegación.
- El diseño no destaca por encima de los productos.
- El diseño no destaca por encima de los productos.
- Fácil proceso de compra.
- Exhibir los productos más populares.
- Fotos de productos a detalle.

26. Servicio con token

Versión para imprimir.

A. Introducción

Este ejemplo muestra como proteger servicios y formas con el uso de tokens.
Puedes probar el ejemplo en https://srvtoken.rf.gd/.

B. Diagrama de despliegue

C. Hazlo funcionar (con videos)

Prueba el ejemplo en https://srvtoken.rf.gd/.
Descarga el archivo /src/srvtoken.zip y descompáctalo.
Crea una cuenta de email pqra ti, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu sitio; por ejemplo devuelvejson
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. https://infinityfree.com/ Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

D. Hazlo funcionar (texto)

Prueba el ejemplo en https://srvtoken.rf.gd/.
Descarga el archivo /src/srvtoken.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email para tí, por ejemplo, pepito@google.com. Si ya tienes un email, omite este paso.
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito. Si ya tienes una cuenta, omite este paso.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo Mayúsculas+Control+P y selecciona SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de tu servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

E. Archivos

Haz clic en los triángulos para expandir las carpetas

F. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Uso de tokens</title>

</head>

<body>

 <h1>Uso de tokens</h1>

 <p>
  <a href="formulario.html">Servicio que procesa un formulario con token.</a>
 </p>

 </form>

</body>

</html>

G. formulario.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Servicio que procesa un formulario con token</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Servicio que procesa un formulario con token</h1>

  <p><a href="index.html">Cancela</a></p>

  <!-- Al enviar la forma, se envía el token recibido. -->
  <input type="hidden" name="token">

  <p>
   <label>
    Saludo:
    <input name="saludo">
   </label>
  </p>

  <p>
   <label>
    Nombre:
    <input name="nombre">
   </label>
  </p>

  <p>
   <button type="reset">Restaurar</button>
   <button type="submit">Procesa</button>
  </p>

 </form>

 <script type="module">

  import { descargaVista } from "./js/lib/descargaVista.js"
  import { consume } from "./js/lib/consume.js"
  import { enviaFormRecibeJson } from "./js/lib/enviaFormRecibeJson.js"

  descargaDatos()

  async function descargaDatos() {

   // Al cargar, registra este formulario en la sesión y recibe un token.
   await descargaVista("php/vista-formulario.php")

   formulario.addEventListener("submit", procesa)

   async function procesa(event) {
    event.preventDefault()
    const resultado =
     await consume(enviaFormRecibeJson("php/procesa.php", formulario))
    const mensaje = await resultado.json()
    alert(mensaje)
    location.href = "index.html"
   }

  }

 </script>

</body>

</html>

H. Carpeta « php »

Versión para imprimir.

A. php / procesa.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeTextoObligatorio.php";
require_once __DIR__ . "/lib/validaToken.php";
require_once __DIR__ . "/lib/devuelveJson.php";

session_start();

$token = $_POST["token"];
validaToken("formulario", $token);

// Si el token se halló, precesa normalmente la forma.

$saludo = recibeTextoObligatorio("saludo");
$nombre = recibeTextoObligatorio("nombre");

$resultado = "{$saludo} {$nombre}.";

devuelveJson($resultado);


B. php / vista-formulario.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/creaToken.php";
require_once __DIR__ . "/lib/devuelveJson.php";

session_start();
// Crea un token para la página "formulario" que expira en 5 minutos.
devuelveJson(["token" => ["value" => creaToken("formulario", 5)]]);


C. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / creaToken.php

<?php

require_once __DIR__ . "/FORBIDDEN.php";
require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function creaToken(string $pagina, int $duracionEnMinutos)
{
 $criptografiaFuerte = true;

 // Crea el token
 $token = [
  "expiracion" => time() + 60 * $duracionEnMinutos,
  // El token es de 80 caracteres, criptográficamente fuerte.
  "texto" => bin2hex(openssl_random_pseudo_bytes(80, $criptografiaFuerte))
 ];

 // Verifica que ya haya tokens $pagina.
 if (isset($_SESSION[$pagina])) {

  $tokensParaPagina = $_SESSION[$pagina];

  if (!is_array($tokensParaPagina))
   throw new ProblemDetailsException([
    "status" => INTERNAL_SERVER_ERROR,
    " title" => "No hay arreglo de tokens.",
    "type" => "/error/sintokens.html",
   ]);

  // Como ya existe el arreglo, elimina los tokens expirados para esta pagina.
  $time = time();
  foreach ($tokensParaPagina as $llave => $tokenParaPagina) {
   if ($tokenParaPagina["expiracion"] > $time) {
    unset($tokensParaPagina[$llave]);
   }
  }

  // Se puede usar uno o varios tokens por pagina.
  $tokensParaPagina[] = $token;
  $_SESSION[$pagina] = $tokensParaPagina;
 } else {

  // Se puede usar uno o varios tokens por pagina 
  $_SESSION[$pagina] = [$token];
 }

 return $token["texto"];
}


3. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


4. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


5. php / lib / FORBIDDEN.php


1	<?php
2
3	const FORBIDDEN = 403;
4

6. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

7. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


8. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


9. php / lib / recibeTexto.php

<?php

/**
 * Devuelve el texto de un parámetro enviado al
 * servidor por medio de GET, POST o cookie.
 * 
 * Si el parámetro no se recibe, devuelve false.
 */
function recibeTexto(string $parametro): false|string
{
 /* Si el parámetro está asignado en $_REQUEST,
  * devuelve su valor; de lo contrario, devuelve false.
  */
 $valor = isset($_REQUEST[$parametro])
  ? $_REQUEST[$parametro]
  : false;
 return $valor;
}


10. php / lib / recibeTextoObligatorio.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";
require_once __DIR__ . "/recibeTexto.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function recibeTextoObligatorio(string $parametro)
{
 $texto = recibeTexto($parametro);

 if ($texto === false)
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Falta el valor $parametro.",
   "type" => "/errors/faltavalor.html",
   "detail" => "La solicitud no tiene el valor de $parametro."
  ]);

 $trimTexto = trim($texto);

 if ($trimTexto === "")
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "Campo $parametro en blanco.",
   "type" => "/errors/campoenblanco.html",
   "detail" => "Pon texto en el campo $parametro."
  ]);

 return $trimTexto;
}


11. php / lib / validaToken.php

<?php

require_once __DIR__ . "/FORBIDDEN.php";
require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

function validaToken(string $pagina, string $token)
{
 if (!isset($_SESSION[$pagina]))
  throw new ProblemDetailsException([
   "status" => FORBIDDEN,
   "title" => "Página no registrada.",
   "type" => "/error/paginanoregistrada.html",
  ]);

 $tokensParaPagina = $_SESSION[$pagina];

 if (!is_array($tokensParaPagina))
  throw new ProblemDetailsException([
   "status" => INTERNAL_SERVER_ERROR,
   " title" => "No hay arreglo de tokens.",
   "type" => "/error/sintokens.html",
  ]);

 $hallado = false;

 // Valida que el token se haya registrado.
  $time = time();
 foreach ($tokensParaPagina as $llave => $tokenParaPagina) {

  if (strcmp($token, $tokenParaPagina["texto"]) === 0) {

   if ($tokenParaPagina["expiracion"] < $time) {
    unset($tokensParaPagina[$llave]);
    $_SESSION[$pagina] = $tokensParaPagina;
    throw new ProblemDetailsException([
     "status" => FORBIDDEN,
     "title" => "Tiempo de expiración excedido.",
     "type" => "/error/paginaexpirada.html",
    ]);
   }

   $hallado = true;
  } elseif ($tokenParaPagina["expiracion"] > $time) {

   // Elimina tokens expirados
   unset($tokensParaPagina[$llave]);
  }
 }

 $_SESSION[$pagina] = $tokensParaPagina;

 if ($hallado === false)
  throw new ProblemDetailsException([
   "status" => FORBIDDEN,
   "title" => "Página no registrada.",
   "type" => "/error/paginanoregistrada.html",
  ]);
}


I. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (
   contentType !== null && contentType.startsWith("application/problem+json")
  )
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

2. js / lib / descargaVista.js

import { consume } from "./consume.js"
import { muestraObjeto } from "./muestraObjeto.js"
import { recibeJson } from "./recibeJson.js"

/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function descargaVista(url, metodoHttp = "GET") {
 const respuesta = await consume(recibeJson(url, metodoHttp))
 const json = await respuesta.json()
 muestraObjeto(document, json)
 return json
}

3. js / lib / enviaFormRecibeJson.js

/**
 * Envía los datos de un formolario a la url usando la codificación
 * multipart/form-data.
 * @param {string} url
 * @param {HTMLFormElement} formulario
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export function enviaFormRecibeJson(url, formulario, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" },
   body: new FormData(formulario)
  }
 )
}

4. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


5. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

6. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const dataLength = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > dataLength
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(dataLength)] = valor
   }
  }
 }
}

7. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

8. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

J. Carpeta « errors »

Versión para imprimir.

A. errors / campoenblanco.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Campo en blanco</title>

</head>

<body>

 <h1>Campo en blanco</h1>

 <p>Pon texto en el campo obligatorio que está en blanco.</p>

</body>

</html>

B. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

C. errors / faltavalor.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Falta un valor</title>

</head>

<body>

 <h1>Falta un valor</h1>

 <p>La solicitud no tiene un valor obligatorio.</p>

</body>

</html>

D. errors / paginaexpirada.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Tiempo de expiración excedido</title>

</head>

<body>

 <h1>Tiempo de expiración excedido</h1>

</body>

</html>

E. errors / paginanoregistrada.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Página no registrada</title>

</head>

<body>

 <h1>Página no registrada</h1>

</body>

</html>

F. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

G. errors / sintokens.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>No hay arreglo de tokens</title>

</head>

<body>

 <h1>No hay arreglo de tokens</h1>

</body>

</html>

K. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

L. Resumen

En esta lección se mostró como proteger servicios y formas con el uso de tokens.

1	<?php
2
3	require_once __DIR__ . "/lib/devuelveJson.php";
4
5	devuelveJson([
6	"nombre" => "pp",
7	"mensaje" => "Hola.",
8	]);
9

1	<?php
2
3	require_once __DIR__ . "/devuelveResultadoNoJson.php";
4
5	function devuelveJson($resultado)
6	{
7	$json = json_encode($resultado);
8	if ($json === false) {
9	devuelveResultadoNoJson();
10	} else {
11	header("Content-Type: application/json; charset=utf-8");
12	echo $json;
13	}
14	exit();
15	}
16

1	<?php
2
3	require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
4
5	function devuelveResultadoNoJson()
6	{
7	http_response_code(INTERNAL_SERVER_ERROR);
8	header("Content-Type: application/problem+json; charset=utf-8");
9
10	echo '{' .
11	"status: " . INTERNAL_SERVER_ERROR .
12	'"title": "El resultado no puede representarse como JSON."' .
13	'"type": "/errors/resultadonojson.html"' .
14	'}';
15	}
16

1	<?php
2
3	require_once __DIR__ . "/lib/recibeJson.php";
4	require_once __DIR__ . "/lib/devuelveJson.php";
5
6	$json = recibeJson();
7	$saludo = $json->saludo;
8	$nombre = $json->nombre;
9	$resultado = "{$saludo} {$nombre}.";
10	devuelveJson($resultado);
11

1	<?php
2
3	require_once __DIR__ . "/BAD_REQUEST.php";
4
5	function recibeJson()
6	{
7	$json = json_decode(file_get_contents("php://input"));
8
9	if ($json === null) {
10
11	http_response_code(BAD_REQUEST);
12	header("Content-Type: application/problem+json; charset=utf-8");
13
14	echo '{' .
15	"status: " . BAD_REQUEST .
16	'"title": "Los datos recibidos no están en formato JSON."' .
17	'"type": "/errors/datosnojson.html"' .
18	'}';
19
20	exit();
21	}
22
23	return $json;
24	}
25

1
2	/**
3	* @param { string } url
4	* @param { Object } body
5	* @param { "GET" \| "POST"\| "PUT" \| "PATCH" \| "DELETE" \| "TRACE" \| "OPTIONS"
6	* \| "CONNECT" \| "HEAD" } metodoHttp
7	*/
8	export async function enviaJsonRecibeJson(url, body, metodoHttp = "POST") {
9	return fetch(
10	url,
11	{
12	method: metodoHttp,
13	headers: {
14	"Content-Type": "application/json",
15	"Accept": "application/json, application/problem+json"
16	},
17	body: JSON.stringify(body)
18	}
19	)
20	}

1	<?php
2
3	require_once __DIR__ . "/lib/recibeTexto.php";
4	require_once __DIR__ . "/lib/devuelveJson.php";
5
6	$saludo = recibeTexto("saludo");
7	$nombre = recibeTexto("nombre");
8	$resultado = "{$saludo} {$nombre}.";
9	devuelveJson($resultado);
10

1	<?php
2
3	/**
4	* Devuelve el texto de un parámetro enviado al
5	* servidor por medio de GET, POST o cookie.
6	*
7	* Si el parámetro no se recibe, devuelve false.
8	*/
9	function recibeTexto(string $parametro): false\|string
10	{
11	/* Si el parámetro está asignado en $_REQUEST,
12	* devuelve su valor; de lo contrario, devuelve false.
13	*/
14	$valor = isset($_REQUEST[$parametro])
15	? $_REQUEST[$parametro]
16	: false;
17	return $valor;
18	}
19

1	<?php
2
3	require_once __DIR__ . "/lib/manejaErrores.php";
4	require_once __DIR__ . "/lib/BAD_REQUEST.php";
5	require_once __DIR__ . "/lib/recibeTexto.php";
6	require_once __DIR__ . "/lib/ProblemDetailsException.php";
7	require_once __DIR__ . "/lib/devuelveJson.php";
8
9	$saludo = recibeTexto("saludo");
10	$nombre = recibeTexto("nombre");
11
12	if (
13	$saludo === false
14	\|\| $saludo === ""
15	)
16	throw new ProblemDetailsException([
17	"status" => BAD_REQUEST,
18	"title" => "Falta el saludo.",
19	"type" => "/erros/faltasaludo.html"
20	]);
21
22	if (
23	$nombre === false
24	\|\| $nombre === ""
25	)
26	throw new ProblemDetailsException([
27	"status" => BAD_REQUEST,
28	"title" => "Falta el nombre.",
29	"type" => "/errors/faltanombre.html"
30	]);
31
32	$resultado = "{$saludo} {$nombre}.";
33
34	devuelveJson($resultado);
35

1	<?php
2
3	require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
4	require_once __DIR__ . "/ProblemDetailsException.php";
5
6	// Hace que se lance una excepción automáticamente cuando se genere un error.
7	set_error_handler(function ($severity, $message, $file, $line) {
8	throw new ErrorException($message, 0, $severity, $file, $line);
9	});
10
11	// Código cuando una excepción no es atrapada.
12	set_exception_handler(function (Throwable $excepcion) {
13	if ($excepcion instanceof ProblemDetailsException) {
14	devuelveProblemDetails($excepcion->problemDetails);
15	} else {
16	devuelveProblemDetails([
17	"status" => INTERNAL_SERVER_ERROR,
18	"title" => "Error interno del servidor",
19	"detail" => $excepcion->getMessage(),
20	"type" => "/errors/errorinterno.html",
21	]);
22	}
23	exit();
24	});
25
26	function devuelveProblemDetails(array $array)
27	{
28	$json = json_encode($array);
29	if ($json === false) {
30	devuelveResultadoNoJson();
31	} else {
32	http_response_code(isset($array["status"]) ? $array["status"] : 500);
33	header("Content-Type: application/problem+json; charset=utf-8");
34	echo $json;
35	}
36	}
37

1	import { muestraError } from "./muestraError.js"
2
3	/**
4	* Intercepta Response.prototype.json para capturar errores de parseo
5	* y asegurar que se reporten correctamente en navegadores Chromium.
6	*/
7	{
8	const originalJson = Response.prototype.json
9
10	Response.prototype.json = function () {
11	// Llamamos al método original usando el contexto (this) de la respuesta
12	return originalJson.apply(this, arguments)
13	.catch((/** @type {any} */ error) => {
14	// Corrige un error de Chrome que evita el manejo correcto de errores.
15	throw new Error(error)
16	})
17	}
18	}
19
20	window.onerror = function (
21	/** @type {string} */ _message,
22	/** @type {string} */ _url,
23	/** @type {number} */ _line,
24	/** @type {number} */ _column,
25	/** @type {Error} */ errorObject
26	) {
27	muestraError(errorObject)
28	return true
29	}
30
31	window.addEventListener('unhandledrejection', event => {
32	muestraError(event.reason)
33	event.preventDefault()
34	})
35

1	/**
2	* @param {Document \| HTMLElement \| ShadowRoot} raizHtml
3	* @param { any } objeto
4	*/
5	export function muestraObjeto(raizHtml, objeto) {
6	for (const [nombre, definiciones] of Object.entries(objeto)) {
7	if (Array.isArray(definiciones)) {
8	muestraArray(raizHtml, nombre, definiciones)
9	} else if (definiciones !== undefined && definiciones !== null) {
10	muestraElemento(raizHtml, nombre, definiciones)
11	}
12	}
13	}
14
15	/**
16	* @param { string } nombre
17	*/
18	export function selectorDeNombre(nombre) {
19	return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
20	}
21
22	/**
23	* @param { Document \| HTMLElement \| ShadowRoot } raizHtml
24	* @param { string } propiedad
25	* @param {any[]} valores
26	*/
27	function muestraArray(raizHtml, propiedad, valores) {
28	const conjunto = new Set(valores)
29	const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
30	if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
31	muestraOptions(elementos[0], conjunto)
32	} else {
33	muestraInputs(elementos, conjunto)
34	}
35
36	}
37
38	/**
39	* @param {HTMLSelectElement} select
40	* @param {Set<any>} conjunto
41	*/
42	function muestraOptions(select, conjunto) {
43	for (let i = 0, options = select.options, len = options.length; i < len; i++) {
44	const option = options[i]
45	option.selected = conjunto.has(option.value)
46	}
47	}
48
49	/**
50	* @param {NodeListOf<Element>} elementos
51	* @param {Set<any>} conjunto
52	*/
53	function muestraInputs(elementos, conjunto) {
54	for (let i = 0, len = elementos.length; i < len; i++) {
55	const elemento = elementos[i]
56	if (elemento instanceof HTMLInputElement) {
57	elemento.checked = conjunto.has(elemento.value)
58	}
59	}
60	}
61
62	const data_ = "data-"
63	const data_Length = data_.length
64
65	/**
66	* @param {Document \| HTMLElement \| ShadowRoot} raizHtml
67	* @param {string} nombre
68	* @param {{ [s: string]: any; } } definiciones
69	*/
70	function muestraElemento(raizHtml, nombre, definiciones) {
71	const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
72	if (elemento !== null) {
73	for (const [propiedad, valor] of Object.entries(definiciones)) {
74	if (propiedad in elemento) {
75	elemento[propiedad] = valor
76	} else if (
77	propiedad.length > data_Length
78	&& propiedad.startsWith(data_)
79	&& elemento instanceof HTMLElement
80	) {
81	elemento.dataset[propiedad.substring(data_Length)] = valor
82	}
83	}
84	}
85	}

1	/**
2	* Codifica un texto para que cambie los caracteres
3	* especiales y no se pueda interpretar como
4	* etiiqueta HTML. Esta técnica evita la inyección
5	* de código.
6	* @param { string } texto
7	*/
8	export function htmlentities(texto) {
9	return texto.replace(/[<>"']/g, textoDetectado => {
10	switch (textoDetectado) {
11	case "<": return "<"
12	case ">": return ">"
13	case '"': return """
14	case "'": return "'"
15	default: return textoDetectado
16	}
17	})
18	}
19

1	<?php
2
3	class Bd
4	{
5	private static ?PDO $pdo = null;
6
7	static function pdo(): PDO
8	{
9	if (self::$pdo === null) {
10
11	self::$pdo = new PDO(
12	// cadena de conexión
13	"sqlite:" . __DIR__ . "/srvbd.db",
14	// usuario
15	null,
16	// contraseña
17	null,
18	// Opciones: pdos no persistentes y lanza excepciones.
19	[PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
20	);
21
22	self::$pdo->exec(
23	"CREATE TABLE IF NOT EXISTS PASATIEMPO (
24	PAS_ID INTEGER,
25	PAS_NOMBRE TEXT NOT NULL,
26	CONSTRAINT PAS_PK
27	PRIMARY KEY(PAS_ID),
28	CONSTRAINT PAS_NOM_UNQ
29	UNIQUE(PAS_NOMBRE),
30	CONSTRAINT PAS_NOM_NV
31	CHECK(LENGTH(PAS_NOMBRE) > 0)
32	)"
33	);
34	}
35
36	return self::$pdo;
37	}
38	}
39

1	<?php
2
3	require_once __DIR__ . "/lib/manejaErrores.php";
4	require_once __DIR__ . "/lib/recibeEnteroObligatorio.php";
5	require_once __DIR__ . "/lib/devuelveNoContent.php";
6	require_once __DIR__ . "/Bd.php";
7
8	$id = recibeEnteroObligatorio("id");
9
10	$bd = Bd::pdo();
11	$stmt = $bd->prepare("DELETE FROM PASATIEMPO WHERE PAS_ID = :PAS_ID");
12	$stmt->execute([":PAS_ID" => $id]);
13
14	devuelveNoContent();
15

1	<?php
2
3	require_once __DIR__ . "/devuelveResultadoNoJson.php";
4
5	function devuelveCreated($urlDelNuevo, $resultado)
6	{
7	$json = json_encode($resultado);
8	if ($json === false) {
9	devuelveResultadoNoJson();
10	} else {
11	http_response_code(201);
12	header("Location: $urlDelNuevo");
13	header("Content-Type: application/json; charset=utf-8");
14	echo $json;
15	}
16	}
17

1	<?php
2
3	function devuelveNoContent()
4	{
5	http_response_code(204);
6	}
7

1	<?php
2
3	require_once __DIR__ . "/recibeTexto.php";
4
5	/**
6	* Devuelve el valor entero de un parámetro recibido en el
7	* servidor por medio de GET, POST o cookie.
8	*
9	* Si el parámetro no se recibe, devuelve false
10	*
11	* Si se recibe una cadena vacía, se devuelve null.
12	*
13	* Si parámetro no se puede convertir a entero, se genera
14	* un error.
15	*/
16	function recibeEntero(string $parametro): false\|null\|int
17	{
18	$valor = recibeTexto($parametro);
19	if ($valor === false) {
20	return false;
21	} else {
22	$valor = trim($valor);
23	if ($valor === "") {
24	return null;
25	} else {
26	return (int) $valor;
27	}
28	}
29	}
30

1	<?php
2
3	require_once __DIR__ . "/BAD_REQUEST.php";
4	require_once __DIR__ . "/recibeEntero.php";
5	require_once __DIR__ . "/ProblemDetailsException.php";
6
7	function recibeEnteroObligatorio(string $parametro)
8	{
9	$entero = recibeEntero($parametro);
10
11	if ($entero === false)
12	throw new ProblemDetailsException([
13	"status" => BAD_REQUEST,
14	"title" => "Falta el valor $parametro.",
15	"type" => "/errors/faltavalor.html",
16	"detail" => "La solicitud no tiene el valor de $parametro."
17	]);
18
19	if ($entero === null)
20	throw new ProblemDetailsException([
21	"status" => BAD_REQUEST,
22	"title" => "Campo $parametro en blanco.",
23	"type" => "/errors/campoenteroenblanco.html",
24	"detail" => "Pon un número entero en el campo $parametro."
25	]);
26
27	return $entero;
28	}
29

1	<?php
2
3	require_once __DIR__ . "/NOT_FOUND.php";
4	require_once __DIR__ . "/ProblemDetailsException.php";
5
6	function validaEntidadObligatoria(string $nombre, $entidad)
7	{
8
9	if ($entidad === false)
10	throw new ProblemDetailsException([
11	"status" => NOT_FOUND,
12	"title" => "Registro de $nombre no encontrado.",
13	"type" => "/errors/entidadnoencontrada.html",
14	"detail" => "No se encontró ningún registro de $nombre con el id solicitado.",
15	]);
16
17	return $entidad;
18	}
19

Aplicaciones web orientadas a servicios y mashups

1. Conocimientos requeridos

2. Instrucciones de navegación

3. Software a instalar

4. Aplicaciones Orientadas a Servicios

A. Introduccion

B. Nube computacional

C. Aplicación web

D. Servicio en la nube

E. Tipos de servicios

F. Servicios que se ofrecen en la nube

G. Servicios de nube más usados

H. Aplicación orientada a servicios

Características

I. Aplicación web orientada a servicios

J. Aplicación web hibrida (Mashup)

Estructura

K. Resumen

5. Ejemplo de servicio

A. Introducción

B. Diagrama de despliegue

C. Funcionamiento

1. Iniciamos al ejecutar código en el cliente

index.html

2. Se invoca el servicio en el servidor

index.html

Request

servicio.php

3. El servicio procesa la request y genera la response

index.html

servicio.php

Response

4. El servicio devuelve la response, que es recibida en el cliente

index.html

Response

Memoria

servicio.php

5. Verifica si la conexión terminó con éxito

index.html

Memoria

6. Como la conexión terminó con éxito, recupera el texto de response

index.html

Memoria

7. Muestra el texto en un alert

index.html

Memoria

Alert

8. Al cerrar el alert, termina el evento

index.html

D. Hazlo funcionar (con videos)

E. Hazlo funcionar (texto)

F. Archivos

G. index.html

H. servicio.php

I. Resumen

6. Arquitectura orientada a servicios

A. Introducción

B. Arquitectura orientada a servicios

C. Ventajas

D. Principios de diseño de un servicio

E. Capas

F. Diagrama de Arquitectura

G. Introducción a XML

1. XML

2. Ejemplo de XML

3. DTD MiContacto

H. Introducción a SOAP

1. SOAP

2. Estructura de los mensajes de SOAP

3. Ejemplo de solicitud SOAP

4. Ejemplo de respuesta SOAP

I. Introducción a WSDL

1. WSDL

2. Elementos de WSDL

3. Ejemplo de WSDL

J. UDDI

K. Introducción a REST

1. REST

2. Solicitud HTTP

3. Métodos de envío HTTP

B. La función `consume`

C. La función `recibeJson`

D. La función `devuelveJson`

E. La clase `ProblemDetailsError`

F. La función `muestraError`

1	import { consume } from "./consume.js"
2	import { enviaFormRecibeJson } from "./enviaFormRecibeJson.js"
3
4	/**
5	* @param {string} url
6	* @param {HTMLFormElement} formulario
7	* @param {string} mensaje
8	* @param {string} nuevaVista
9	*/
10	export async function accionElimina(url, formulario, mensaje, nuevaVista) {
11	if (confirm(mensaje)) {
12	await consume(enviaFormRecibeJson(url, formulario))
13	location.href = nuevaVista
14	}
15	}

1	import { consume } from "./consume.js"
2	import { muestraObjeto } from "./muestraObjeto.js"
3	import { recibeJson } from "./recibeJson.js"
4
5	/**
6	* @param {string} url
7	* @param { "GET" \| "POST"\| "PUT" \| "PATCH" \| "DELETE" \| "TRACE" \| "OPTIONS"
8	* \| "CONNECT" \| "HEAD" } metodoHttp
9	*/
10	export async function descargaVista(url, metodoHttp = "GET") {
11	const respuesta = await consume(recibeJson(url, metodoHttp))
12	const json = await respuesta.json()
13	muestraObjeto(document, json)
14	return json
15	}

1	<?php
2
3	function recomienda(string $genero): string
4	{
5	if ($genero === "pop") {
6	return "Dua Lipa.";
7	} elseif ($genero === "reg") {
8	return "Bad Bunny.";
9	} else {
10	return "De eso no conozco";
11	}
12	}
13

1	<?php
2
3	use PHPUnit\Framework\TestCase;
4
5	require_once __DIR__ . "/../src/recomienda.php";
6
7	final class RecomiendaTest extends TestCase
8	{
9	public function testPop()
10	{
11	$this->assertEquals("Dua Lipa.", recomienda("pop"), "Probando pop");
12	}
13	public function testReg()
14	{
15	$this->assertEquals("Bad Bunny.", recomienda("reg"), "Probando reg");
16	}
17	public function testReg2()
18	{
19	$this->assertEquals("Daddy Yankee.", recomienda("reg"), "Probando reg 2");
20	}
21	}
22

1	/**
2	* @param {string} genero
3	*/
4	export function recomienda(genero) {
5	if (genero === "pop") {
6	return "Dua Lipa."
7	} else if (genero === "reg") {
8	return "Bad Bunny."
9	} else {
10	return "De eso no conozco."
11	}
12	}

1	import { recomienda } from '../src/recomienda.js'
2
3	describe("recomienda", () => {
4	it("pop", () => expect(recomienda("pop")).toBe("Dua Lipa."))
5	it("reg", () => expect(recomienda("reg")).toBe("Bad Bunny."))
6	it("reg2", () => expect(recomienda("reg")).toBe("Daddy Yankee."))
7	})

1	{
2	"spec_dir": "spec",
3	"spec_files": [
4	"*/[sS]pec.?(m)js"
5	],
6	"helpers": [
7	"helpers/*/.?(m)js"
8	],
9	"env": {
10	"stopSpecOnExpectationFailure": false,
11	"random": true
12	}
13	}
14

1	{
2	"name": "nodejs",
3	"version": "1.0.0",
4	"description": "",
5	"main": "index.js",
6	"type": "module",
7	"scripts": {
8	"test": "jasmine"
9	},
10	"keywords": [],
11	"author": "",
12	"license": "ISC",
13	"dependencies": {
14	"@types/node": "^18.0.6",
15	"node-fetch": "^3.2.6"
16	},
17	"devDependencies": {
18	"jasmine": "^5.1.0"
19	}
20	}
21

1	<!DOCTYPE html>
2	<html>
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Chat</title>
10
11	<script type="module" src="js/lib/manejaErrores.js"></script>
12	<script src="paho.javascript-1.0.3/paho-mqtt-min.js"></script>
13
14	</head>
15
16	<body>
17
18	<form id="formulario">
19
20	<h1>Chat</h1>
21
22	<p>
23	<label>
24	Alias *
25	<input id="inputAlias" required>
26	</label>
27	</p>
28
29	<p>
30	<label>
31	Mensaje *
32	<input id="inputMensaje" required>
33	</label>
34	</p>
35
36	<p>* Obligatorio</p>
37
38	<p><button type="submit">Enviar</button></p>
39
40	<pre id="pre">Conectando…</pre>
41
42	</form>
43
44	<script type="module">
45
46	import { creaIdCliente } from "./js/lib/creaIdCliente.js"
47	import { falloEnLaConexionMqtt } from "./js/lib/falloEnLaConexionMqtt.js"
48	import { conexionMqttPerdida } from "./js/lib/conexionMqttPerdida.js"
49	import { enviaMensajeMqtt } from "./js/lib/enviaMensajeMqtt.js"
50
51	const TOPICO_CHAT = "gilpgawoas/chat"
52
53	// Cambia por una raíz para tu proyecto.
54	const clientId = creaIdCliente("gilpgawoasChat-")
55
56	// Si usas un servidor de MQTT diferente, necesitas cambiar los parámetros.
57	const cliente = new Paho.MQTT.Client("test.mosquitto.org", 8081, clientId)
58
59	/**
60	* @param {Event} event
61	*/
62	function submit(event) {
63	event.preventDefault()
64	const mensaje = `${inputAlias.value.trim()}
65	${inputMensaje.value.trim()}`
66	enviaMensajeMqtt(cliente, mensaje, TOPICO_CHAT)
67	}
68
69	// Acciones al recibir un mensaje.
70	cliente.onMessageArrived = mensaje => {
71	if (mensaje.destinationName === TOPICO_CHAT) {
72	pre.textContent += mensaje.payloadString + "\n\n"
73	}
74	}
75
76	// Acciones al perder la conexión.
77	cliente.onConnectionLost = conexionMqttPerdida
78
79	// Configura el cliente.
80	cliente.connect({
81
82	// Manda un mensaje cada número de segundos indicados por este valor,
83	// para que el sistema sepa que este dispositivo está activo.
84	keepAliveInterval: 10,
85
86	useSSL: true,
87
88	// Acciones al fallar la conexión.
89	onFailure: falloEnLaConexionMqtt,
90
91	// Acciones al lograr la conexión.
92	onSuccess: () => {
93	console.log("Conectado.")
94	pre.textContent = "Conectado.\n\n"
95	// Se suscribe a uno o más tópicos.
96	cliente.subscribe(TOPICO_CHAT)
97	formulario.addEventListener("submit", submit)
98	},
99
100	})
101
102	</script>
103
104	</body>
105
106	</html>

1	/**
2	* @param {{
3	* errorCode: number,
4	* errorMessage: string
5	* }} responseObject
6	*/
7	export function conexionMqttPerdida(responseObject) {
8	if (responseObject.errorCode !== 0) {
9	const mensaje = "Conexión MQTT terminada " + responseObject.errorMessage
10	console.error(mensaje)
11	alert(mensaje)
12	}
13	}