angular中使用Socket.io实例代码
服务端(nodeJs/express):
letapp=require('express')();
lethttp=require('http').Server(app);
letio=require('socket.io')(http);
io.on('connection',(socket)=>{
console.log('userconnected');
socket.on('disconnect',function(){
console.log('userdisconnected');
});
socket.on('add-message',(message)=>{
io.emit('message',{type:'new-message',text:message});
});
});
http.listen(5000,()=>{
console.log('startedonport5000');
});
客户端,创建一个ChatService
import{Subject}from'rxjs/Subject';
import{Observable}from'rxjs/Observable';
import*asiofrom'socket.io-client';
exportclassChatService{
privateurl='http://localhost:5000';
privatesocket;
sendMessage(message){
this.socket.emit('add-message',message);
}
getMessages(){
letobservable=newObservable(observer=>{
this.socket=io(this.url);
this.socket.on('message',(data)=>{
observer.next(data);
});
return()=>{
this.socket.disconnect();
};
})
returnobservable;
}
}
ChatComponent
import{Component,OnInit,OnDestroy}from'@angular/core';
import{Control}from'@angular/common';
import{ChatService}from'./chat.service';
@Component({
moduleId:module.id,
selector:'chat',
template:`
{{message.text}}
`,
providers:[ChatService]
})
exportclassChatComponentimplementsOnInit,OnDestroy{
messages=[];
connection;
message;
constructor(privatechatService: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();
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。