Número de usuarios conectados a la Web

SignalR nos permite conocer el numero de usuarios conectados a una aplicación Web.

Como funciona

SignalR nos ofrece eventos para registrar conexiones o desconexiones al Hub.

  • Al iniciar una conexión $.connection.hub.start(); al iniciar nuestra pagina Web, se dispara el evento OnConnected.
  • Al parar una conexión $.connection.hub.stop(); al cerrar nuestra pagina Web; se dispara el evento OnDisconnected.
  • Si cerramos el navegador a los 30 segundos por defecto se dispara el evento OnDisconnected.

En estos eventos:

  • En el evento OnConnected añadimos la conexión (ConnectionId) en una lista de Usuarios conectados.
  • En el evento OnDisconnected eliminamos la conexión (ConnectionId) de la lista de Usuarios conectados.

public class KnowUserHub : Hub
{
        /// <summary>
        /// The list of users connected.
        /// </summary>
        public static List<string> Users = new List<string>();

        /// <summary>
        /// The OnConnected event.
        /// </summary>
        public override System.Threading.Tasks.Task OnConnected()
        {
            string clientId = GetClientId();

            if (Users.IndexOf(clientId) == -1)
            {
                Users.Add(clientId);
            }
            return base.OnConnected();
        }

        /// <summary>
        /// The OnReconnected event.
        /// </summary>
        public override System.Threading.Tasks.Task OnReconnected()
        {
            string clientId = GetClientId();
            if (Users.IndexOf(clientId) == -1)
            {
                Users.Add(clientId);
            }

            return base.OnReconnected();
        }

        /// <summary>
        /// The OnDisconnected event.
        /// </summary>
        public override System.Threading.Tasks.Task OnDisconnected()
        {
            string clientId = GetClientId();

            if (Users.IndexOf(clientId) > -1)
            {
                Users.Remove(clientId);
            }

            return base.OnDisconnected();
        }

        /// <summary>
        /// Get's the currently connected Id of the client.
        /// This is unique for each client and is used to identify
        /// a connection.
        /// </summary>
        /// <returns>The client Id.</returns>
        private string GetClientId()
        {
            return Context.ConnectionId;
        }

}

Para conocer el número de usuarios conectados; podemos obtenerlo fácilmente ;-).

   var userCount = KnowUserHub.Users.Count;
Publicado en SignalR | Etiquetado , , | Deja un comentario

Instalación de WordPress en Windows

WordPress es el gestor de contenidos que usa este blog. La instalación de WordPress requiere de los siguientes prerequisitos:

  • El motor de ejecución de código, en nuestro caso VC++ Visual Studio 2012 (VC11)
  • Un servidor de HTTP, en nuestro caso Apache 2.4
  • PHP como servidor de Aplicaciones, en nuestro caso PHP 5.6
  • MySQL como base de datos, en nuestro caso MySQL 5.6.20

Tenemos disponibles diferentes instaladores que nos permiten instalar fácilmente WordPress:

Pero no permiten la granularidad de instalar las versiones especificas de los componentes, que normalmente no coinciden con la existente en nuestro hosting. En la presente entrada describiremos los pasos necesarios para la instalación de los prerequisitos y WordPress paso a paso.

1.- Instalación VC++ Visual Studio 2012 (VC11)

2.- Instalación Apache 2.4

También es factible instalar la WordPress sobre un Internet Information Server (IIS).

  • 1.- Descargar la versión compilada httpd-2.4.10-win32-VC11.
  • 2.- Descomprimir el contenido en c:\apache24.
  • 3.- Asignar el parámetro ServerName del httpd.config ubicado en C:\Apache24\conf.
    ServerName localhost
    
  • 4.- Instalar el servicio de Apache 2.4. Para esto se abre la ventana de Command(cmd) como administrador y se ejecuta el siguientes los siguientes comandos.
    cd c:\apache24\bin
    httpd -k install
    
  • 5.- Insertar un enlace directo de c:\apache24\bin\ApacheMonitor en C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup. Esto nos creara en la area de iconos y notificaciones un acceso para informar de/iniciar/parar el servicio de Apache.
  • 6.- Probar el servicio (con el servicio iniciado). Poner en navegador http://localhost

