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(); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。