Как импортировать файл socket.io-client в приложение angular 2?

Я хочу включить sockets.io-client в мое приложение angular 2. Сначала я установил socket.io-client, установил типизацию:

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

Следующий шаг должен был включить socket.io-client в мой index.html:

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

В моем компоненте я импортирую sockets.io:

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

И затем используя его:

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

Это не выполняется:

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

Любые идеи?

Ответ 1

Чтобы зарегистрировать модуль, чтобы его можно было импортировать, вам нужно включить его в конфигурацию SystemJS.

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

И измените свой импорт на:

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

Кроме того, вам больше не нужен импорт в теге script, поэтому удалите:

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

Наконец, если вы хотите добавить типизацию, добавьте в свой typings.json:

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

P.S. В будущем измените хэш в тире на последний хеш фиксации.

Ответ 2

У меня также были проблемы при попытке импортировать socket.io в мой проект, и вот как я его разрешил.

Используйте Angular 2 (rc.6)
На основе Systemjs
Из скелета Angular 2 образцы
Node: 5.3.0
Mac OSX El Capitan

Здесь мы идем:

1) Отредактируйте файл systemjs.config.js следующим образом:

/**
 * 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) Откройте проект в оболочке, затем выполните следующую строку: обычно мы говорим вам:

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

Но вы могли бы получить сообщение, в котором говорилось, что амбициозный флаг устарел, и вместо этого вы должны использовать глобальный. Но вы быстро увидите, что это тоже не сработает. Поэтому я предлагаю вам что-то еще (журналы ошибок ошибок дадут вам подсказки, но вы, вероятно, не поймете это, если раньше не ходили там):

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

3) Откройте компонент, для которого требуется socket.io, затем добавьте в начало файла:

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

затем опустите и добавьте:

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

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

Где 1337 - это порт вашего сервера node, содержащий socket.io, который был запущен.

Теперь все готово, вы можете прямо сделать свой запрос:

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

Надеюсь, что помогу:), удачи в вашем проекте

Ответ 3

Это поздний ответ, так как у меня была эта проблема и установка правильных типов через npm разрешила это для меня:

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

Этот пакет содержит определения типов для socket.io-client, поэтому, если вы получаете ошибки типа, это должно исправить это.

Ответ 4

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

Я попытался импортировать файл socket.io-client в приложение angular2, сгенерированное с помощью angular-cli, но я не могу его получить работать.

chat.component.ts

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

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

<сильные > система-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"
  }
}