3.- Instalar Php 5.6

  • 1.- Descargar el paquete en VC11 x86 Thread Safe. Apache sólo soporta la versión Thread Safe. En nuestro caso, hemos utilizado las versiones de 32 bits. La causa es que PHP en 64 bits tan solo esta disponible en modo experimental.
  • 2.- Descomprimir en c:\php
  • 3.- Crear el fichero php.ini a partir de php.ini-development o php.ini-productionen el directorio c:\php.
  • 4.- Añadir en el path de la maquina el directo c:\php.
  • 5.- Añadir al final del fichero httpd.config de Apache.
    LoadModule php5_module "c:/php/php5apache2_4.dll"
    AddHandler application/x-httpd-php .php
    PHPIniDir "c:/php"
    
  • 6.- Añadir la página por defecto de php (index.php) en el párametro DirectoryIndex del httpd.config de Apache la página por defecto de php.
    DirectoryIndex index.html index.php
    
  • 7.- Crear en el directorio c:\apache24\htdocs la pagina test.php con el siguiente contenido.

<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php phpinfo(); ?>
</body>
</html>

4.- Instalar MySQL 5.6

  • 1.- Descargar el MySQL Installer y lo ejecutamos.

    Configuración Asistente MySql 1/3

    Configuración Asistente MySql 2/3

    Configuración Asistente MySql 2/3

    Configuración MySql Asistente 3/3

    Configuración MySql Asistente 3/3

  • 2.- En el php.ini descomentamos la siguiente parámetro extension_dir = “ext”.
    ; Directory in which the loadable extensions (modules) reside.
    ; http://php.net/extension-dir
    ; extension_dir = "./"
    ; On windows:
    extension_dir = "ext"
    
  • 3.- En el php.ini descomentamos las extensiones de php_mbstring.dll, php_mysql.dll y php_mysqli.dll.
    ;extension=php_ldap.dll
    extension=php_mbstring.dll
    ;extension=php_exif.dll      ; Must be after mbstring as it depends on it
    extension=php_mysql.dll
    extension=php_mysqli.dll
    ;extension=php_oci8_12c.dll  ; Use with Oracle Database 12c Instant Client
    ;extension=php_openssl.dll
    
  • 4.- Descargar el phpMyAdmin
  • 5.- Descomprimir el paquete descargado en c:\apache24\htdocs\phpmyadmin. Esta aplicación permite interactuar con el servidor mediante una aplicación web (utilizada normalmente por los servicios de hosting).
  • 6.- Poner en el navegador http://localhost/phpmyadmin.
  • 7.- Crear la Base de Datos. En el menu de Base de Datos, introducir el nombre de la base de datos y pulsar en botón de Crear.

    Creación BD WordPress

    Creación BD WordPress

5.- Instalación de WordPress

  • 1.- Descargar WordPress en http://wordpress.org/
  • 2.- Descomprimir el contenido en C:\Apache24\htdocs\wordpress.
  • 3.- Navegar a http://localhost/wordpress.
  • 4.- Introcudir el nombre de base de datos que creamos y los parámetros de conexión al MySQL.

    Asistente WordPress 3

    Asistente WordPress 3

  • 5.- Introducimos el Sitio a crear, el usario y password de WordPress para acceder al Sito
Asistente WordPress 5

Asistente WordPress 5

Y finalmente ya tenemos WordPress instalado!!!

Publicado en Base de Datos | Etiquetado , | Deja un comentario

SignalR: Mantener activa siempre la comunicación

En un anterior entrada describí SignalR. SignalR permite la comunicación fluida entre un navegador Web y un Servidor. En esta entrada vamos describir como proceder cuando se producen errores de conectividad entre el Navegador y el Servidor.

Introducción arquitectura de comunicación en SignalR

