angular中使用Socket.io實(shí)例代碼
服務(wù)端(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'); });
客戶端,創(chuàng)建一個(gè)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(); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular.js初始化之ng-app的自動(dòng)綁定與手動(dòng)綁定詳解
這篇文章主要給大家介紹了關(guān)于Angular.js初始化之ng-app的自動(dòng)綁定與手動(dòng)綁定的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標(biāo)達(dá)到目的地之前對(duì)其進(jìn)行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過(guò)$httpProvider.interceptors數(shù)組定義的一組攔截器,每個(gè)攔截器都是實(shí)現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。2016-12-12AngularJS解決ng界面長(zhǎng)表達(dá)式(ui-set)的方法分析
這篇文章主要介紹了AngularJS解決ng界面長(zhǎng)表達(dá)式(ui-set)的方法,通過(guò)具體問(wèn)題的分析并結(jié)合實(shí)例形式給出了AngularJS長(zhǎng)表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11Angular中$state.go頁(yè)面跳轉(zhuǎn)并傳遞參數(shù)的方法
這篇文章主要介紹了angular中$state.go頁(yè)面跳轉(zhuǎn)并傳遞參數(shù)的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05Angular中使用$watch監(jiān)聽(tīng)object屬性值的變化(詳解)
下面小編就為大家?guī)?lái)一篇Angular中使用$watch監(jiān)聽(tīng)object屬性值的變化(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04AngularJs用戶登錄問(wèn)題處理(交互及驗(yàn)證、阻止FQ處理)
這篇文章主要為大家詳細(xì)介紹了AngularJs用戶登錄問(wèn)題處理,包括交互及驗(yàn)證、阻止FQ處理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10AngularJS使用ocLazyLoad實(shí)現(xiàn)js延遲加載
這篇文章主要介紹了AngularJS使用ocLazyLoad實(shí)現(xiàn)js延遲加載的相關(guān)資料,需要的朋友可以參考下2017-07-07