[英]Angular2 CLI Socket.io Cannot read property 'on' undefined
I want to use socket.io module for sending message and I am newbie in using it. 我想使用socket.io模块发送消息,并且我是新手。 I am trying to run socket.io within my Angular2 CLI + Node.js application and I am getting following error:
我试图在Angular2 CLI + Node.js应用程序中运行socket.io,但出现以下错误:
TypeError: Cannot read property 'on' of undefined at MessagesComponent.webpackJsonp.363.MessagesComponent.sendMessage (messages.component.ts:34)
TypeError:无法读取MessagesComponent.webpackJsonp.363.MessagesComponent.sendMessage上undefined的属性“ on”(messages.component.ts:34)
What is wrong with my code and how can I connect and send message to the socket.io server? 我的代码有什么问题,如何连接并将消息发送到socket.io服务器?
messages.component.html messages.component.html
<div class="stick" style="background-color:#F5F5F5;">
<h5>Messages:</h5>
<ul>
<li *ngFor="let msg of msgs">
{{msg}}
</li>
</ul>
<input #mm/>
<button (click)="sendMessage(mm.value); mm.value=''">Send</button>
</div>
messages.component.ts messages.component.ts
import { Component,Input,OnInit,Output,EventEmitter,HostListener,ElementRef, NgZone} from "@angular/core";
import * as sio from 'socket.io-client';
import { Observable } from 'rxjs/Observable';
@Component({
selector: "messages",
templateUrl: './messages.component.html'
})
export class MessagesComponent implements OnInit{
socket: SocketIOClient.Socket;
private url = 'http://localhost:4200';
constructor(private _zone: NgZone, public http: Http) {}
ngOnInit() {
}
sendMessage(message){
this.socket.on('connect', function(data) {
this.socket.emit('add-message', message);
});
}
getMessages() {
let observable = new Observable(observer => {
this.socket = io(this.url);
this.socket.on('message', (data) => {
observer.next(data);
});
return () => {
this.socket.disconnect();
};
})
return observable;
}
}
www.ts www.ts
import { app } from '../app';
import * as http from 'http';
/**
* Get port from environment and store in Express.
*/
const port = normalizePort(process.env.PORT || 3000);
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
let io = require('socket.io').listen(server);
io.on('connection', (socket) => {
socket.on('disconnect', function(){
console.log('user disconnected');
});
socket.on('add-message', (message) => {
io.emit('message', {type:'new-message', text: message});
});
});
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
Solution: 解:
constructor(private _zone: NgZone, public http: Http) {
this.socket = sio(this.url);
}
in your on callback use arrow function to preserve this keyword :
sendMessage(message){
this.socket.on('connect', (data) => {
this.socket.emit('add-message', message);
});
}
you have to instantiate your socket : 您必须实例化您的套接字:
constructor(private _zone: NgZone, public http: Http) {
this.socket = sio(this.url);
}
in your on
callback use arrow function to preserve this
keyword : 在您的
on
回调中,使用arrow函数保留this
关键字:
sendMessage(message){
this.socket.on('connect', (data) => {
this.socket.emit('add-message', message);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.