Cuando se produce un fallo de conectividad; SignalR intenta restablecer la comunicación en varias ocasiones (Reconexión). Si persiste el fallo; finalmente finaliza la comunicación (Desconexión). Por defecto se realizan 3 reintentos en 30 segundos. El número de reintentos y el tiempo de timeout es configurable (con las propiedades DisconnetTimeout and KeepAlive). SignalR dispone de eventos tanto en la parte cliente como en la servidor. Los eventos de reconexión se producen cuando se restaura la comunicación perdida y los eventos de desconexión cuando se da por finalizada la comunicación.

  • En la parte Servidor:
    • OnReconnected()
    • OnDisconnected()
  • En la parte Cliente:
    • $.connection.hub.reconnected
    • $.connection.hub.disconnected

En este articulo, se explica la más a fondo la arquitectura de comunicación de SignalR.

Problema

Hay ocasiones en que se produce una caída de conectividad durante un largo periodo de tiempo; por ejemplo:

  • Caída de la linea.
  • Reinicio de la Servidor o Servicio Web.
  • Parada programa del Servidor por mantenimiento/actualización.

Estas caídas de conectividad provocarán que se produzca la desconexión. La idea es restablecer la comunicación tan pronto vuelva a estar operativa la conectividad sin necesidad de recargar la pagina.

Solución

La manera para realizarlo es volver a iniciar una nueva conexión en el evento de desconexión. En nuestro caso a los 10 segundos de producirse la desconexión; se intentará restaurarla.

   $.connection.hub.start().done(function() { $("#status").text('Connected'); });
        $.connection.hub.disconnected(function() {
		$("#status").text('Disconnected');
        setTimeout(function() {
                $.connection.hub.start().done(function() {  $("#status").text('Connected'); });
            }, 10000);
        });
Publicado en SignalR | Etiquetado | Deja un comentario

Detectar navegador IE

Empezaremos el artículo no recomendandolo; usar la técnica de detectar el navegador para habilitar/deshabilitar funcionalidades es una mala practica. En su lugar es recomendable utilizar librerías que nos detectan las funcionalidades y no dependen del navegador. De esta manera nos aislamos de las mejoras y cambios que puedan surgir con nuevas versiones de los navegadores. En este caso recomendamos el uso de Modernizr.

Por ejemplo, el navegador soporta vídeo en formato h264

if (Modernizr.video.h264 == "") {
    // dosen't support h264
}

En alguna ocasión la librería no nos retorna información sobre una determinada funcionalidad. Por ejemplo si el navegador soporta Active X. A continuación se describen diferentes tácticas:

1.- Tags de Comentarios HTML

Internet Explorer hasta su versión 9 incorpora tags condicionales en los comentarios .

<!--[if !IE]><!-->
This text dosen't view on other Browers and Internet Explorer Browser IE10 or greater
<!--<![endif]-->

<!--[if IE]>
This text only view on Internet Explorer Browser IE9 and earlier
<![endif]-->

2.- Analizar el userAgent del object navigator del Navegador

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');  //IE10 and earlier
    var trident = ua.indexOf('Trident/'); //IE11
 if ((msie>0) || (trident>0))
     alert('Show on Internet Explorer');
 else 
     alert('Show on other Browser');

JQuery hasta la versión 1.9 tenia una llamada en su API para detectarlo Drecated en jquery 1.9 ($.browser.msie). Pero ya esta deprecada y no funciona para IE11.

3.- Detectar si soporta Active X (solo soportado por Internet Explorer)

        var isIE = "ActiveXObject" in window;    
        if (isIE)
           alert('Show on Internet Explorer');
        else
           alert('Show on other Browser');

En Servidor hay un método en .NET para determinar si el Active X esta soportado (Request.Browser.ActiveXControls) pero para IE11 no funciona.

Publicado en javascript, Uncategorized | Etiquetado | Deja un comentario

Proveedores de mapas estáticos

Existen diferentes proveedores que ofrecen una api para obtener mapas que podemos usar en nuestras aplicaciones; vamos a comentar cuatro de ellos:

Ejemplo de Uso:

A nivel básico disponemos de un asistente para generar generar urls de los diferentes proveedores (sin necesidad de entrar en las apis de los proveedores) ;-).

Google MapsGoogleMaps

