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

Posted 2023-04-18

【中文标题】如何在 Angular 2 应用程序中导入 socket.io-client？

【英文标题】：How to import socket.io-client in a angular 2 application?

【发布时间】：2016-09-02 13:39:26

【问题描述】：

我想在我的 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

有什么想法吗？

【问题讨论】：

如果您使用 angular cli，请查看我在这篇文章中的回答。 ***.com/questions/38191549/…

【参考方案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"
  

附：将来，将类型中的哈希更改为最新的提交哈希。

【讨论】：

谢谢。现在像魔术一样工作。只有一件事，从'socket.io-client'导入io；编译失败：“模块''socket.io-client''没有默认导出。”所以它必须是 import * as io from "socket.io-client" 根据github.com/AngularClass/angular2-webpack-starter/issues/221

@simonaco 感谢您的更正。我实际上并没有使用socket.io，我只是做了一个错误的猜测:)

@RobertBroden 我从DefinitelyTyped Repo 获得了最新的提交哈希。例如，对于socket.io-client，您应该能够在page 的顶部找到哈希。但是，由于某种原因，它现在没有出现在我面前。它卡在Fetching latest commit… 上。可能只是暂时的问题

@Abdulrahman 谢谢！页面在您发布后立即更新。消息：“抱歉，我们不得不将此目录截断为 1,000 个文件。列表中省略了 1,725 个条目。”我没有看到 socket.io-client :( README.md 虽然给出了说明

【参考方案2】：

这是一个迟到的答案，因为我刚刚遇到了这个问题并安装了正确的类型 via npm 为我解决了这个问题：

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

这个包包含socket.io-client 的类型定义，所以如果你遇到类型错误，应该修复它。

【讨论】：

做第一个答案+这个答案解决了我的问题。无需打字安装 socket.io-client --save --ambient 和编辑 tsconfig.json

【参考方案3】：

我在尝试将 socket.io 导入我的项目时也遇到了问题，我是这样解决的。

使用 Angular 2 (rc.6) 基于Systemjs From the skeleton on Angular 2 samples 节点：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。但是你很快就会发现它也不起作用。所以我建议你做点别的（错误日志会给你提示，但如果你之前没有去there，你可能不会明白）：

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 !');

希望我能帮上忙 :)，祝你的项目好运

【参考方案4】：

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

我尝试将 socket.io-client 导入使用 angular-cli 生成的 angular2 应用程序，但我无法让它工作。

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"