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

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