Desktop Chat Application using the CEAN Stack & Electron

Así que estás interesado en crear una aplicación de chat de escritorio como Slack, pero no estás seguro de por dónde empezar. Slack fue muy abierto al decir que utilizaron Github's Electrón para construir la versión de escritorio de su software. Esto significa que Slack se desarrolló utilizando tecnologías web.

Vamos a ver cómo crear una aplicación de escritorio de chat en tiempo real que no es ni de lejos tan rica en funciones como Slack, pero te dará una perspectiva de cómo podrías expandirte hasta ese punto.

Requisitos previos

Aunque no requiere mucho, hay algunas cosas que necesitarás para tener éxito con lo que viene después:

Servidor Couchbase 4+
Gestor de paquetes de nodos (NPM)

Necesitamos Couchbase Server porque todos los mensajes de chat se almacenarán en caché en la base de datos después de ser enviados. Esto permite que todos los que se unan a la sala de chat puedan ver los mensajes anteriores. Esto es importante porque la gente puede unirse al chat más tarde que los demás y no queremos que se pierdan nada. El Node Package Manager (NPM) es necesario porque lo usaremos para instalar Angular 2 y Electron. Está disponible instalando Node.js.

Dicho esto, empecemos a diseñar nuestro proyecto.

Clonación del servidor Socket.io

Como sabrás, este no es el primer tutorial que escribo sobre el tema del chat en tiempo real utilizando la pila CEAN. En realidad escribí otros dos:

Para ahorrarnos algo de tiempo, vamos a utilizar el código del lado del servidor que desarrollamos en el primer tutorial de la pila CEAN, no en el tutorial de Ionic 2. Si aún no lo has hecho, te recomiendo que lo leas. Sin embargo, puedes obtener el código fuente en descargarlo desde GitHub, o ejecutando lo siguiente desde su Terminal (Mac y Linux) o Símbolo del sistema (Windows):


git clone https://github.com/couchbaselabs/cean-web-chat

git clonar https://github.com/couchbaselabs/cean-web-chat

Con el código del lado del servidor descargado, navegue en el proyecto utilizando su Símbolo del sistema o Terminal e instale todas las dependencias ejecutando:


npm install

npm instale

En este punto, el código del servidor de chat ya está listo.

Configuración de Couchbase

Dado que Couchbase se utilizará con la aplicación Node.js, necesitamos un bucket configurado y con permiso para utilizar consultas N1QL. Todo esto se explicó en el primer Tutorial de chat sobre la pila CEANpero sólo para refrescar, veámoslo de nuevo.

Instale una copia de Couchbase Server 4 y cree un bucket llamado web-chat que tiene habilitado el servicio de consultas. Como vamos a utilizar consultas N1QL necesitamos crear un índice primario. Esto se puede hacer usando el cliente Couchbase Query (CBQ). En Mac ejecuta lo siguiente desde un Terminal:


./Applications/Couchbase Server.app/Contents/Resources/couchbase-core/bin/cbq

./Aplicaciones/Couchbase Servidor.aplicación/Contenido/Recursos/couchbase-núcleo/papelera/cbq

Lo mismo se puede hacer en Windows utilizando el símbolo del sistema de la siguiente manera:


C:/Program Files/Couchbase/Server/bin/cbq.exe

C:/Programa Archivos/Couchbase/Servidor/papelera/cbq.exe

Con CBQ abierto, ejecute lo siguiente para crear un índice:


CREATE PRIMARY INDEX ON `web-chat` USING GSI;

CREAR PRIMARIO ÍNDICE EN `web-chat` USO DE GSI;

Couchbase Server ya está listo para funcionar.

Creación de un proyecto Electron

Nuestro proyecto Electron va a ser un montón de cortar y pegar cuando se trata de código. Esto se debe a que Electron prácticamente acepta cualquier aplicación web que le eches. Recuerda que tenemos una aplicación web muy adecuada dentro de nuestro proyecto de servidor Socket.io.

Crea un nuevo directorio, quizás en tu Escritorio, y llámalo chat de escritorio o lo que considere más apropiado. Navegue en el proyecto con su Terminal o Símbolo del sistema y ejecute lo siguiente:


npm init -y

npm init -y

Esto crea un NPM muy básico paquete.json en nuestro proyecto. Ahora necesitamos instalar todas las dependencias de nuestra aplicación de escritorio. Ejecute lo siguiente:


npm install angular2@2.0.0-beta.0 systemjs typescript --save
npm install electron-prebuilt --save-dev

npm instale angular2@2.0.0-beta.0 systemjs tipografía --guardar

npm instale electrón-preconstruido --guardar-dev

La primera instalación obtendrá todas nuestras dependencias de Angular 2. En el proyecto del lado del servidor, la interfaz de usuario de cara al cliente se hizo con Angular 2 y TypeScript. Haremos lo mismo aquí. La segunda instalación obtiene el binario de Electron.

Ahora abra el paquete.json que se encuentra en la raíz del proyecto e intercambia el archivo guiones parte con lo siguiente:


"scripts": {
  "start": "electron main.js"
},

"scripts": {

"inicio": "electron main.js"

Pronto veremos lo que eso significa, pero primero crea un main.js en la raíz del proyecto. Debe contener el siguiente código:


var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600});

    // and load the index.html of the app.
    mainWindow.loadURL('file://' + __dirname + '/public/index.html');

    // Emitted when the window is closed.
    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
});