Google Maps ofrece un servicio mediante en el cual realizando una petición HTTP nos retorna un mapa. Este servicio se describe Static Maps API V2.
El mapa obtenido como máximo es de 1280×1280 pixeles (resultado de multiplicar el tamaño por la escala). Hay una versión professional Google Maps For Business que permite obtener un mapa de 2048×2048 pixeles.

API scale=1 scale=2 scale=4
Free 640x640 640x640(returns 1280×1280 pixels) Not available.
Google Maps API for Business 2048x2048 1024x1024(returns 2048×2048 pixels) 512x512(returns 2048×2048 pixels)

Ejemplo de Uso:

En nuestro caso realizamos la llamada a la Api configurando los siguientes parámetros en el request de la Url:

  • center: latitud y logitud.
  • zoom: zoom de la Imagen.
  • size: tamaño de la imagen.
  • scale: escalado de la imagen.
  • maptype: tipo de mapa.
  • formato: formato de la imagen (por defecto png).

http://maps.googleapis.com/maps/api/staticmap?center=41.3833,2.1833&zoom=14&scale=2&size=640×640&sensor=false&maptype=satellite&format=jpg
Mapa Google

Bing Maps BingMaps

De la misma manera Microsoft también nos ofrece un servicio mediante en el cual realizando una petición HTTP nos retorna un mapa. Este servicio se describe Bing Maps REST Services Static Map. En este caso nos hemos de dar de alta en el servicio; ya que no admite peticiones anónimas. Posee mayores limitaciones de uso a nivel libre.
El mapa obtenido como máximo es de 900×834 pixeles.

Ejemplo de Uso:

En nuestro caso realizamos la llamada a la api configurando los siguientes parámetros de la Url:

  • maptype: tipo de mapa (en la url). Por ejemplo Aerial para vista satélite.
  • latitud, longitud: (en la url).
  • zoom: zoom de la imagen (en la url).
  • mapsize: tamaño de la imagen (parámetro request de la url).
  • fmt: formato de la imagen (parámetro request de la url).
  • key: clave para peticiones

http://dev.virtualearth.net/REST/V1/Imagery/Map/Aerial/41.3833,2.1833/14?mapSize=900,834&fmt=jpeg&key=Ajqteq7Vn6Sapasq31fUPf57YzRUhU1WiYoEmhCN7OkAJdhB2cTf-JBfmKaC9BaC
Mapa Bing

Nokia Maps NokiaMaps

Funciona igual que los servicios previos con una petición REST HTTP que nos retorna un mapa. Este servicio se describe en el siguiente documentoMap Image API Developer’s Guide. En este caso nos hemos de dar de alta en el servicio; ya que no admite peticiones anónimas. Hay disponible una licencia libre; con limitaciones de uso.
El mapa obtenido admite tamaños grandes (por ejemplo 2048×2024) y sin logo del proveedor de la API. El proveedor de imágenes no es el mismo que en las anteriores api; en algunos caso parece menos perfilado y no tan amplio.

Ejemplo de Uso:

En nuestro caso realizamos la llamada a la Api configurando los siguientes parámetros en el request de la Url:

  • c: latitud y logitud del centro del mapa.
  • z: zoom de la Imagen.
  • h: altura de la imagen.
  • w: anchura de la imagen.
  • t: tipo de mapa (1 para vista satélite).
  • nodot: no muestre punto en el centro del mapa

http://image.maps.cit.api.here.com/mia/1.6/mapview?app_id=DemoAppId01082013GAL&app_code=AJKnXv84fjrb0KIHawS0Tg&c=41.3833,2.1833&h=2048&w=2048&z=15&nodot&t=1
Mapa Nokia

OpentStreetMaps OpenStreetMaps

Solo dispone proveedores de mapas de carreteras; es decir no hay vista de terreno. Hay una red de servidores disponibles; pero no esta asegurada su continuidad.

Ejemplo de Uso:

En nuestro caso realizamos la llamada a la Api configurando los siguientes parámetros en el request de la Url:

  • center: latitud y logitud del centro del mapa.
  • zoom: zoom de la Imagen.
  • size: tamaño de la Imagen.

