2013-08-02 14 views
5

Ho visto post simili sul Web e nessuno mi ha suggerito di lavorare per me. Sono davvero di fronte alla scelta di scaricare l'uno o l'altro sembra a questo punto.Semplicemente non riesco a far funzionare SignalR (asp.net mvc4) e require.js insieme

Questa "Guida introduttiva a SignalR e MVC 4 Tutorial":

http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc-4

dice avete bisogno di due script include per rendere il lavoro signalR:

<!--Reference the SignalR library. --> 
    <script src="~/Scripts/jquery.signalR-1.0.1.js"></script> 
    <!--Reference the autogenerated SignalR hub script. --> 
    <script src="~/signalr/hubs"></script> 

Sono in perdita su come realizzare il secondo, lo script hub SignalR generato automaticamente, si verifica in require.js. A meno che manchi qualcosa, non sembra che ci sia una possibile sintassi require.js per l'inclusione di script autogenerati. Senza di essa si ottiene questo errore alla linea 159 di jquery.signalR-1.1.2.js:

"JavaScript errore di runtime: SignalR:. Errore hub di carico Assicurarsi riferimento gli hub è corretto, ad esempio"

Il codice a quel punto nel jquery.signalR sta facendo questo:

signalR.hub = { 
      start: function() { 
       // This will get replaced with the real hub connection start method when hubs is referenced correctly 
       throw new Error("SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. <script src='/signalr/hubs'></script>."); 
     } 
    }; 

qualcuno ha effettivamente fatto accadere questa cosa lo script generato automaticamente tramite require.js?

State studiando questo un po 'di più. Vorrei aggiungere qualche dettaglio:

Sto usando questo approccio - Strutturare applicazioni lato client scalabili: (http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/) per rendere una struttura più scalabile. Seconda parte della serie "Permetti ai moduli di utilizzare più file e una struttura di cartelle logica" http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/ mi ha diviso il mio codice signalr effettivo in un modulo di chat separato Marionette (separato dal mio file app.js principale) per ottenere una struttura di file migliore. Mi piace molto questo approccio. Il resto del mio progetto è impostato in questo modo e sta davvero mostrando benefici quando si tratta di trovare il codice. Penso che la divisione extra sia dove sono bloccato. Non riesco a ottenere quella seconda dipendenza, lo script autogenerato, in quel file del modulo di chat separato. Sto ancora studiando questo, ma mi sembra questo a questo punto. require.js ottiene la dipendenza nel mio burattino app:

require(["marionette","handlebars", "signalr", "signalr.hubs"], function (Marionette) { 
     window.App = new Marionette.Application(); 

     App.addRegions({ 
      headerRegion: "#header", 
      contentRegion: "#content", 
      footerRegion: "#footer", 
     });    

     require(["modules/main/loader", "modules/chat/loader"], function() { 
      App.start(); 
     }); 
    }) 

se voglio parlare che la dipendenza a farsi strada ulteriormente in app, nel modulo di chat in un altro file?

Qualcosa come?

