Quick and In Sync with Svelte and Couchbase

¿Está preparado para crear una aplicación web reactiva en tiempo real?

tl;dr ¿No tienes tiempo para leer todo el tutorial? ¡Estás de suerte! Puedes encontrar un ejemplo completamente funcional en GitHub. Siéntase libre de ir allí, clonar el repositorio y empezar a explorar.

En este tutorial, exploraremos la combinación de Esbelto y Couchbase Capella para crear una aplicación de chat dinámica e interactiva. Svelte, con un impresionante índice de admiración del 72,8% según el 2024 Encuesta a desarrolladores Stack Overflowes célebre por varias razones. Elimina eficientemente gran parte del trabajo del navegador al compilar sus componentes en código imperativo altamente eficiente que manipula directamente el DOM, eliminando la necesidad de un DOM virtual y conduciendo a actualizaciones más rápidas y tamaños de paquetes más pequeños.

La reactividad integrada de Svelte rastrea automáticamente los cambios de estado, garantizando actualizaciones rápidas y eficaces sin necesidad de complejas bibliotecas de gestión de estados. Esta reactividad simplifica el proceso de desarrollo y mejora el rendimiento. Además, la arquitectura basada en componentes de Svelte facilita la creación y el mantenimiento de interfaces de usuario complejas, ofreciendo una experiencia de desarrollo más sencilla y agradable. Y, cuando tu aplicación necesita datos reactivos y adaptables, Couchbase Capella ofrece una solución sencilla de implementar.

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úsqueda de texto completo, búsqueda vectorial, almacenamiento en caché de datos, análisis y mucho más. 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íblemente rápidas y performantes.

Bueno, basta de charla. Empecemos.

Configuración del entorno de desarrollo

Creación de un nuevo proyecto SvelteKit

Antes de entrar en la configuración, vamos a aclarar la diferencia entre Svelte y SvelteKit. Svelte es un framework front-end que compila tu código en código imperativo altamente eficiente que manipula directamente el DOM. Esto se traduce en actualizaciones más rápidas y paquetes de menor tamaño. Por otro lado, SvelteKit es un framework construido sobre Svelte, diseñado para construir aplicaciones web full-stack. SvelteKit proporciona características adicionales como enrutamiento, renderizado del lado del servidor y generación de sitios estáticos, lo que lo convierte en una potente herramienta para el desarrollo de aplicaciones web modernas.

En su proyecto, SvelteKit se encargará de la estructura de la aplicación, el enrutamiento y la renderización del lado del servidor, mientras que Svelte gestionará la renderización eficiente de los componentes de la interfaz de usuario.

Para iniciar un nuevo proyecto puede inicializarlo en la línea de comandos:

npm create svelte@latest svelte-couchbase-real-time-chat
cd svelte-couchbase-real-time-chat

1 2	npm create svelte@latest svelte-couchbase-real-time-chat cd svelte-couchbase-real-time-chat

La herramienta CLI le ofrecerá varias opciones. Responda con las siguientes opciones:

- Proyecto Esqueleto: Seleccione sí empezar con una estructura básica del proyecto.
- Texto mecanografiado: Seleccione no por ahora para simplificar las cosas.
- ESLint: Seleccione sí para incluir linting, que ayuda a mantener la calidad del código.
- Más bonito: Seleccione sí para el formato del código.
- Dramaturgo: Seleccione no a menos que planee escribir pruebas de extremo a extremo desde el principio.

A continuación, instale las dependencias ejecutando npm instalar desde la línea de comandos. Después de ejecutar estos comandos, tendrás un nuevo proyecto SvelteKit configurado y listo para funcionar.

Instalación de dependencias

A continuación, 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ón en tiempo real.

npm install -D tailwindcss postcss autoprefixer couchbase ws dotenv
npx tailwindcss init -p

1 2	npm install -D tailwindcss postcss autoprefixer couchbase ws dotenv npx tailwindcss init -p

¿Qué hace cada una de estas dependencias en tu aplicación?

- TailwindCSS es un framework CSS que facilita la creación de aplicaciones con clases predefinidas.
- En SDK de Couchbase para Node.js introduce funcionalidad para interactuar con tus datos en Couchbase Capella usando métodos que abstraen gran parte del trabajo.
- ws es una pequeña librería Websocket para Node.js. Habilitará la funcionalidad de chat en tiempo real en la aplicación con Websockets.
- Por último, dotenv carga variables de entorno de un .env archivo en env.proceso facilitando la gestión de la configuración.

Configuración de TailwindCSS

Como se mencionó anteriormente, TailwindCSS introduce clases que puedes utilizar para definir el estilo de tu aplicación. Esto es útil si no eres un experto en frontend, o incluso si lo eres, si deseas acortar el proceso de construcción de aplicaciones elegantemente diseñadas. Para utilizar TailwindCSS en tu proyecto Svelte, sigue estos pasos:

Configure tailwind.config.js

Actualizar el tailwind.config.cjs para especificar las fuentes de contenido. Esto garantiza que Tailwind CSS pueda eliminar los estilos no utilizados de tu compilación de producción, haciéndola más eficiente.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */

module.exports = {

content: ['./src/**/*.{html,js,svelte,ts}'],

theme: {

extend: {},

plugins: [],

}

Añadir directivas CSS de Tailwind

Crear o actualizar el src/app.css para incluir las directivas CSS de Tailwind. Estas directivas cargan los estilos base, de componentes y de utilidades de Tailwind.

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;

@tailwind components;

@tailwind utilities;

Incluya el CSS en su proyecto Svelte

Abra o cree el src/routes/+layout.svelte e importar el archivo CSS. Esto asegura que los estilos de Tailwind estén disponibles en toda tu aplicación.

<script>
  import "../app.css";
</script>

<slot />

import "../app.css";

</script>

Ahora que has completado estos pasos, TailwindCSS se ha inicializado correctamente en tu aplicación. Estás listo para pasar a configurar Couchbase Capella y construir el backend para tu aplicación de chat.

Configuración de Couchbase Capella

Creación de un clúster

Registrarse y probar Couchbase Capella es gratuito y, si aún no lo ha hecho, puede hacerlo accediendo a nube.couchbase.com y creando una cuenta con tus credenciales de GitHub o Google, o creando una cuenta nueva con una combinación de dirección de correo electrónico y contraseña.

Una vez que lo haya hecho, desde el panel de control de Capella, creará su primer clúster. Para los fines de este tutorial, vamos a llamarlo SvelteChatApp.

El resumen de su nuevo clúster se presentará 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á en AWS.

Una vez creado el clúster, debe crear un archivo cubo. A cubo 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ía de los desarrolladores. Puedes nombrar tu bucket como quieras. Sin embargo, para los propósitos de este tutorial, vamos a llamar a este bucket svelte_chat_app_messages.

Ahora que has creado tanto tu base de datos como tu bucket, estás listo para crear tus credenciales de acceso a la base de datos y obtener tu URL de conexión que usarás en tu función Lambda.

Obtención de datos de conexión

Los detalles de conexión son esenciales, ya que los utilizarás en tu aplicación para establecer una conexión con tus datos de Couchbase e interactuar con ellos. Navega hasta el archivo Conectar en el cuadro de mandos de Capella y tome nota de la sección Cadena de conexión.

A continuación, haga clic en el botón Acceso a bases de datos en la sección dos. En esa sección, crearás las credenciales (un nombre de usuario y una contraseña) que tu aplicación utilizará para autenticarse con la base de datos. Puedes limitar las credenciales al bucket específico 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.

Una vez que haya terminado, el último paso en esta parte del proceso es añadir su nueva cadena de conexión y las credenciales de conexión a su aplicación como variables de entorno.

Configuración de variables de entorno

En un entorno de producción, almacenará sus credenciales y otra información confidencial para su aplicación en un formato seguro. Diferentes proveedores de nube tienen diferentes caminos para almacenar información sensible, y usted debe seguir el procedimiento definido por el proveedor de nube que está utilizando, ya sea AWS, Google Cloud, Azure, Netlify, Vercel o cualquier otro. Para nuestros propósitos, estás añadiendo tus credenciales a un archivo .env en la carpeta raíz de su aplicación. La dirección dotenv lee esas credenciales desde allí y las carga en tu aplicación.

# .env
COUCHBASE_BUCKET=your_bucket_name
COUCHBASE_CONNECTION_STRING=your_connection_string
COUCHBASE_USER=your_username
COUCHBASE_PASSWORD=your_password

# .env

COUCHBASE_BUCKET=your_bucket_name

COUCHBASE_CONNECTION_STRING=your_connection_string

COUCHBASE_USER=your_username

COUCHBASE_PASSWORD=your_password

Ya está. Tu cluster de Couchbase está configurado y listo para ser usado. En este punto, estás listo para construir la aplicación. Empecemos con el servidor backend con Nodejs y luego pasemos al frontend con Svelte.

Construir el backend con Node.js

Con nuestro entorno de desarrollo configurado, es hora de construir el backend para nuestra aplicación 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ón en tiempo real.

Creación de servidor.cjs

En primer lugar, vamos a crear un archivo llamado server.cjs que servirá como punto de entrada para nuestro backend.

1. Cree servidor.cjs:
  En el directorio raíz de su proyecto, cree un nuevo archivo llamado servidor.cjs.
2. Configuración de Express y dependencias:
  Utilizaremos Express para nuestro framework de servidor, el SDK de Couchbase para las operaciones de base de datos, WebSocket para la comunicación en tiempo real y dotenv para la gestión de variables de entorno. Añada el siguiente código a servidor.cjs:

const express = require('express');
const couchbase = require('couchbase');
const { createServer } = require('http');
const { WebSocketServer } = require('ws');
const dotenv = require('dotenv');

dotenv.config();

const app = express();
const server = createServer(app);
const wss = new WebSocketServer({ server });

const express = require('express');

const couchbase = require('couchbase');

const { createServer } = require('http');

const { WebSocketServer } = require('ws');

const dotenv = require('dotenv');

dotenv.config();

const app = express();

const server = createServer(app);

const wss = new WebSocketServer({ server });

Conexión a Couchbase

A continuación, configuraremos la conexión a Couchbase Capella. Asegúrate de que tu archivo .env contiene los detalles de conexión correctos. Añade el siguiente código a servidor.cjs para conectarse a Couchbase:

let cluster, bucket, collection;

async function connectToCouchbase() {
    try {
        console.log('Connecting to Couchbase...');
        const clusterConnStr = process.env.COUCHBASE_CONNECTION_STRING;
        const username = process.env.COUCHBASE_USER;
        const password = process.env.COUCHBASE_PASSWORD;
        const bucketName = process.env.COUCHBASE_BUCKET;
      
        cluster = await couchbase.connect(clusterConnStr, {
          username: username,
          password: password,
          configProfile: 'wanDevelopment',
        });      
        bucket = cluster.bucket(bucketName);
        collection = bucket.defaultCollection();
        
        console.log('Connected to Couchbase successfully.');
    } catch (error) {
        console.error('Error connecting to Couchbase:', error);
        process.exit(1);
    }
}

connectToCouchbase();

let cluster, bucket, collection;

async function connectToCouchbase() {

try {

console.log('Connecting to Couchbase...');

const clusterConnStr = process.env.COUCHBASE_CONNECTION_STRING;

const username = process.env.COUCHBASE_USER;

const password = process.env.COUCHBASE_PASSWORD;

const bucketName = process.env.COUCHBASE_BUCKET;

cluster = await couchbase.connect(clusterConnStr, {

username: username,

password: password,

configProfile: 'wanDevelopment',

});

bucket = cluster.bucket(bucketName);

collection = bucket.defaultCollection();

console.log('Connected to Couchbase successfully.');

} catch (error) {

console.error('Error connecting to Couchbase:', error);

process.exit(1);

}

connectToCouchbase();

Esta función se encarga de la conexión con Couchbase, asegurándose de que todos los parámetros necesarios están correctamente configurados. Todo lo que queda para nuestro backend es crear el servidor websocket para manejar el envío y recepción de nuevos mensajes de chat.

Configuración del servidor Websocket

La funcionalidad de servidor Websocket también se añade a la aplicación servidor.cjs archivo. El servidor emitirá todos los mensajes nuevos para que los reciba el frontend de la aplicación, y enviará todos los mensajes recién creados a Couchbase para que los guarde en el bucket que has creado.

wss.on('connection', (ws) => {
    console.log('New WebSocket connection established.');
    ws.on('message', async (message) => {
        try {
            const messageString = message.toString();
            console.log('Received message:', messageString);
            // Save message to Couchbase
            const id = `message::${Date.now()}`;
            await collection.upsert(id, { text: messageString });
            console.log('Message saved to Couchbase:', id);

            // Broadcast message
            wss.clients.forEach((client) => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send(messageString);
                    console.log('Broadcasted message to client:', messageString);
                }
            });
        } catch (error) {
            console.error('Error handling message:', error);
        }
    });
});

