服务端(nodeJs/express):
let app = require('express')(); let http = require('http').Server(app); let io = require('socket.io')(http); 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
import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/Observable'; import * as io from 'socket.io-client'; 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
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}} </div> <input [(ngModel)]="message" /><button (click)="sendMessage()">Send</button>`,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(); } }
参考资料:
http://www.Syntaxsuccess.com/viewarticle/socket.io-with-rxjs-in-angular-2.0