[英]How to import socket.io-client in a angular 2 application?
我想在我的 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
有什么想法吗?
为了注册模块以便您可以导入它,您需要将它包含在您的 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。
这是一个迟到的答案,因为我刚刚遇到了这个问题并且通过 npm安装正确的类型为我解决了这个问题:
npm install @types/socket.io-client --save
这个包包含socket.io-client
类型定义,所以如果你遇到类型错误,这应该修复它。
我在尝试将 socket.io 导入我的项目时也遇到了问题,这是我解决的方法。
我们开始:
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 !'});
希望我能帮助:),祝你的项目好运
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"
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.