web-dev-qa-db-fra.com

Comment importer socket.io-client dans une application angulaire 2?

Je veux inclure sockets.io-client dans mon application angular 2. J'ai d'abord installé socket.io-client, installé des typings:

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

La prochaine étape consistait à inclure socket.io-client dans mon index.html:

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

Dans mon composant, j'importe des sockets.io:

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

Et puis en l'utilisant:

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

Cela échoue avec:

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

Des idées?

javascriptangularsocket.io
16
simonaco

Pour enregistrer le module afin de pouvoir l'importer, vous devez l'inclure dans votre configuration SystemJS.

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

Et changez votre importation en:

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

De plus, vous n'avez plus besoin d'importer dans la balise script, supprimez donc:

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

Enfin, si vous souhaitez ajouter les saisies, ajoutez votre typings.json:

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

P.S. Dans l’avenir, modifiez le hachage dans les saisies avec le dernier hachage de validation.

16
Abdulrahman

Ceci est une réponse tardive car je viens d'avoir ce problème et l'installation des types corrects via npm l'a résolu pour moi:

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

Ce paquet contient les définitions de types pour socket.io-client. Par conséquent, si vous obtenez des erreurs de type, cela devrait résoudre le problème. 

12
FRECIA

J'ai également eu des problèmes en essayant d'importer socket.io dans mon projet et voici comment je l'ai résolu.

Et c'est parti :

1) Modifiez votre fichier systemjs.config.js comme suit:

/**
 * 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) Ouvrez votre projet dans un shell, puis exécutez la ligne suivante: Habituellement, nous vous conseillons de faire: 

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

Mais vous pourriez recevoir un message vous informant que le drapeau ambiant est obsolète et que vous devriez utiliser global. Mais vous verrez rapidement que cela ne fonctionnera pas non plus. Je vous propose donc autre chose (les journaux d'erreurs vous donneront des conseils, mais vous ne le comprendrez probablement pas si vous n'y alliez pas là auparavant):

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

3) Ouvrez votre composant nécessitant socket.io puis ajoutez en haut de votre fichier:

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

puis descendez et ajoutez:

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

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

Où 1337 est le port de votre serveur de noeud contenant le fichier socket.io qui a été lancé.

Maintenant que tout est prêt, vous pouvez directement faire votre demande:

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

J'espère que j'aide :), bonne chance avec votre projet

11
Wetteren Rémi
angular-cli: 0.0.39 
node: 6.2.2 
os: win32 x64

J'ai essayé d'importer socket.io-client dans une application angular2 générée avec le angular-cli mais je n'arrive pas à le faire fonctionner.

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"}
};

angular-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"
  }
}
1
Chris