angular中使用Socket.io实例代码

服务端(nodeJs/express):

io.on('connection',(socket) => {
console.log('user connected');

socket.on('disconnect',function(){
console.log('user disconnected');
});

socket.on('add-message',(message) => {
io.emit('message',{type:'new-message',text: message});
});
});

http.listen(5000,() => {
console.log('started on port 5000');
});

客户端，创建一个ChatService

export class ChatService {
private url = 'http://localhost:5000';
private socket;

sendMessage(message){
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;
}
}

ChatComponent

rush:js;"> import { Component,OnInit,OnDestroy } from '@angular/core'; import { Control } from '@angular/common'; import { ChatService } from './chat.service';

@Component({
moduleId: module.id,selector: 'chat',template: `<div *ngFor="let message of messages">
{{message.text}}

`,providers: [ChatService] }) export class ChatComponent implements OnInit,OnDestroy { messages = []; connection; message;

constructor(private chatService:ChatService) {}

sendMessage(){
this.chatService.sendMessage(this.message);
this.message = '';
}

ngOnInit() {
this.connection = this.chatService.getMessages().subscribe(message => {
this.messages.push(message);
})
}

ngOnDestroy() {
this.connection.unsubscribe();
}
}