2016-05-07 21 views
12

Voglio includere sockets.io-client nella mia applicazione angolare 2. In primo luogo ho installato socket.io-client, tipizzazioni installati:Come importare socket.io-client in un'applicazione angolare 2?

npm install socket.io-client --save 
typings install socket.io-client --save --ambient 

passo successivo è stato quello di includere socket.io-client nel mio index.html:

<script src="node_modules/socket.io-client/socket.io.js"></script> 

Nella mia componente, sto importando prese .io:

import * as io from 'socket.io-client' 

E poi usarlo:

var socket = io('http://localhost:3000'); 
socket.on('event', function(data:any){ 
    console.log(data); 
}.bind(this)); 

questo non funziona con:

zone.js:101 GET http://localhost:3001/socket.io-client 404 (Not Found) 
(index):18 Error: Error: XHR error (404 Not Found) loading http://localhost:3001/socket.io-client 

Tutte le idee?

+0

Se si utilizza il cli angolare, controllare la risposta in questo post. http://stackoverflow.com/questions/38191549/angular2-cli-socket-io-3rd-party-library-import/38786415#38786415 – LonsomeHell

risposta

16

Per registrare il modulo in modo da poterlo importare, è necessario includerlo nella configurazione di SystemJS.

System.config({ 
    packages: { 
     ... 
     "socket.io-client": {"defaultExtension": "js"} 
    }, 
    map: { 
     "socket.io-client": "node_modules/socket.io-client/socket.io.js" 
    } 
}); 

e cambiare l'importazione di:

import io from 'socket.io-client';
import * as io from "socket.io-client

Inoltre, non occorre l'importazione nel tag script più, in modo da rimuovere:

<script src="node_modules/socket.io-client/socket.io.js"></script> 

Infine, se ti piace aggiungere le tipizzazioni, aggiungi il tuo typings.json:

{ 
    "ambientDependencies": { 
    ... 
    "socket-io-client":"github:DefinitelyTyped/DefinitelyTyped/socket.io-client/socket.io-client.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd" 
    } 
} 

P.S. In futuro, cambia l'hash nelle digitazioni con l'ultimo hash del commit.

+0

Grazie. Funziona come una magia ora. Solo una cosa, import io da 'socket.io-client'; fallisce la compilazione con: "Module" socket.io-client "" non ha esportazione predefinita. " quindi deve essere importato * come io da "socket.io-client" come per https://github.com/AngularClass/angular2-webpack-starter/issues/221 – simonaco

+0

@simonaco Grazie per la correzione. Io in realtà non uso socket.io, ho appena fatto una cattiva ipotesi :) – Abdulrahman

+1

@RobertBroden Ottengo l'ultimo hash di commit da [DefinitelyTyped Repo] (https://github.com/DefinitelyTyped/DefinitelyTyped). Ad esempio, per 'socket.io-client', dovresti riuscire a trovare l'hash in cima alla [pagina] (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/socket.io-client). Ma, per qualche ragione, non mi viene in mente adesso. È bloccato su "Recupero ultimo commit ...". Probabilmente solo un problema temporaneo – Abdulrahman

1
angular-cli: 0.0.39 
node: 6.2.2 
os: win32 x64 

ho cercato di importare socket.io-client in un app angular2 generato con il angular-cli ma non riesco a farlo funzionare.

chat.component.ts

import * as io from "socket.io-client"; 

@Component({ 
    ... 
}) 
export class ChatAppComponent { 
    ... 
} 

system-config.ts

/** Map relative paths to URLs. */ 
const map: any = { 
    "socket.io-client": "vendor/socket.io-client/socket.io.js" 
}; 

/** User packages configuration. */ 
const packages: any = { 
    "socket.io-client": {"defaultExtension": "js"} 
}; 

angolari-CLI-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); 

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     'systemjs/dist/system-polyfills.js', 
     'systemjs/dist/system.src.js', 
     'zone.js/dist/*.js', 
     'es6-shim/es6-shim.js', 
     'reflect-metadata/*.js', 
     'rxjs/**/*.js', 
     '@angular/**/*.js', 
     'socket.io-client/socket.io.js' 
    ] 
    }); 
}; 

package.json

{ 
     "dependencies": { 
     ... 
     "socket.io-client": "^1.4.8", 
     "systemjs": "0.19.26" 
     }, 
     "devDependencies": { 
     ... 
     "typescript": "^1.8.10", 
     "typings": " 
     } 
} 

typings.json

{ 
    "ambientDevDependencies": { 
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459", 
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438", 
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654" 
    }, 
    "ambientDependencies": { 
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654", 
    }, 
    "globalDependencies": { 
    "socket.io-client": "registry:dt/socket.io-client#1.4.4+20160317120654" 
    } 
} 
+0

sei riuscito a trovare una soluzione per questo? – Gabi

+0

Ho avuto problemi anche tu sei riuscito a farlo funzionare? –

11

Ho anche avuto problemi durante il tentativo di importare presa.io nel mio progetto ed ecco come l'ho risolto.

Ecco come fare:

1) Modifica il tuo file system.js.config.js come:

/** 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    map: { 
     ... here my stuff ... 
     "socket.io-client": 'npm:socket.io-client' 
    }, 
    packages: { 
     ... here my stuff ... 
     "socket.io-client": { 
     main: './socket.io.js' 
     } 
    } 
    }); 
})(this); 

2) Aprire il progetto in un guscio poi exec la seguente riga: solito vi diciamo di fare:

npm install socket.io-client --save 
typings install socket.io-client --save --ambient 

ma si potrebbe ricevuto un messaggio che ti ha detto che la bandiera ambiant è deprecato e che dovresti usare invece globale. Ma vedrai presto che non funzionerà neanche. Quindi vi propongo qualcosa di diverso (e gli errori log vi darà suggerimenti, ma probabilmente non lo capiranno se non sei andato there prima):

typings install dt~socket.io-client --save --global 

3) Aprire il componente che richiede socket.io quindi aggiungere alla parte superiore del file:

import * as io from "socket.io-client"; 

poi andare verso il basso e aggiungere:

export class MessageComponent implements OnInit { 
    socket:any = null; 

    constructor() { 
     this.socket = io('http://localhost:1337'); 
    } 
    ... here my stuff ... 
} 

dove 1337 è la porta del proprio server nodo che contiene socket.io che è stato launche d.

Ora, tutto è pronto, è possibile effettuare direttamente una richiesta:

this.socket.emit('sendMessage', {content:'it works !'}); 

Speranza io aiuto :), buona fortuna con il vostro progetto

10

Questa è una risposta in ritardo dato che ho appena avuto questo problema e l'installazione di tipo corretto via npm risolto per me:

npm install @types/socket.io-client --save 

Questo pacchetto contiene le definizioni di tipo per socket.io-client, quindi se hai trovato errori di tipo Thi s dovrebbe ripararlo.

+1

Fare la prima risposta + questa risposta ha risolto il mio problema: nessuna necessità di digitare install.io-client --save --ambient e modificare tsconfig.json – anusree