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();
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短