define(dependencies, 
     function() { 
      App.module("ChatModule", function (ChatModule, App, Backbone, Marionette, $, _, "signalr.hubs", "signalr.hubs") { 

      // SignalR Proxy created on the fly 
       var chat = $.connection.chatHub; 

       // Start the connection 
       $.connection.hub.start(); 

    //more chat code... 

Un aggiornamento:

La risposta qui sotto funziona nel mio ambiente dev. Ma non funziona quando pubblico il codice su un vero server di produzione.

Quando il codice viene pubblicato su un server di produzione reale (IIS 6.1 su Windows Server Enterprise 2008 R2), la console del browser mostra ancora una volta "404" per il riferimento generato automaticamente.

In particolare, la console mostra "?" viene aggiunto al percorso di riferimento prima di ".js", come questo ...

http://mydomain.com/myapp/Scripts/application/signalr/hubs?.js ...

Provato a prendere il "?" fuori ma poi rimuove il nome della mia app dal percorso, in questo modo ...

http://mydomain.com/signalr/hubs.js.

Penso che quello che otterrebbe me non è il primo, senza il "?", Come ...

http://mydomain.com/myapp/Scripts/application/signalr/hubs.js

non sto solo vedendo come fare che questo accada.

aggiornamento finale:

ultimo pezzo del puzzle per i server di produzione è la directory virtuale del sito. Ecco il codice finale che ha funzionato per me. Grazie Raciel R per il vostro aiuto:

requirejs.config({   
     paths: { 
      //core 
      "jquery": "jquery-1.9.1", 

      "signalr": "jquery.signalR-1.1.2", 
      "signalr.hubs": "/productionservervirtualdirectory/signalr/hubs?" 
     }, 
     shim: { 
      "jquery": {exports: "$"},    
      "signalr": { deps: ["jquery"] }, 
      "signalr.hubs": { deps: ["signalr"] } 
     }); 
    //Then all you have to do is to make signalr.hubs required in your modules. Ie: 

    require(["signalr.hubs"], function(){ 
     //your code here 
    }); 
+0

Hai chiamato MapHubs sul server? Vedi domanda: http://stackoverflow.com/questions/16235175/404signalr-hubs-for-signalr-chat-application/16242594#16242594, è una specie di rovescio di quello che stai incontrando, ma dovrebbe rispondere alla tua domanda. –

+0

Sì. Fatto. Niente da fare. Il problema sembra essere in particolare la mancanza di una sintassi require.js per rendere questo secondo riferimento - quello per lo script hub SignalR generato automaticamente. Vedo persone che fanno vari tentativi con la sintassi. Li ho provati tutti, ma nessuno di loro ha funzionato per me. Quello sotto non ha funzionato neanche per me. – Robert

risposta

11
requirejs.config({   
    paths: { 
     //core 
     "jquery": "jquery-1.9.1", 

     "signalr": "jquery.signalR-1.1.2", 
     "signalr.hubs": "/signalr/hubs?" 
    }, 
    shim: { 
     "jquery": {exports: "$"},    
     "signalr": { deps: ["jquery"] }, 
     "signalr.hubs": { deps: ["signalr"] } 
    }); 

Poi tutto quello che dovete fare è quello di rendere signalr.hubs richiesti nei moduli. Vale a dire:

require(["signalr.hubs"], function(){ 
    //your code here 
}); 
+0

Grazie. Niente da fare. Penso che molto potrebbe funzionare. Ho ancora una ruga che ho aggiunto al mio post originale. Sto usando questo approccio - Strutturare applicazioni client scalabili: (http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/). La seconda parte di quella serie mi ha spaccato il mio attuale signalr code in un modulo separato di chat di Marionette. Penso che sia dove sta fallendo. Non riesco a ottenere quella seconda dipendenza, lo script autogenerato, in quel modulo di chat separato. Vedi la mia modifica. – Robert

+2

Indipendentemente dall'organizzazione del codice lato client e dalla tecnologia che si sta utilizzando dovrebbe funzionare. La parte difficile qui (ho affrontato lo stesso problema quando si integra signalr) è il file generato automaticamente, che può essere aggirato aggiungendo il? alla fine per evitare require.js di fare casini con esso. Ho anche provato plugin noext ma non ho avuto fortuna. L'approccio che ho suggerito mi è stato suggerito da un altro SO. Gli shimi ei percorsi di Require.js sono davvero potenti per descrivere le dipendenze tra i moduli non scritti nel modo require.js, e per i propri moduli dovresti essere ok semplicemente definendoli correttamente. –

+0

Vorrei provare ad andare da uno scenario semplice e introdurre più complessità lentamente in modo da ottenere l'idea di dove le cose stanno fallendo. SignalR può funzionare con Require.js, infatti ho entrambi lavorato in un progetto. Credo che risponda alla tua domanda. –

2

ho creato RequireJS con successo utilizzando la soluzione di @ Raciel-r ma ero ancora avendo problemi con altri moduli JavaScript come karma che sono stati confusi anche dal proxy dinamica. Ho convertito il proxy signalr a un file statico e usato quella con RequireJS invece:

  1. Importa Microsoft.AspNet.SignalR.Utils

  2. Run packages/Microsoft.AspNet.SignalR.Utils.2.X.X/tools/signalr.exe ghp /path:my/bin /o:path/to/scripts/server.js dove /my/bin è la directory che contiene le assemblee con il tuo SignalR Hub.

  3. Sostituisci il tuo riferimento per /signalr/hubs con server:

    requirejs.config({   
    paths: { 
        // ... 
        "signalr.hubs": "path/to/scripts/server" 
    }, 
    // .... 
    
  4. Se si utilizzano i metodi della convenienza dei proxy generato, si avrà anche riscrivere loro (vedi How to create a physical file for the SignalR generated proxy)

Problemi correlati