server.listen(3000, () => {
    console.log('Server started on https://localhost:3000');
});

wss.on('connection', (ws) => {

console.log('New WebSocket connection established.');

ws.on('message', async (message) => {

try {

const messageString = message.toString();

console.log('Received message:', messageString);

// Save message to Couchbase

const id = `message::${Date.now()}`;

await collection.upsert(id, { text: messageString });

console.log('Message saved to Couchbase:', id);

// Broadcast message

wss.clients.forEach((client) => {

if (client.readyState === WebSocket.OPEN) {

client.send(messageString);

console.log('Broadcasted message to client:', messageString);

}

});

} catch (error) {

console.error('Error handling message:', error);

}

});

server.listen(3000, () => {

console.log('Server started on https://localhost:3000');

});

Tenga en cuenta que antes de enviar el mensaje a Couchbase, primero debe convertir el mensaje en un archivo Cadena ya que por defecto se recibe como búfer de datos binarios. La conversión a Cadena se consigue llamando a la función toString() sobre el mensaje. La nueva función messageString contiene ahora los datos en formato legible tanto para enviarlos a Couchbase como para renderizarlos en la aplicación.

Ese es todo el backend de tu nueva aplicación de chat en tiempo real. Sin embargo, por muy bueno que sea cualquier backend para una aplicación 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.

Creación de la interfaz con Svelte

Una vez configurado el backend, es hora de crear el frontend de nuestra aplicación de chat en tiempo real con Svelte. Aprovecharás los puntos fuertes de Svelte para crear una interfaz de chat dinámica y con capacidad de respuesta.

Creación de la interfaz de chat

Crear el componente Svelte
En tu proyecto SvelteKit, crea un nuevo archivo llamado +página.esbelta en el src/rutas directorio. Este archivo servirá como componente principal de nuestra interfaz de chat.

touch src/routes/+page.svelte

1

touch src/routes/+page.svelte

Establecer la estructura básica
Abrir +página.esbelta y configurar la estructura HTML básica con clases TailwindCSS para el estilo:

<script>
  import { onMount } from 'svelte';

  let messages = [];
  let newMessage = '';

  let ws;

  onMount(() => {
    ws = new WebSocket('ws://localhost:3000');

    ws.onmessage = (event) => {
      messages = [...messages, event.data];
    };

    ws.onopen = () => {
      console.log('WebSocket connection opened');
    };

    ws.onclose = () => {
      console.log('WebSocket connection closed');
    };
  });

  function sendMessage() {
    ws.send(newMessage);
    newMessage = '';
  }
</script>

<div class="container mx-auto p-4">
  <h1 class="text-2xl mb-4">Chat Application</h1>
  <div class="border p-4 mb-4 h-64 overflow-y-scroll">
    {#each messages as message}
      <div>{message}</div>
    {/each}
  </div>
  <input
    type="text"
    bind:value={newMessage}
    class="border p-2 w-full mb-2"
    placeholder="Type a message"
  />
  <button on:click={sendMessage} class="bg-blue-500 text-white p-2 w-full">Send</button>
</div>

import { onMount } from 'svelte';

let messages = [];

let newMessage = '';

let ws;

onMount(() => {

ws = new WebSocket('ws://localhost:3000');

ws.onmessage = (event) => {

messages = [...messages, event.data];

};

ws.onopen = () => {

console.log('WebSocket connection opened');

};

ws.onclose = () => {

console.log('WebSocket connection closed');

};

});

function sendMessage() {

ws.send(newMessage);

newMessage = '';

}

</script>

<h1 class="text-2xl mb-4">Chat Application</h1>

{#each messages as message}

<div>{message}</div>

{/each}

</div>

<input

type="text"

bind:value={newMessage}

class="border p-2 w-full mb-2"

placeholder="Type a message"

</div>

En <script> del ejemplo de código anterior inicializa Websocket y gestiona los mensajes, tanto de envío como de recepción. En onMount asegura que la conexión Websocket se establece cuando se inicializa el componente. La reactividad de Svelte actualiza automáticamente el DOM cada vez que se activa la función mensajes para que los nuevos mensajes se muestren en tiempo real. Con esto, tu frontend ya está completo.

¡Lo has conseguido! Has construido una aplicación de chat completa que permite la comunicación en tiempo real utilizando el rendimiento, la flexibilidad y la adaptabilidad tanto de Svelte como de Couchbase para ofrecer una experiencia óptima a tus usuarios. Sí, esta es una implementación bastante simple, sin embargo, proporciona el esqueleto para que puedas construir aplicaciones en tiempo real aún más amplias y complejas. El potencial sólo está limitado por tu imaginación.

¿Quieres intentarlo? Pongamos en marcha tu aplicación y empecemos a chatear.

Ejecutar la aplicación

Para ejecutar tu aplicación, inicializarás tanto el servidor backend Node.js como el frontend SvelteKit. En primer lugar, vamos a iniciar el backend desde tu terminal:

node server.cjs

1	node server.cjs

A continuación, inicie el frontend en una nueva ventana de terminal:

npm run dev

1	npm run dev

Ahora, navegue en su navegador hasta https://localhost:5173 ¡y empieza a chatear!

Puedes abrir varias pestañas del navegador para simular varios usuarios o utilizar un servicio como ngrok para compartir la aplicación con tus amigos y chatear en tiempo real con ellos.

Conclusión

En este tutorial has aprendido lo rápido que puedes crear una aplicación 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ón de segundos.

Hay muchas razones por las que Svelte está creciendo rápidamente en admiración 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ás. No hay necesidad de definir esquemas complicados, no hay necesidad de añadir más dependencias más adelante si desea implementar el almacenamiento en caché de datos o capacidades de búsqueda, todo está integrado con Couchbase y viene directamente de la caja.

La única pregunta que queda es: ¿qué construirá después?

Empiece gratis con Couchbase Capella.

Ben Greenberg, Desarrollador Evangelista Senior

Comparte este artículo

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

Rápido y sincronizado con Svelte y Couchbase