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

Question

我想在我的angular 2应用程序中包含sockets.io-client.首先我安装了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

有任何想法吗？

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将来,将打字中的哈希值更改为最新的提交哈希值.

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

但是您可能会收到一条消息,告诉您ambiant标志已被弃用,您应该使用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 !'});

希望我帮助:),祝你的项目好运