如何在angular中使用socket.io服务?

问题描述

我是套接字的新手，所以我要在angular项目中实现socket.io服务.

如何在Angular中使用套接字?

可能会使用一些很酷的Socket.io示例?

图书馆?教程?博客文章?

解决方案

如何在角度6中使用套接字服务?

1.首先，您必须按如下所示创建具有角度的组件:

socketComponent.ts

import { SocketDataService } from 'socketDataService';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-socket',
  templateUrl: './app-socket.component.html',
  styleUrls: ['./app-socket.component.css'],

})

export class SocketComponent implements OnInit {


  sub: Subscription;

  constructor(private socketDataService: SocketDataService) {}

    ngOnInit() {
      this.getSocketData();
    }

    getSocketData(): void {
    this.sub = this.socketDataService.getSocketData()
      .subscribe(data => {
        this.socketData = data
    })
  }
}

2.您必须创建以下服务:

socketService.ts

import { Observable } from 'rxjs/Observable';

@Injectable()
export class SocketDataService {

    private socket;

    constructor(private http: Http) {
        this.socket = io('http://localhost:3000')
    }

    observer
    getSocketData(): Observable<any> {
        this.socket.on('socket-data', (res) => {
            this.observer.next(res);
        });
        return this.getSocketDataObservable();
    }
    getSocketDataObservable(): Observable<any> {
        return new Observable(observer => {
            this.observer = observer;
        });
    }
}

I am new in sockets, so i am implementing socket.io services in angular project..?

How to Use Sockets in Angular?

May be using some cool Socket.io Examples?

Libraries? Tutorials? Blog Articles?

解决方案

How to use socket service in angular 6?

1.First you have to create component in angular like :

socketComponent.ts

import { SocketDataService } from 'socketDataService';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-socket',
  templateUrl: './app-socket.component.html',
  styleUrls: ['./app-socket.component.css'],

})

export class SocketComponent implements OnInit {


  sub: Subscription;

  constructor(private socketDataService: SocketDataService) {}

    ngOnInit() {
      this.getSocketData();
    }

    getSocketData(): void {
    this.sub = this.socketDataService.getSocketData()
      .subscribe(data => {
        this.socketData = data
    })
  }
}

2. You have to create service like :

socketService.ts

import { Observable } from 'rxjs/Observable';

@Injectable()
export class SocketDataService {

    private socket;

    constructor(private http: Http) {
        this.socket = io('http://localhost:3000')
    }

    observer
    getSocketData(): Observable<any> {
        this.socket.on('socket-data', (res) => {
            this.observer.next(res);
        });
        return this.getSocketDataObservable();
    }
    getSocketDataObservable(): Observable<any> {
        return new Observable(observer => {
            this.observer = observer;
        });
    }
}

这篇关于如何在angular中使用socket.io服务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！