var aplicación = requiere(aplicación); // Módulo para controlar la vida de la aplicación.

var BrowserWindow = requiere(ventana-navegador); // Módulo para crear la ventana nativa del navegador.

// Mantenga una referencia global del objeto ventana, si no lo hace, la ventana se

// se cerrará automáticamente cuando el objeto JavaScript sea recolectado.

var mainWindow = null;

// Salir cuando todas las ventanas estén cerradas.

aplicación.en(ventana-todo-cerrado, función() {

// En OS X es habitual que las aplicaciones y su barra de menú

// para permanecer activo hasta que el usuario salga explícitamente con Cmd + Q

si (proceso.plataforma != darwin) {

aplicación.abandone();

}

});

// Este método será llamado cuando Electron haya terminado

// inicialización y está listo para crear ventanas de navegación.

aplicación.en(listo, función() {

// Crear la ventana del navegador.

mainWindow = nuevo BrowserWindow({anchura: 800, altura: 600});

// y carga el index.html de la aplicación.

mainWindow.loadURL(archivo:// + __dirname + /público/index.html);

// Se emite cuando se cierra la ventana.

mainWindow.en(cerrado, función() {

// Dereferenciar el objeto ventana, normalmente se almacenan las ventanas

// en un array si tu app soporta multi ventanas, este es el momento

// cuando debe eliminar el elemento correspondiente.

mainWindow = null;

});

Lo anterior puede parecer familiar por dos razones. La primera es que lo tomé de un entrada anterior Escribí sobre Electron y dos, vino casi directamente de la documentación de Electron. Nuestra línea importante, sin embargo, es la siguiente:


mainWindow.loadURL('file://' + __dirname + '/public/index.html');

mainWindow.loadURL(archivo:// + __dirname + /público/index.html);

Esto significa que todo nuestro código Angular 2 estará en el directorio público empezando por el directorio index.html archivo.

Copie el público del directorio cean-web-chat que clonaste de GitHub, y colócalo en la raíz del proyecto Electron. Ya existe un index.html pero tenemos que cambiar algunas cosas. Ábralo y cambie el script caminos a los siguientes:

Hicimos esto porque nuestras rutas de biblioteca no están en el mismo lugar que estaban en la aplicación del lado del servidor.

Unas pocas cosas más que hacer antes de que estemos listos para verlo en acción. Abre el archivo public/app/default/default.ts y crear una nueva variable dentro de la clase como tal:


socketHost: string;

socketHost: cadena;

Esto debe hacerse dentro de la clase. Como ya no estamos en el mismo host que el servidor, necesitamos decirle a nuestro cliente de escritorio a qué host conectarse. Dentro del constructor, establece socketHost a lo que debería ser el anfitrión:


this.socketHost = "http://192.168.57.1:3000";

este.socketHost = "http://192.168.57.1:3000";

Nuestra petición HTTP en el constructor ya no es válida porque nuestro cliente no está incluido en el servidor. Necesitamos definir el host que acabamos de establecer. Se puede hacer así:


http.get(this.socketHost + "/fetch").subscribe((success) =&gt; {

http.consiga(este.socketHost + "/fetch").suscríbase a((éxito) => {

Finalmente, encuentra la línea donde defines tu objeto Socket.io. También necesita un host al que apuntar. Cámbialo para que se parezca a lo siguiente:


this.socket = io(this.socketHost);

este.enchufe = io(este.socketHost);

A estas alturas ya deberías estar bien.

Verlo en acción

Necesitarás dos Terminales abiertas para esto. La primera Terminal ejecutará el servidor Socket.io Node.js que se conecta a Couchbase Server. Ejecuta lo siguiente, con el proyecto GitHub como tu directorio de trabajo, para hacerlo:


node app.js

nodo aplicación.js

Si el servidor arrancó, entonces estás en buena forma. En la segunda Terminal, ejecute lo siguiente, con el proyecto Electron como directorio de trabajo:


npm start

npm iniciar

Recuerda que hicimos el iniciar dentro de nuestro paquete.json ¿Fichero? Así es como lo utilizamos.

Intenta enviar algunos mensajes. Deberían guardarse en Couchbase Server y si abres otro cliente o cargas el cliente de chat embebido del proyecto GitHub, podrás hacer un chat.

Conclusión

Acabas de ver cómo convertir una aplicación web existente en una aplicación de escritorio multiplataforma. Esta aplicación ofrecía chat en tiempo real utilizando tecnologías punteras como Angular 2, Couchbase, Socket.io y Node.js.

Si aún no lo has hecho, te recomiendo que le eches un vistazo a los posts anteriores que hice sobre el tema de Socket.io con Couchbase. Son buenas lecturas y pueden abrir la puerta a posibilidades para ti.

Nic Raboy, Defensor del Desarrollador, Couchbase

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

Todos los mensajes

Crear una aplicación de chat de escritorio utilizando la pila CEAN y Electron

Requisitos previos

Clonación del servidor Socket.io

Configuración de Couchbase

Creación de un proyecto Electron

Verlo en acción

Conclusión

Autor

Publicado por Nic Raboy, Defensor del Desarrollador, Couchbase

Dejar una respuesta Cancelar respuesta