如何在 angular 2 應用程序中導入 socket.io-client？

Question

我想在我的 angular 2 應用程序中包含 sockets.io-client。 首先我安裝了socket.io-client，安裝了typings：

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

有什么想法嗎？

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

PS Int 將來，將typings 中的hash 更改為最新的commit hash。

Answer 2

這是一個遲到的答案，因為我剛剛遇到了這個問題並且通過 npm安裝正確的類型為我解決了這個問題：

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

這個包包含socket.io-client類型定義，所以如果你遇到類型錯誤，這應該修復它。

Answer 3

我在嘗試將 socket.io 導入我的項目時也遇到了問題，這是我解決的方法。

• 使用 Angular 2 (rc.6)
• 基於 Systemjs
• 來自 Angular 2 樣本的骨架
• 節點：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）在shell中打開你的項目然后執行以下行：通常我們告訴你這樣做：

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

但是您可能會收到一條消息，告訴您環境標志已被棄用，您應該使用 global 來代替。 但是你很快就會發現它也行不通。 所以我向你推薦其他東西（錯誤日志會給你提示，但如果你以前不去那里你可能不會理解它）：

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 是包含已啟動的 socket.io 的節點服務器的端口。

現在，一切就緒，您可以直接提出您的請求：

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

希望我能幫助:)，祝你的項目好運

Answer 4

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

我試圖將 socket.io-client 導入到使用angular-cli生成的 angular2 應用程序中，但我無法讓它工作。

聊天組件.ts

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

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

系統配置文件

/** 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'
    ]
  });
};

包.json

{
      "dependencies": {
        ...
        "socket.io-client": "^1.4.8",
        "systemjs": "0.19.26"
      },
      "devDependencies": {
        ...
        "typescript": "^1.8.10",
        "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"
  }
}