Angular2 + rxjs + Firebase + Cloud functionにてリアクティブ SNSを作る。

森山雄太

SNSとは何か？• 各ユーザにカスタマイズされた web 情報がある。• ユーザ間の interaction がある。• 他ユーザのアクションが、別のユーザの web 表示

に影響を与える。• Reactive に相互反応がある。

構成

各ソリューションの役割• Firebase

– 接続するユーザに対して、リアルタイムにデータを届ける。• Angular + rxjs

– Client side でデータに対して、処理および描画を行う。• Cloud Function

– Firebase からイベントを受けて、データ処理などを実行

Rxjsの仕組みと、AngularFireでの利用

Rxjsの処理EventSource

マウスイベントfromEvent( 'mouseup')fromEvent( 'mousedown')

時間interval(1000)

カスタムイベントcreate()

Observer

var observer = {

next: x => 　イベントが来たときのしょり , error: err =>　 エラー処理 , complete: () =>　 完了時の処理 ,};

イベントをオブザーバに渡す前の処理Filter, map, scan

operator

Subscribe()購読の開始 UnSubscribe　購読の終了

Firebaseデータの Angularでの利用item = af.database.object('/item');

<h1> {{ (item | async)?.name }}</h1>

Firebase の item というパスにあるデータを取得

View への反映

Firebaseデータの Angularでの利用item = af.database.object('/item‘, { preserveSnapshot: true });item.subscribe( (snapshot) => { console.log(snapshot.key) console.log(snapshot.val()) });

Firebase に格納されているデータを js の中で利用する場合にはSnapshot として取得する。

チャット

Firebase Realtime Database

Key Value 形式でデータを任意の形で格納が可能。

Real time dataの Angularでの表示chat_items = this.af.database.list('/event/chat/' + event_id );

Ts file

<ul> <li *ngFor=“let chat of chat_items | async”> {{ chat.message}} {{chat.user}}</li></ul>

html file

Firebase の特定のパスを指定することで、そのパスのデータの変更を監視

Async pipe を指定することで、 html template において、データ変更があったときにそれを逐次反映させる。

イベント参加

Cloud functionを用いた、データ整形

イベントに参加している人の一覧

各人が参加しているイベントの一覧

イベントに関する情報

各ユーザのイベント情報の格納先

Cloud functionを用いた、データ整形functions.database.ref('/event_related/event/{event_id}/participants/{user_id}').onWrite(event => { const ref = "/users/my_event/" + user_id + "/" + event_id; admin.database().ref(ref).set(true)})

Ts file

イベント情報がかきこまれたときに、 user データへのコピーを実現 - onWrite を用いて、特定のパスにデータが書き込まれたことを　サーバサイドで監視ができる。 - user data は、自分自身以外は書き込めない領域なので、　 client サイドからの書き込みは制限している。

各個人での my event list表示my_event_observable = this.af.database.list('/users/my_event/' + my_userid, { query: { limitToLast: 20,

orderByChild: 'date_time_start', startAt: current_time - 2*24*60*60*1000 }

});

Ts file

<ul *ngFor="let event_data of my_event_observable | async"> 　 <app-my-event [event_id]="event_data.$key"[event_data]="event_data">　 </app-my-event> </ul>

html file

Firebase の自分のイベント情報のリストを監視

イベント情報を、各イベントの情報を表示する app-my-event に受け渡し

ユーザの search

イベントに招待する人を検索する。招待したい人の名前を検索

検索されたユーザを検索

選択された人に招待

検索用語の取得

text_input_source = text_keyup.debounceTime(200);

text_input_source.subscribe( ()=>{ name_query_subject.next( context_input );

} )

Ts file

<input (keyup)="text_keyup.next()“ [(ngModel)]="context_input">

html file

Input 要素に、文字をタイピングするたびに、イベントを取得する。

イベントがおきて、 200msec の間、イベントがおきなかったときに、イベントを発火

200msec の間、イベントがおきなかったときに、Input に設定されていたテキスト情報を取得して、イベント発火

検索用語での検索candidate_users_obserbable = 　　 af.database.list('/users/user_basic/',

{ query: { limitToFirst: 20, orderByChild: 'full_name', startAt: 　 name_query_subject }

}　　 );

Ts file

<ul> <li *ngFor="let user of candidate_user_items" > {{user.full_name}} {{user.pict_src}} </li></ul

html file

複数の情報源のsubscribe

CombineLatest

AJAX

Mouse Event

Click Event

Web SocketKeyboard

Application

CombineLatest

this.combined_subscription = Observable.combineLatest([ user_subject, room_subject, game_subscription, room_user_subject], (user_env, skyway_room_data , game_status, firebase_room_user)=>{

}