angular中使用Socket.io实例代码

服务端(nodeJs/express):letapp=require('express')();lethttp=require('http').Server(app);letio=require('socket.io')(htt

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。