http://staticmap.openstreetmap.de/staticmap.php?center=41.3833,2.1833&zoom=14&size=1024×1024
OpenStreetMap

Publicado en Maps, Uncategorized | Etiquetado , , | Deja un comentario

Primera Aplicación Sharepoint en Provider-Hosted (III)

En el anterior entrada configuramos la aplicación para desarrollo. En esta entrada vamos a desplegar la aplicación en un entorno de producción.

7.- Generamos un nuevo registro de Aplicación

  • 1.- Acceder a http://[Sharepoint Host]/_layouts/15/appregnew.aspx
  • 2.- Generar Id y Secret
  • 3.- Indicar el Host. El host es donde desplegaremos la parte web de la aplicación: Servidor, Website de Azure,….

8.- Generamos el paquete con la App para Sharepoint.

  • 1.- En el proyecto App; editamos el fichero AppManifest.xml.
  • 2.- Poner el Id generado en el Atributo ClientId del Path
  • 3.- Poner en el elemento StartPage del Path Properties el host donde desplegaremos la parte web en lugar de ~remoteAppUrl
  • 8GenerarApp

  • 4.- Publicamos el proyecto App, esto nos generará un fichero de paquete .app

9.- Desplegamos la App en el Catalogo de Aplicaciones y en un Site de Sharepoint.

  • 1.- Acceder a http://[Sharepoint Host]/sites/Apps
  • 2.-Vamos Aplicaciones para Sharepoint
  • 3.-Subimos en esta lista de Aplicaciones el fichero de paquete .app generado en el punto anterior.
  • 4.- Navegamos al Site Contents/Contenidos del Sitio del Site donde queremos incorporar la aplicación.
  • 5.- Seleccionamos Add App/Agregar Aplicación.
  • 6.- Seleccionamos From Your Organization/De Su Organización y pulsamos en nuestra App.

10.- Publicamos la Web en Servidor Web de Producción.

  • 1.- Poner el Id generado en el valor del Setting ClientId. y poner el Secret generado en el valor del Setting ClientSecret.
  • 2.- Publicamos el proyecto Web en nuestro servidor de Producción.
Publicado en SharePoint | Etiquetado , | Deja un comentario

Primera Aplicación Sharepoint en Provider-Hosted (II)

En el anterior entrada creamos el entorno de pruebas y el proyecto de la App. En esta entrada vamos a configurar la aplicación para poderla integrarla con el entorno de pruebas de Sharepoint y poderla ejecutar en local.

3.- Registrar la App en el Sharepoint

  • 1.- Acceder a http://[Sharepoint Host]/_layouts/15/appregnew.aspx
  • 2.- Generar Id y Secret
  • 3.- Indicar el Host. Si no se indica puerto automáticamente coge el 443 (https). En nuestro caso selecciono el localhost:44310; que es mi puerto de https en mi servidor local de IIS.
  • 4.- Crear el Registro
  • 3cNewAppOnSharepoint

4.- Vincular el proyecto App en el Registro previo del Sharepoint

  • 1.- En el proyecto App; editamos el fichero AppManifest.xml.
  • 2.- Poner el Id generado en el Atributo ClientId del Path AppPrincipal/RemoteWebApplication.
    1 VincularRegistroApp

5.- Vincular el proyecto Web en el Registro previo del Sharepoint

  • 1.- En el proyecto Web; editamos el ficheroWeb.config.
  • 2.- Poner el Id generado en el valor del Setting ClientId.
  • 3.- Poner el Secret generado en el valor del Setting ClientSecret.
    1 VincularRegistroWeb

6.- Ejecución en Visual Studio

En la pagina Default.aspx añadimos el texto Hello World. Al ejecutar la solución con F5. Automáticamente se publica la App en nuestro entorno de pruebas y solicita la ejecución de la App. La App nos redirige automáticamente a nuestra Web en el Servidor local.
EjecuciónLocal
Podemos poner breakpoins y a depurar ;-)

Continua en la siguiente entrada Primera Aplicación Sharepoint en Provider-Hosted (III)

Publicado en SharePoint | Etiquetado , , | 2 comentarios