Migrando el tres en raya: Azure SDK 2.4, SignalR 2.1.1, Windows 8.1


El año pasado escribí una serie de tres artículos donde explicaba cómo crear un juego de tres en raya para jugar online en tiempo real, desde el navegador y también desde una app Windows 8. Como la tecnología avanza muy rápido, al cabo de un mes de escribir el artículo el código ya no compilaba con los últimos SDK. Así que, ahora que estoy de vacaciones me he dedicado a procrastinar y a actualizar alguno de mis proyectos personales para no tener que hacer lo que me había propuesto :). Aquí os dejo los pasos a realizar para migrar, aunque podéis descargar directamente el nuevo paquete aquí.

Como primer paso, conviene tener Visual Studio 2013.3 instalado y actualizar el SDK de Windows Azure al último disponible (2.4 por ahora).

Una vez con nuestro entorno listo, al abrir el proyecto nos va a pedir que actualicemos el proyecto a la versión 2.4:

migrateto2_4

Tras compilar toda la solución, necesitaremos actualizar SignalR. En la versión inicial de este proyecto teníamos la versión 1.1.2 y ahora queremos actualizar a 2.1.1. Para abreviar vamos a utilizar la consola del Package Manager y vamos a actualizar todo el proyecto con esta complicada línea de comando:


Update-Package

Una vez actualizadas las referencias, ya estamos usando la última versión de SignalR y sus correspondientes dependencias como jQuery y OWin, pero para que funcione tendremos que realizar algunos cambios. Ahora SignalR utiliza el stack de OWin, así que tendremos que quitar el código de inicialización del Global.asax.cs:

protected void Application_Start(object sender, EventArgs e)
{
var hubConfiguration = new HubConfiguration();
hubConfiguration.EnableCrossDomain = true;
// Register the default hubs route: ~/signalr
RouteTable.Routes.MapHubs(hubConfiguration);

var sbConnectionString = CloudConfigurationManager.GetSetting(“ServiceBusConnectionString”);
GlobalHost.DependencyResolver.UseServiceBus(sbConnectionString, “TresEnRaya”);
}

El código de inicialización ahora va en una clase especial de Owin llamada Startup.cs:

startup_cs

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(TresEnRaya.Startup))]
namespace TresEnRaya
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

Si os fijáis bien, no hemos configurado la aplicación con CORS para que pueda funcionar la app de Windows 8. Para hacer esto mismo en Owin tenemos que descargar el módulo de CORS:

Install-Package -ProjectName TresEnRaya Microsoft.Owin.Cors

Y en la inicialización añadimos el soporte para CORS a SignalR:

app.MapSignalR().UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

Casi todo el código está listo, vamos a realizar un último cambio para facilitarnos un poco el desarrollo. Ahora el SDK de Azure trae un “Emulator Express” que no necesita elevación de privilegios, lo configuramos en las propiedades del proyecto TresEnRaya.Azure y establecemos ese mismo proyecto como proyecto de arranque:
emulator express

También tendremos que actualizar un poco el código de la página default.html, pues las referencias a los scripts han cambiado de versión:

<script src='Scripts/jquery-2.1.1.min.js'></script>
<script src='Scripts/jquery.signalR-2.1.1.min.js'></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src='/signalr/hubs'></script>
<script src='Scripts/tresenraya.js'></script>

Y ya podemos ejecutar la aplicación, no hace falta cambiar el código del hub ni nuestro código JavaScript, todo seguirá funcionando!

Windows 8.1

Para actualizar la aplicación Windows primero tenemos que actualizar a Windows 8.1, desde Visual Studio basta pulsar botón derecho y actualizar de versión:
retarget8_1

Como también hemos actualizado SignalR y jQuery en este proyecto, actualizamos default.html para que utilice las librerías correctas:

<script src='Scripts/jquery-2.1.1.min.js'></script>
<script src='Scripts/jquery.signalR-2.1.1.min.js'></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src='/js/hubs.js'></script>
<script src='js/tresenraya.js'></script>
<script src='/js/default.js'></script>

El hub que utilizamos en la aplicación de Windows 8.1 no se puede descargar dinámicamente, lo tenemos que descargar de nuestro localhost/signalr/hubs y luego actualizar la url de conexión del hub para poder probar nuestra app en local (más adelante, si subimos la aplicación al cloud hay que cambiar esta url):

signalR.hub = 
   $.hubConnection('http://localhost:11562/signalr',
                   { useDefaultPath: false });

Y con estos pequeños cambios ya tenemos la aplicación actualizada. Tenéis el código fuente en CodePlex.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s