作者:清洁剂没看见家门口_200 | 来源:互联网 | 2022-12-10 11:11
我是套接字的新手,所以我要在angular 6项目中实现套接字服务。
如何在Angular 6中使用套接字?
可能会使用一些很酷的套接字示例?
图书馆?教程?博客文章?
1> 小智..:
如何在角度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 {
this.socket.on('socket-data', (res) => {
this.observer.next(res);
});
return this.getSocketDataObservable();
}
getSocketDataObservable(): Observable {
return new Observable(observer => {
this.observer = observer;
});
}
}