angular中使用Socket.io

服务端(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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!