{"id":16200,"date":"2024-08-21T14:18:27","date_gmt":"2024-08-21T21:18:27","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=16200"},"modified":"2024-08-27T09:51:59","modified_gmt":"2024-08-27T16:51:59","slug":"svelte-and-couchbase","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/","title":{"rendered":"R\u00e1pido y sincronizado con Svelte y Couchbase"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">\u00bfEst\u00e1 preparado para crear una aplicaci\u00f3n web reactiva en tiempo real?\u00a0<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">tl;dr \u00bfNo tienes tiempo para leer todo el tutorial? \u00a1Est\u00e1s de suerte! Puedes encontrar un ejemplo completamente funcional en <\/span><\/i><a href=\"https:\/\/github.com\/hummusonrails\/real-time-chat-svelte-couchbase\"><i><span style=\"font-weight: 400;\">GitHub<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">. Si\u00e9ntase libre de ir all\u00ed, clonar el repositorio y empezar a explorar.<\/span><\/i><\/p>\n<hr \/>\n<p><span style=\"font-weight: 400;\">En este tutorial, exploraremos la combinaci\u00f3n de <\/span><a href=\"https:\/\/svelte.dev\/\"><span style=\"font-weight: 400;\">Esbelto<\/span><\/a><span style=\"font-weight: 400;\"> y <\/span><a href=\"https:\/\/cloud.couchbase.com\/\"><span style=\"font-weight: 400;\">Couchbase Capella<\/span><\/a><span style=\"font-weight: 400;\"> para crear una aplicaci\u00f3n de chat din\u00e1mica e interactiva. Svelte, con un impresionante \u00edndice de admiraci\u00f3n del 72,8% seg\u00fan el <\/span><a href=\"https:\/\/survey.stackoverflow.co\/2024\/technology#admired-and-desired-webframe-desire-admire\"><span style=\"font-weight: 400;\">2024 Encuesta a desarrolladores Stack Overflow<\/span><\/a><span style=\"font-weight: 400;\">es c\u00e9lebre por varias razones. Elimina eficientemente gran parte del trabajo del navegador al compilar sus componentes en c\u00f3digo imperativo altamente eficiente que manipula directamente el DOM, eliminando la necesidad de un DOM virtual y conduciendo a actualizaciones m\u00e1s r\u00e1pidas y tama\u00f1os de paquetes m\u00e1s peque\u00f1os.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">La reactividad integrada de Svelte rastrea autom\u00e1ticamente los cambios de estado, garantizando actualizaciones r\u00e1pidas y eficaces sin necesidad de complejas bibliotecas de gesti\u00f3n de estados. Esta reactividad simplifica el proceso de desarrollo y mejora el rendimiento. Adem\u00e1s, la arquitectura basada en componentes de Svelte facilita la creaci\u00f3n y el mantenimiento de interfaces de usuario complejas, ofreciendo una experiencia de desarrollo m\u00e1s sencilla y agradable. Y, cuando tu aplicaci\u00f3n necesita datos reactivos y adaptables, Couchbase Capella ofrece una soluci\u00f3n sencilla de implementar.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Couchbase Capella no es solo una plataforma de base de datos NoSQL en la nube; es una plataforma de datos todo en uno que ofrece b\u00fasqueda de texto completo, b\u00fasqueda vectorial, almacenamiento en cach\u00e9 de datos, an\u00e1lisis y mucho m\u00e1s. Esta amplia funcionalidad le permite crear aplicaciones robustas con diversos requisitos de datos. Juntos, Svelte y Couchbase Capella hacen posible aplicaciones en tiempo real que son incre\u00edblemente r\u00e1pidas y performantes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Bueno, basta de charla. Empecemos.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Configuraci\u00f3n del entorno de desarrollo<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Creaci\u00f3n de un nuevo proyecto SvelteKit<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Antes de entrar en la configuraci\u00f3n, vamos a aclarar la diferencia entre Svelte y SvelteKit. Svelte es un framework front-end que compila tu c\u00f3digo en c\u00f3digo imperativo altamente eficiente que manipula directamente el DOM. Esto se traduce en actualizaciones m\u00e1s r\u00e1pidas y paquetes de menor tama\u00f1o. Por otro lado, SvelteKit es un framework construido sobre Svelte, dise\u00f1ado para construir aplicaciones web full-stack. SvelteKit proporciona caracter\u00edsticas adicionales como enrutamiento, renderizado del lado del servidor y generaci\u00f3n de sitios est\u00e1ticos, lo que lo convierte en una potente herramienta para el desarrollo de aplicaciones web modernas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">En su proyecto, SvelteKit se encargar\u00e1 de la estructura de la aplicaci\u00f3n, el enrutamiento y la renderizaci\u00f3n del lado del servidor, mientras que Svelte gestionar\u00e1 la renderizaci\u00f3n eficiente de los componentes de la interfaz de usuario.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Para iniciar un nuevo proyecto puede inicializarlo en la l\u00ednea de comandos:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">npm create svelte@latest svelte-couchbase-real-time-chat\r\ncd svelte-couchbase-real-time-chat\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">La herramienta CLI le ofrecer\u00e1 varias opciones. Responda con las siguientes opciones:<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Proyecto Esqueleto<\/b><span style=\"font-weight: 400;\">: Seleccione <\/span><strong>s\u00ed<\/strong><span style=\"font-weight: 400;\"> empezar con una estructura b\u00e1sica del proyecto.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Texto mecanografiado<\/b><span style=\"font-weight: 400;\">: Seleccione <\/span><strong>no<\/strong><span style=\"font-weight: 400;\"> por ahora para simplificar las cosas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>ESLint<\/b><span style=\"font-weight: 400;\">: Seleccione <\/span><strong>s\u00ed<\/strong><span style=\"font-weight: 400;\"> para incluir linting, que ayuda a mantener la calidad del c\u00f3digo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>M\u00e1s bonito<\/b><span style=\"font-weight: 400;\">: Seleccione <\/span><strong>s\u00ed<\/strong><span style=\"font-weight: 400;\"> para el formato del c\u00f3digo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dramaturgo<\/b><span style=\"font-weight: 400;\">: Seleccione <\/span><strong>no<\/strong><span style=\"font-weight: 400;\"> a menos que planee escribir pruebas de extremo a extremo desde el principio.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n, instale las dependencias ejecutando <\/span><em><span style=\"font-weight: 400;\">npm instalar<\/span><\/em><span style=\"font-weight: 400;\"> desde la l\u00ednea de comandos. Despu\u00e9s de ejecutar estos comandos, tendr\u00e1s un nuevo proyecto SvelteKit configurado y listo para funcionar.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Instalaci\u00f3n de dependencias<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n, vamos a instalar las dependencias adicionales necesarias para nuestro proyecto, incluyendo Tailwind CSS para el estilo, el SDK Couchbase para las interacciones de base de datos, y el apoyo WebSocket para la comunicaci\u00f3n en tiempo real.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">npm install -D tailwindcss postcss autoprefixer couchbase ws dotenv\r\nnpx tailwindcss init -p<\/pre>\n<p><span style=\"font-weight: 400;\">\u00bfQu\u00e9 hace cada una de estas dependencias en tu aplicaci\u00f3n?<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/tailwindcss.com\/\"><span style=\"font-weight: 400;\">TailwindCSS<\/span><\/a><span style=\"font-weight: 400;\"> es un framework CSS que facilita la creaci\u00f3n de aplicaciones con clases predefinidas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">En <\/span><a href=\"https:\/\/docs.couchbase.com\/nodejs-sdk\/current\/hello-world\/start-using-sdk.html\"><span style=\"font-weight: 400;\">SDK de Couchbase para Node.js<\/span><\/a><span style=\"font-weight: 400;\"> introduce funcionalidad para interactuar con tus datos en Couchbase Capella usando m\u00e9todos que abstraen gran parte del trabajo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><em><span style=\"font-weight: 400;\">ws<\/span><\/em><span style=\"font-weight: 400;\"> es una peque\u00f1a librer\u00eda Websocket para Node.js. Habilitar\u00e1 la funcionalidad de chat en tiempo real en la aplicaci\u00f3n con Websockets.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Por \u00faltimo, <\/span><em><span style=\"font-weight: 400;\">dotenv<\/span><\/em><span style=\"font-weight: 400;\"> carga variables de entorno de un <\/span><i><span style=\"font-weight: 400;\">.env<\/span><\/i><span style=\"font-weight: 400;\"> archivo en <\/span><em><span style=\"font-weight: 400;\">env.proceso<\/span><\/em><span style=\"font-weight: 400;\"> facilitando la gesti\u00f3n de la configuraci\u00f3n.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Configuraci\u00f3n de TailwindCSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Como se mencion\u00f3 anteriormente, TailwindCSS introduce clases que puedes utilizar para definir el estilo de tu aplicaci\u00f3n. Esto es \u00fatil si no eres un experto en frontend, o incluso si lo eres, si deseas acortar el proceso de construcci\u00f3n de aplicaciones elegantemente dise\u00f1adas. Para utilizar TailwindCSS en tu proyecto Svelte, sigue estos pasos:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Configure <\/span><em><span style=\"font-weight: 400;\">tailwind.config.js<\/span><\/em><\/h4>\n<p><span style=\"font-weight: 400;\">Actualizar el <\/span><em><span style=\"font-weight: 400;\">tailwind.config.cjs<\/span><\/em><span style=\"font-weight: 400;\"> para especificar las fuentes de contenido. Esto garantiza que Tailwind CSS pueda eliminar los estilos no utilizados de tu compilaci\u00f3n de producci\u00f3n, haci\u00e9ndola m\u00e1s eficiente.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">\/** @type {import('tailwindcss').Config} *\/\r\nmodule.exports = {\r\n  content: ['.\/src\/**\/*.{html,js,svelte,ts}'],\r\n  tema: {\r\n    extend: {},\r\n  },\r\n  plugins: [],\r\n}\r\n<\/pre>\n<h4><span style=\"font-weight: 400;\">A\u00f1adir directivas CSS de Tailwind<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Crear o actualizar el <\/span><em><span style=\"font-weight: 400;\">src\/app.css<\/span><\/em><span style=\"font-weight: 400;\"> para incluir las directivas CSS de Tailwind. Estas directivas cargan los estilos base, de componentes y de utilidades de Tailwind.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;<\/pre>\n<h4><span style=\"font-weight: 400;\">Incluya el CSS en su proyecto Svelte<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Abra o cree el <\/span><em><span style=\"font-weight: 400;\">src\/routes\/+layout.svelte<\/span><\/em><span style=\"font-weight: 400;\"> e importar el archivo CSS. Esto asegura que los estilos de Tailwind est\u00e9n disponibles en toda tu aplicaci\u00f3n.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">Ahora que has completado estos pasos, TailwindCSS se ha inicializado correctamente en tu aplicaci\u00f3n. Est\u00e1s listo para pasar a configurar Couchbase Capella y construir el backend para tu aplicaci\u00f3n de chat.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Configuraci\u00f3n de Couchbase Capella<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Creaci\u00f3n de un cl\u00faster<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Registrarse y probar Couchbase Capella es gratuito y, si a\u00fan no lo ha hecho, puede hacerlo accediendo a <\/span><a href=\"https:\/\/cloud.couchbase.com\/\"><span style=\"font-weight: 400;\">nube.couchbase.com<\/span><\/a><span style=\"font-weight: 400;\"> y creando una cuenta con tus credenciales de GitHub o Google, o creando una cuenta nueva con una combinaci\u00f3n de direcci\u00f3n de correo electr\u00f3nico y contrase\u00f1a.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Una vez que lo haya hecho, desde el panel de control de Capella, crear\u00e1 su primer cl\u00faster. Para los fines de este tutorial, vamos a llamarlo <\/span><i><span style=\"font-weight: 400;\">SvelteChatApp<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">El resumen de su nuevo cl\u00faster se presentar\u00e1 en la parte izquierda del panel de control. Capella es multi-nube y puede trabajar con AWS, Google Cloud o Azure. En este ejemplo, se desplegar\u00e1 en AWS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Una vez creado el cl\u00faster, debe crear un archivo <\/span><i><span style=\"font-weight: 400;\">cubo<\/span><\/i><span style=\"font-weight: 400;\">. A <\/span><i><span style=\"font-weight: 400;\">cubo<\/span><\/i><span style=\"font-weight: 400;\"> en Couchbase es el contenedor donde se almacenan los datos. Cada dato, conocido como documento, se guarda en JSON, por lo que su sintaxis resulta familiar a la mayor\u00eda de los desarrolladores. Puedes nombrar tu bucket como quieras. Sin embargo, para los prop\u00f3sitos de este tutorial, vamos a llamar a este bucket <\/span><i><span style=\"font-weight: 400;\">svelte_chat_app_messages<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ahora que has creado tanto tu base de datos como tu bucket, est\u00e1s listo para crear tus credenciales de acceso a la base de datos y obtener tu URL de conexi\u00f3n que usar\u00e1s en tu funci\u00f3n Lambda.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Obtenci\u00f3n de datos de conexi\u00f3n<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Los detalles de conexi\u00f3n son esenciales, ya que los utilizar\u00e1s en tu aplicaci\u00f3n para establecer una conexi\u00f3n con tus datos de Couchbase e interactuar con ellos. Navega hasta el archivo <\/span><i><span style=\"font-weight: 400;\">Conectar<\/span><\/i><span style=\"font-weight: 400;\"> en el cuadro de mandos de Capella y tome nota de la secci\u00f3n <\/span><i><span style=\"font-weight: 400;\">Cadena de conexi\u00f3n<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><a href=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2024\/08\/image2-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-16201\" style=\"border: 1px solid black;\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2024\/08\/image2-2-1024x583.png\" alt=\"Capella SDK connection details\" width=\"900\" height=\"512\" srcset=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image2-2-1024x583.png 1024w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image2-2-300x171.png 300w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image2-2-768x438.png 768w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image2-2-1536x875.png 1536w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image2-2-1320x752.png 1320w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image2-2.png 1999w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n, haga clic en el bot\u00f3n <\/span><i><span style=\"font-weight: 400;\">Acceso a bases de datos<\/span><\/i><span style=\"font-weight: 400;\"> en la secci\u00f3n dos. En esa secci\u00f3n, crear\u00e1s las credenciales (un nombre de usuario y una contrase\u00f1a) que tu aplicaci\u00f3n utilizar\u00e1 para autenticarse con la base de datos. Puedes limitar las credenciales al bucket espec\u00edfico que has creado o darle permiso para todos los buckets y bases de datos de tu cuenta. Debes asegurarte de que tiene acceso de lectura y escritura.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Una vez que haya terminado, el \u00faltimo paso en esta parte del proceso es a\u00f1adir su nueva cadena de conexi\u00f3n y las credenciales de conexi\u00f3n a su aplicaci\u00f3n como variables de entorno.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Configuraci\u00f3n de variables de entorno<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">En un entorno de producci\u00f3n, almacenar\u00e1 sus credenciales y otra informaci\u00f3n confidencial para su aplicaci\u00f3n en un formato seguro. Diferentes proveedores de nube tienen diferentes caminos para almacenar informaci\u00f3n sensible, y usted debe seguir el procedimiento definido por el proveedor de nube que est\u00e1 utilizando, ya sea AWS, Google Cloud, Azure, Netlify, Vercel o cualquier otro. Para nuestros prop\u00f3sitos, est\u00e1s a\u00f1adiendo tus credenciales a un archivo <\/span><i><span style=\"font-weight: 400;\">.env<\/span><\/i><span style=\"font-weight: 400;\"> en la carpeta ra\u00edz de su aplicaci\u00f3n. La direcci\u00f3n <\/span><em><span style=\"font-weight: 400;\">dotenv<\/span><\/em><span style=\"font-weight: 400;\"> lee esas credenciales desde all\u00ed y las carga en tu aplicaci\u00f3n.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\"># .env\r\nCOUCHBASE_BUCKET=nombre_de_tu_cubo\r\nCOUCHBASE_CONNECTION_STRING=su_cadena_de_conexi\u00f3n\r\nCOUCHBASE_USER=su_nombre_de_usuario\r\nCOUCHBASE_PASSWORD=su_contrase\u00f1a<\/pre>\n<p><span style=\"font-weight: 400;\">Ya est\u00e1. Tu cluster de Couchbase est\u00e1 configurado y listo para ser usado. En este punto, est\u00e1s listo para construir la aplicaci\u00f3n. Empecemos con el servidor backend con Nodejs y luego pasemos al frontend con Svelte.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Construir el backend con Node.js<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Con nuestro entorno de desarrollo configurado, es hora de construir el backend para nuestra aplicaci\u00f3n de chat en tiempo real. Usaremos Node.js para crear el servidor, conectarnos a Couchbase Capella para el almacenamiento de datos y configurar un servidor WebSocket para la comunicaci\u00f3n en tiempo real.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Creaci\u00f3n de <\/span><em><span style=\"font-weight: 400;\">servidor.cjs<\/span><\/em><\/h3>\n<p><span style=\"font-weight: 400;\">En primer lugar, vamos a crear un archivo llamado server.cjs que servir\u00e1 como punto de entrada para nuestro backend.<\/span><\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cree <\/span><em><span style=\"font-weight: 400;\">servidor.cjs<\/span><\/em><span style=\"font-weight: 400;\">:<br \/>\nEn el directorio ra\u00edz de su proyecto, cree un nuevo archivo llamado <i>servidor.cjs<\/i>.<br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Configuraci\u00f3n de Express y dependencias:<br \/>\nUtilizaremos Express para nuestro framework de servidor, el SDK de Couchbase para las operaciones de base de datos, WebSocket para la comunicaci\u00f3n en tiempo real y <em>dotenv<\/em> para la gesti\u00f3n de variables de entorno. A\u00f1ada el siguiente c\u00f3digo a <i>servidor.cjs<\/i>:<br \/>\n<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<pre class=\"nums:false lang:default decode:true\">const express = require('express');\r\nconst couchbase = require('couchbase');\r\nconst { createServer } = require('http');\r\nconst { WebSocketServer } = require('ws');\r\nconst dotenv = require('dotenv');\r\n\r\ndotenv.config();\r\n\r\nconst app = express();\r\nconst servidor = createServer(app);\r\nconst wss = new WebSocketServer({ servidor });<\/pre>\n<h3><span style=\"font-weight: 400;\">Conexi\u00f3n a Couchbase<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n, configuraremos la conexi\u00f3n a Couchbase Capella. Aseg\u00farate de que tu archivo .env contiene los detalles de conexi\u00f3n correctos. A\u00f1ade el siguiente c\u00f3digo a <\/span><i><span style=\"font-weight: 400;\">servidor.cjs <\/span><\/i><span style=\"font-weight: 400;\">\u00a0para conectarse a Couchbase:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">dejar cl\u00faster, cubo, colecci\u00f3n;\r\n\r\nfunci\u00f3n as\u00edncrona connectToCouchbase() {\r\n    try {\r\n        console.log('Conectando a Couchbase...');\r\n        const clusterConnStr = process.env.COUCHBASE_CONNECTION_STRING;\r\n        const nombre_usuario = process.env.COUCHBASE_USER;\r\n        const password = process.env.COUCHBASE_PASSWORD;\r\n        const bucketName = process.env.COUCHBASE_BUCKET;\r\n      \r\n        cluster = await couchbase.connect(clusterConnStr, {\r\n          nombredeusuario: nombredeusuario,\r\n          contrase\u00f1a: contrase\u00f1a,\r\n          configProfile: 'wanDevelopment',\r\n        });\r\n        bucket = cluster.bucket(bucketName);\r\n        collection = bucket.defaultCollection();\r\n        \r\n        console.log('Conectado a Couchbase con \u00e9xito');\r\n    } catch (error) {\r\n        console.error('Error al conectar con Couchbase:', error);\r\n        process.exit(1);\r\n    }\r\n}\r\n\r\nconnectToCouchbase();<\/pre>\n<p><span style=\"font-weight: 400;\">Esta funci\u00f3n se encarga de la conexi\u00f3n con Couchbase, asegur\u00e1ndose de que todos los par\u00e1metros necesarios est\u00e1n correctamente configurados. Todo lo que queda para nuestro backend es crear el servidor websocket para manejar el env\u00edo y recepci\u00f3n de nuevos mensajes de chat.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Configuraci\u00f3n del servidor Websocket<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La funcionalidad de servidor Websocket tambi\u00e9n se a\u00f1ade a la aplicaci\u00f3n <\/span><i><span style=\"font-weight: 400;\">servidor.cjs<\/span><\/i><span style=\"font-weight: 400;\"> archivo. El servidor emitir\u00e1 todos los mensajes nuevos para que los reciba el frontend de la aplicaci\u00f3n, y enviar\u00e1 todos los mensajes reci\u00e9n creados a Couchbase para que los guarde en el bucket que has creado.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">wss.on('conexi\u00f3n', (ws) =&gt; {\r\n    console.log('Nueva conexi\u00f3n WebSocket establecida.');\r\n    ws.on('mensaje', async (mensaje) =&gt; {\r\n        try {\r\n            const messageString = mensaje.toString();\r\n            console.log('Mensaje recibido:', messageString);\r\n            \/\/ Guardar mensaje en Couchbase\r\n            const id = `mensaje::${Date.now()}`;\r\n            await collection.upsert(id, { text: messageString });\r\n            console.log('Mensaje guardado en Couchbase:', id);\r\n\r\n            \/\/ Emisi\u00f3n del mensaje\r\n            wss.clients.forEach((cliente) =&gt; {\r\n                if (client.readyState === WebSocket.OPEN) {\r\n                    client.send(messageString);\r\n                    console.log('Mensaje transmitido al cliente:', messageString);\r\n                }\r\n            });\r\n        } catch (error) {\r\n            console.error('Error manejando mensaje:', error);\r\n        }\r\n    });\r\n});\r\n\r\nserver.listen(3000, () =&gt; {\r\n    console.log('Servidor iniciado en https:\/\/localhost:3000');\r\n});<\/pre>\n<p><span style=\"font-weight: 400;\">Tenga en cuenta que antes de enviar el mensaje a Couchbase, primero debe convertir el mensaje en un archivo <\/span><em><span style=\"font-weight: 400;\">Cadena<\/span><\/em><span style=\"font-weight: 400;\"> ya que por defecto se recibe como b\u00fafer de datos binarios. La conversi\u00f3n a <\/span><em><span style=\"font-weight: 400;\">Cadena<\/span><\/em><span style=\"font-weight: 400;\"> se consigue llamando a la funci\u00f3n <\/span><em><span style=\"font-weight: 400;\">toString()<\/span><\/em><span style=\"font-weight: 400;\"> sobre el mensaje. La nueva funci\u00f3n <\/span><em><span style=\"font-weight: 400;\">messageString<\/span><\/em><span style=\"font-weight: 400;\"> contiene ahora los datos en formato legible tanto para enviarlos a Couchbase como para renderizarlos en la aplicaci\u00f3n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ese es todo el backend de tu nueva aplicaci\u00f3n de chat en tiempo real. Sin embargo, por muy bueno que sea cualquier backend para una aplicaci\u00f3n web, necesita un frontend que lo renderice para el usuario. Svelte nos ofrece el rendimiento y la reactividad para hacerlo con velocidad y con una excelente experiencia para el desarrollador.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Creaci\u00f3n de la interfaz con Svelte<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Una vez configurado el backend, es hora de crear el frontend de nuestra aplicaci\u00f3n de chat en tiempo real con Svelte. Aprovechar\u00e1s los puntos fuertes de Svelte para crear una interfaz de chat din\u00e1mica y con capacidad de respuesta.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Creaci\u00f3n de la interfaz de chat<\/span><\/h3>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Crear el componente Svelte<br \/>\nEn tu proyecto SvelteKit, crea un nuevo archivo llamado <i>+p\u00e1gina.esbelta<\/i> en el <i>src\/rutas<\/i> directorio. Este archivo servir\u00e1 como componente principal de nuestra interfaz de chat.<br \/>\n<\/span><\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">touch src\/rutas\/+pagina.svelte<\/pre>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Establecer la estructura b\u00e1sica<br \/>\n<\/span>Abrir <i>+p\u00e1gina.esbelta<\/i> y configurar la estructura HTML b\u00e1sica con clases TailwindCSS para el estilo:<\/p>\n<pre class=\"nums:false lang:default decode:true\">&lt;script&gt;\r\n&nbsp;&nbsp;import { onMount } from &#039;svelte&#039;;\r\n\r\n&nbsp;&nbsp;let messages = [];\r\n&nbsp;&nbsp;let newMessage = &#039;&#039;;\r\n\r\n&nbsp;&nbsp;let ws;\r\n\r\n&nbsp;&nbsp;onMount(() =&gt; {\r\n&nbsp;&nbsp;&nbsp;&nbsp;ws = new WebSocket(&#039;ws:\/\/localhost:3000&#039;);\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;ws.onmessage = (event) =&gt; {\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messages = [...messages, event.data];\r\n&nbsp;&nbsp;&nbsp;&nbsp;};\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;ws.onopen = () =&gt; {\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#039;WebSocket connection opened&#039;);\r\n&nbsp;&nbsp;&nbsp;&nbsp;};\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;ws.onclose = () =&gt; {\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#039;WebSocket connection closed&#039;);\r\n&nbsp;&nbsp;&nbsp;&nbsp;};\r\n&nbsp;&nbsp;});\r\n\r\n&nbsp;&nbsp;function sendMessage() {\r\n&nbsp;&nbsp;&nbsp;&nbsp;ws.send(newMessage);\r\n&nbsp;&nbsp;&nbsp;&nbsp;newMessage = &#039;&#039;;\r\n&nbsp;&nbsp;}\r\n&lt;\/script&gt;\r\n\r\n&lt;div class=&quot;container mx-auto p-4&quot;&gt;\r\n&nbsp;&nbsp;&lt;h1 class=&quot;text-2xl mb-4&quot;&gt;Aplicaci&oacute;n de chat&lt;\/h1&gt;\r\n&nbsp;&nbsp;&lt;div class=&quot;border p-4 mb-4 h-64 overflow-y-scroll&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;{1TP5Ense&ntilde;ar mensajes como mensaje}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;{mensaje}&lt;\/div&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;{\/each}\r\n&nbsp;&nbsp;&lt;\/div&gt;\r\n&nbsp;&nbsp;&lt;input\r\n&nbsp;&nbsp;&nbsp;&nbsp;type=&quot;text&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;bind:value=&quot;{newMessage}&nbsp;&nbsp;&nbsp;&nbsp;class=&quot;border&quot; p-2 w-full mb-2&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;placeholder=&quot;Type a message&quot;\r\n&nbsp;&nbsp;&gt;\r\n&nbsp;&nbsp;&lt;button on:click=&quot;{sendMessage}&quot; class=&quot;bg-blue-500 text-white p-2 w-full&quot;&gt;Enviar&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 40px;\"><span style=\"font-weight: 400;\">En <\/span><em><span style=\"font-weight: 400;\"><\/span><\/em><span style=\"font-weight: 400;\"> del ejemplo de c\u00f3digo anterior inicializa Websocket y gestiona los mensajes, tanto de env\u00edo como de recepci\u00f3n. En <\/span><em><span style=\"font-weight: 400;\">onMount<\/span><\/em><span style=\"font-weight: 400;\"> asegura que la conexi\u00f3n Websocket se establece cuando se inicializa el componente. La reactividad de Svelte actualiza autom\u00e1ticamente el DOM cada vez que se activa la funci\u00f3n <\/span><em><span style=\"font-weight: 400;\">mensajes<\/span><\/em><span style=\"font-weight: 400;\"> para que los nuevos mensajes se muestren en tiempo real. Con esto, tu frontend ya est\u00e1 completo.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a1Lo has conseguido! Has construido una aplicaci\u00f3n de chat completa que permite la comunicaci\u00f3n en tiempo real utilizando el rendimiento, la flexibilidad y la adaptabilidad tanto de Svelte como de Couchbase para ofrecer una experiencia \u00f3ptima a tus usuarios. S\u00ed, esta es una implementaci\u00f3n bastante simple, sin embargo, proporciona el esqueleto para que puedas construir aplicaciones en tiempo real a\u00fan m\u00e1s amplias y complejas. El potencial s\u00f3lo est\u00e1 limitado por tu imaginaci\u00f3n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00bfQuieres intentarlo? Pongamos en marcha tu aplicaci\u00f3n y empecemos a chatear.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Ejecutar la aplicaci\u00f3n<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Para ejecutar tu aplicaci\u00f3n, inicializar\u00e1s tanto el servidor backend Node.js como el frontend SvelteKit. En primer lugar, vamos a iniciar el backend desde tu terminal:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">nodo server.cjs<\/pre>\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n, inicie el frontend en una nueva ventana de terminal:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">npm run dev<\/pre>\n<p><span style=\"font-weight: 400;\">Ahora, navegue en su navegador hasta <\/span><a href=\"https:\/\/localhost:5173\/\"><i><span style=\"font-weight: 400;\">https:\/\/localhost:5173<\/span><\/i><\/a><span style=\"font-weight: 400;\"> \u00a1y empieza a chatear!\u00a0<\/span><\/p>\n<p><a href=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2024\/08\/image3-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-16202\" style=\"border: 1px solid black;\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2024\/08\/image3-2-1024x396.png\" alt=\"backend Node.js server and the SvelteKit frontend.\" width=\"900\" height=\"348\" srcset=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image3-2-1024x396.png 1024w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image3-2-300x116.png 300w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image3-2-768x297.png 768w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image3-2-1536x594.png 1536w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image3-2-1320x510.png 1320w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/image3-2.png 1999w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Puedes abrir varias pesta\u00f1as del navegador para simular varios usuarios o utilizar un servicio como <\/span><a href=\"https:\/\/ngrok.com\/\"><span style=\"font-weight: 400;\">ngrok<\/span><\/a><span style=\"font-weight: 400;\"> para compartir la aplicaci\u00f3n con tus amigos y chatear en tiempo real con ellos.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusi\u00f3n<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">En este tutorial has aprendido lo r\u00e1pido que puedes crear una aplicaci\u00f3n totalmente responsive que funciona con datos en tiempo real. Svelte actualiza el DOM con facilidad, mientras que Couchbase te permite empezar a crear y almacenar mensajes en cuesti\u00f3n de segundos.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hay muchas razones por las que Svelte est\u00e1 creciendo r\u00e1pidamente en admiraci\u00f3n y popularidad en el altamente competitivo espacio del framework web. Couchbase como el backend de datos emparejado con Svelte aumenta el potencial de lo que puede construir y lograr mucho m\u00e1s. No hay necesidad de definir esquemas complicados, no hay necesidad de a\u00f1adir m\u00e1s dependencias m\u00e1s adelante si desea implementar el almacenamiento en cach\u00e9 de datos o capacidades de b\u00fasqueda, todo est\u00e1 integrado con Couchbase y viene directamente de la caja.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">La \u00fanica pregunta que queda es: \u00bfqu\u00e9 construir\u00e1 despu\u00e9s?<\/span><\/p>\n<p>Empiece gratis con <a href=\"https:\/\/cloud.couchbase.com\/\">Couchbase Capella<\/a>.<\/p>\n<p><br style=\"font-weight: 400;\" \/><br style=\"font-weight: 400;\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>\u00bfEst\u00e1s listo para construir una aplicaci\u00f3n web reactiva en tiempo real? tl;dr \u00bfNo tienes tiempo para leer y trabajar a trav\u00e9s de todo este tutorial? \u00a1Est\u00e1s de suerte! Puedes encontrar un ejemplo completamente funcional en GitHub. Si\u00e9ntete libre de ir all\u00ed, clonar [...]<\/p>","protected":false},"author":85356,"featured_media":16207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1815,2242,2225,1822],"tags":[10009,1782],"ppma_author":[9985],"class_list":["post-16200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best-practices-and-tutorials","category-connectors","category-cloud","category-node-js","tag-svelte","tag-websocket"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.1 (Yoast SEO v26.1.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Quick and In Sync with Svelte and Couchbase - The Couchbase Blog<\/title>\n<meta name=\"description\" content=\"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quick and In Sync with Svelte and Couchbase\" \/>\n<meta property=\"og:description\" content=\"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-21T21:18:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-27T16:51:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Greenberg, Senior Developer Evangelist\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Greenberg, Senior Developer Evangelist\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/\"},\"author\":{\"name\":\"Ben Greenberg, Senior Developer Evangelist\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/48efa1524aec97312d92f65a270c255d\"},\"headline\":\"Quick and In Sync with Svelte and Couchbase\",\"datePublished\":\"2024-08-21T21:18:27+00:00\",\"dateModified\":\"2024-08-27T16:51:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/\"},\"wordCount\":2103,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png\",\"keywords\":[\"svelte\",\"websocket\"],\"articleSection\":[\"Best Practices and Tutorials\",\"Connectors\",\"Couchbase Capella\",\"Node.js\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/\",\"name\":\"Quick and In Sync with Svelte and Couchbase - The Couchbase Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png\",\"datePublished\":\"2024-08-21T21:18:27+00:00\",\"dateModified\":\"2024-08-27T16:51:59+00:00\",\"description\":\"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png\",\"width\":2400,\"height\":1256,\"caption\":\"Build apps with Svelte and Couchbase\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quick and In Sync with Svelte and Couchbase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/48efa1524aec97312d92f65a270c255d\",\"name\":\"Ben Greenberg, Senior Developer Evangelist\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/c9bda12524045d12a5878a2ef3fbe0de\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/06\/T024FJS4M-U075H3NTJUR-b4c321d902e2-512.jpeg\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/06\/T024FJS4M-U075H3NTJUR-b4c321d902e2-512.jpeg\",\"caption\":\"Ben Greenberg, Senior Developer Evangelist\"},\"url\":\"https:\/\/www.couchbase.com\/blog\/es\/author\/bengreenberg\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"R\u00e1pido y sincronizado con Svelte y Couchbase - El blog de Couchbase","description":"Cree una aplicaci\u00f3n de chat que permita la comunicaci\u00f3n en tiempo real con el rendimiento, la flexibilidad y la adaptabilidad de Svelte y Couchbase.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/","og_locale":"es_MX","og_type":"article","og_title":"Quick and In Sync with Svelte and Couchbase","og_description":"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase","og_url":"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/","og_site_name":"The Couchbase Blog","article_published_time":"2024-08-21T21:18:27+00:00","article_modified_time":"2024-08-27T16:51:59+00:00","og_image":[{"width":2400,"height":1256,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png","type":"image\/png"}],"author":"Ben Greenberg, Senior Developer Evangelist","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ben Greenberg, Senior Developer Evangelist","Est. reading time":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/"},"author":{"name":"Ben Greenberg, Senior Developer Evangelist","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/48efa1524aec97312d92f65a270c255d"},"headline":"Quick and In Sync with Svelte and Couchbase","datePublished":"2024-08-21T21:18:27+00:00","dateModified":"2024-08-27T16:51:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/"},"wordCount":2103,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png","keywords":["svelte","websocket"],"articleSection":["Best Practices and Tutorials","Connectors","Couchbase Capella","Node.js"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/","url":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/","name":"R\u00e1pido y sincronizado con Svelte y Couchbase - El blog de Couchbase","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png","datePublished":"2024-08-21T21:18:27+00:00","dateModified":"2024-08-27T16:51:59+00:00","description":"Cree una aplicaci\u00f3n de chat que permita la comunicaci\u00f3n en tiempo real con el rendimiento, la flexibilidad y la adaptabilidad de Svelte y Couchbase.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/08\/blog-svelta.png","width":2400,"height":1256,"caption":"Build apps with Svelte and Couchbase"},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Quick and In Sync with Svelte and Couchbase"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"El blog de Couchbase","description":"Couchbase, la base de datos NoSQL","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"El blog de Couchbase","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/48efa1524aec97312d92f65a270c255d","name":"Ben Greenberg, Desarrollador Evangelista Senior","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/c9bda12524045d12a5878a2ef3fbe0de","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/06\/T024FJS4M-U075H3NTJUR-b4c321d902e2-512.jpeg","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/06\/T024FJS4M-U075H3NTJUR-b4c321d902e2-512.jpeg","caption":"Ben Greenberg, Senior Developer Evangelist"},"url":"https:\/\/www.couchbase.com\/blog\/es\/author\/bengreenberg\/"}]}},"authors":[{"term_id":9985,"user_id":85356,"is_guest":0,"slug":"bengreenberg","display_name":"Ben Greenberg, Senior Developer Evangelist","avatar_url":{"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/06\/T024FJS4M-U075H3NTJUR-b4c321d902e2-512.jpeg","url2x":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/06\/T024FJS4M-U075H3NTJUR-b4c321d902e2-512.jpeg"},"author_category":"","last_name":"Greenberg, Senior Developer Evangelist","first_name":"Ben","job_title":"Senior Developer Evangelist","user_url":"","description":""}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts\/16200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/users\/85356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=16200"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts\/16200\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/media\/16207"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=16200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=16200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=16200"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/ppma_author?post=16200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}