ReactiveX+Meteor

종단간암호화구현사례Appsoulute이재호

1

http://playnode.io/2012/30분동안Micro-Social-Networking서비스만들기

라이브코딩

2

여러분에게

3

팔아야할약이이만~~~큼

4

Reactive

Programing

Rx

MeteorE2E

Encryption Declarative

Programming

PublicKey

JavascriptCoreDDPTweetNacl

Functional

5

Reactive

Programing

Rx

MeteorE2E

EncryptionDeclarative

Programming

PublicKey

JavascriptCoreDDPTweetNacl

Functional

6

역시Meteor

7

Meteor란?

8

Meteor란?Full-StackJavascript

Platform

9

Meteor란?ReactiveFull-Stack

JavascriptPlatform

10

바쁘신분들을위해결론먼저

11

1.Meteor로

실시간동시사용자

앱+서버를빠르게개발

12

2.클라이언트가

웹이아닌경우

ReactiveX

13

Reactive

Programming?

14

ReactiveProgramming이란데이터흐름과변화전파에중점을

둔프로그래밍패러다임입니다.즉,프로그래밍언어에서정적또는

동적데이터흐름을쉽게표현할수있어야하며변경사항을데이터

흐름을통해자동으로전파한다는것을의미합니다.

https://en.wikipedia.org/wiki/Reactive_programming

15

Itisconvenienttodistinguishroughlybetweenthreekindsofcomputerprograms.Transformationalprograms

computeresultsfromagivensetofinputs;typicalexamplesarecompilersornumericalcomputationprograms.

Interactiveprogramsinteractattheirownspeedwithusersorwithotherprograms;fromauserpointofview,a

time-sharingsystemisinteractive.Reactiveprogramsalsomaintainacontinuousinteractionwiththeir

environment,butataspeedwhichisdeterminedbytheenvironment,nottheprogramitself.Interactiveprograms

workattheirownpaceandmostlydealwithcommunication,whilereactiveprogramsonlyworkinrespondto

externaldemandsandmostlydealwithaccurateinterrupthandling.Real-timeprogramsareusuallyreactive.

However,therearereactiveprogramsthatarenotusuallyconsideredasbeingreal-time,suchasprotocols,

systemdrivers,orman-machineinterfacehandlers.

GérardBerry-INRIAFr.

16

17

예를들면

18

명령형프로그래밍

Imperative

programming

19

명령형프로그래밍a=1이랜다

b=2랜다

c=a+b라고하면

c가3라고한다

a=4라고했는데

c는그래도3?????

20

왜죠?

왜왜왜?

왜인거죠?21

SpreadSheet(aka.excel)

22

변경사항이자동으로적용

23

function으로맛보기(coffee/ecma6)

a = 1b = 2c = a + bc3a = 3c3

a = -> 1b = -> 2c = -> a() + b()c()3a = -> 3c()5

a = ()=> 1b = ()=> 2c = ()=> a() + b()c()3a = ()=> 3c()5

24

Reactive

Programmingin

Meteor

25

ReactiveSource

+

ReactiveComputation

26

ReactiveSource

개소변훈련.

-오줌마려울때마다짖게한다.

-배변패드로이동

ReactiveJavaScript객체

-변경될때마다알려준다.

-변경이일어나면특정명령을

실행

27

ReactiveComputations물론개가아무리짖는다고해도

당신이집에없으면?

마찬가지로Reactivedata

sources는변경이있을때마다

해당데이터를수신대기함.

이곳이ReactiveContext.

변경이일어나면실행하는코드

블록을Reactive

Computation이라고한다.

28

Meteor

ReactiveCode/* reactive datasource 인 ReactiveVar를 선언 */let someValue = new ReactiveVar();

/* Reactive Computation. 변경이 일어나면 console.log에 출력 */Tracker.autorun(()=>console.log(someValue.get()));

/* reactive datasource의 변경 */someValue.set("Hello");

> Hello

someValue.set("Hello");

/* 변경이 일어나지 않으면 Reactive Computation도 일어나지 않는다 */

29

하지만

30

이것만으로부족하다!(서버없이클라이언트만할것이아니라면)

31

실시간어플리케이션

32

실시간동시사용자

어플리케이션

33

변경동기화

34

DB저장

35

DB변경감지

36

변경전달

37

DDPDistributedDataProtocol

38

DDP구성요소

Publish

Subscribe

Method-RPC

(RemoteProcedureCall)

https://github.com/meteor/meteor/blob/m

aster/packages/ddp/DDP.md

39

Subscribe요청

관심주제만들을래

40

Publish연결

ㅇㅇ필터링해줄께

41

Observe

빨대꽂기

(지속적변경반영)

영웅은죽지않아요.

42

Methodcall(RPC)

43

DB적용

44

변경감지

45

subscribe전송

46

E2EEncryption

종단간암호화

47

Telegram망명사태

48

지금은상식!

(aka.비밀채팅)

49

저장소로부터대상이탈취되

거나감청당해도복호화할

수없어야한다

그..그렇군요;

친구에게선의로해준거라암호도안걸었지만...

50

어떻게?

51

2개의상자https://tweetnacl.js.org

SecretBox Box

52

직접해봅시다!

53

Secretbox:secret-keyauthenticatedencryption

Message KeySymNonce

https://tweetnacl.js.org/#/secretbox

54

암호화 복호화

55

Box:public-keyauthenticatedEncryption

Message SecretKey

(Privatekey)

AsymNonce

https://tweetnacl.js.org/#/box

PublicKey

56

Box:public-keyauthenticatedEncryption

https://tweetnacl.js.org/#/box

Message SecretKey

(Privatekey)

AsymNonce PublicKey

57

암호화 복호화

1

3

45

2

1

5

6

순서대로생성하고복사해봅니다.

58

SecretBox

빠른속도

키전달문제59

Box

안전한키전달

복잡+느리다60

그렇다면

61

KeySymNonceMessage

SecretKey

(Privatekey)

AsymNonce PublicKey

EncMessage

EncMessageMessage

62

KeySymNonceMessage

SecretKey

(Privatekey)

AsymNonce PublicKey

EncMessage

EncMessageKey

63

SecretBox로암호화

Key를Box로전달

64

Box로복호화한Key로

SecretBox를복호화

65

키전달은공개키

복호화는대칭키

66

PROFIT!쬲

67

실제로이것보단조금더복잡하긴해요...사용자의개인키보관/복원

패스워드변경

수신자의인원변경

과거메시지정책등등

68

구현userA가userB에게암호화한메시지를보낸다.

69

clientmeteor servermeteor mongoDB

subpKey

1.대화방진입

subpKey

subroom

subroom

userB

userA

70

clientmeteor servermeteor mongoDB

2.사용자공개키요청

pubpKey

pubroomuserB

userA

71

clientmeteor servermeteor mongoDB

3.Documentkey생성

userB

userA

72

clientmeteor servermeteor mongoDB

4.Encryptdocumentkey

DDPMAGIC!

userB

userA

73

clientmeteor servermeteor mongoDB

5.Documentkey구조

userB

userA

74

clientmeteor servermeteor mongoDB

6.DecryptDocumentkey

userB

userA

75

clientmeteor servermeteor mongoDB

7.getDocumentkey

userB

userA

76

clientmeteor servermeteor mongoDB

8.message생성

abcdefghijklmnopqrst...

userB

userA

77

clientmeteor servermeteor mongoDB

9.Encryptmessage

abcdefghijklmnopqrst...

DDPMAGIC!

userB

userA

78

clientmeteor servermeteor mongoDB

10.GetEncryptedmessage

abcdefghijklmnopqrst...

abcdefghijklmnopqrst...

userB

userA

79

clientmeteor servermeteor mongoDB

11.Decryptmessage

abcdefghijklmnopqrst...

abcdefghijklmnopqrst...

userB

userA

80

clientmeteor servermeteor mongoDB

12.Getdecryptedmessage

abcdefghijklmnopqrst...

abcdefghijklmnopqrst...

userB

userA

81

최고다리액티브짱!

82

Mobile

83

쉽게갈까요?

84

아니오

85

얜못믿겠는데요

86

Native로갑시다

87

하지만...

88

Meteor밖은"위험"해ㄷㄷ

89

Async

Serialize

Exception90

RectiveX

91

AnAPIforasynchronous

programming

withobservablestreams

RectiveXhttp://reactivex.io/

92

93

94

누가만들었나?

95

믿을만한

마우스/키보드전문회사

Microsoft

96

97

Polyglot고생은한번이면족할...까?

98

ReactiveXsupport...Java:

JavaScript:

C#:

C#(Unity):

Scala:

Clojure:

C++:

Lua:

Ruby:

Python:

Groovy:

JRuby:

Kotlin:

Swift:

PHP:

RxJava

RxJS

Rx.NET

UniRx

RxScala

RxClojure

RxCpp

RxLua

Rx.rb

RxPY

RxGroovy

RxJRuby

RxKotlin

RxSwift

RxPHP

RxNetty

RxAndroid

RxCocoa

99

ReactiveXsupport...

Java:

Kotlin: (오호?)

Swift:

RxJava

RxKotlin

RxSwiftRxRealm(으응?)

RxFirebase(오옷!)

RxAndroid

RxCocoa

100

Map,Filter,Promise정도는써봤으니

101

대충비슷하지않을까?

아니야...

102

갑시다Native!

103

큰그림

104

WebSocket

DDP

Rx

105

Rx+Meteor(DDP)Login

Logout

UserProfile

Publish

Subscribe

Method

...Validations

106

RxDDPloginpacketexample

method$=WebSocketResponseObservable.filtero->o.msgis'result'

collection$=WebSocketResponseObservable.filtero->o.collection

14:44:42.660 {"msg":"method","method":"login","params": [{"resume":"3MFpDmTtUXXkmKR5JJ0OUJODb_O19BzFXcLRu0JIqmd"}] ,"id":"1"}14:44:42.827 a {"msg":"added","collection":"users","id":"pJdkcRjHTGmKzE9hv"}14:44:42.829 a {"msg":"changed","collection":"users","id":"pJdkcRjHTGmKzE9hv", "fields":{ "emails":[{"address":"jhee@appsoulute.com","verified":false}] }}14:44:42.830 a {"msg":"updated","methods":["1"]}14:44:42.842 a {"msg":"result","id":"1","result":{ "id":"pJdkcRjHTGmKzE9hv", "token":"3MFpDmTtUXXkmKR5JJ0OUJODb_O19BzFXcLRu0JIqmd", "tokenExpires":{"$date":1484372528136}}}

107

UI/Data의분리RPC(RemoteProcedureCall)한뒤callback을기다리지않음

Meteorserver에서내려주는datastream에만반응

108

ApplicationStructure

LoginViewRxMeteor

ProfileView

MessagesView

methodObservable

collectionObservable

ㄴusersObservable

ㄴmessagesObservable

subscribeObservable

logoutMethodCall

changePasswordMethodCall

usersSubscribe

loginMethodCall

signUpMethodCall

usersSubscribe

messagesSubscribe

usersSubscribe

sendMessageMethodCall

109

Login의경우1. local에서UniqueID를생성(methodID)

2. Loginmethod를methodID와함께call함

3. methodObservable중methodID로필터

4. 3을subscribe하고onNext일때메인화면이동/* login Method call */{"msg":"method","method":"login","params":[ {"user":{"username":"admin"},"password": {"digest":"ㄹㄹㄹㄹ","algorithm":"sha-256"}}], "id":"1"}

/* result */{"msg":"result","id":"1","result":{ "id":"kx4SooGR5avtZDWJN", "token":"ZMUvf03-buGVnblochaafOi1-BCrGcIoCMf9Buo9l4p", "tokenExpires":{"$date":1488373375267}}}

110

Logout의경우1. login에서받은자신의userId를알고있음

2. usersObservable중id가userId인것을필터

3. 자신의id가removed일때logout처리(result와무관)

4. 현재화면위치와상관없이logout처리가가능!

같은사용자가다른장비로동시접속시처리

/* Logout method call */{"msg":"method","method":"logout","params":[],"id":"2"}

/* subscribed collection */{"msg":"removed","collection":"users","id":"kx4SooGR5avtZDWJN"}

/* result of method */{"msg":"method","method":"logout","params":[],"id":"2"}

111

유용한RxPattern

112

CombineLatestvalidation

113

Debounce연타방지

114

DistinctUntilChanged중복방지

115

ScanStateStore-reduce

116

ScanStateStore-reduce

오늘의나는태어날때의나부터

어제의나까지리듀스한것

117

FlatMapSerialize

1ststart2ndstart1stend3rdstart2ndend3rdend

118

ConcatMapSerialize(10단콤보!)

1ststart1stend

2ndstart2ndend3rdstart3rdend

119

Example대방출FormValidation

Networktimeout

counter/wscan

draganddrop

doublesubscription/flapmap/switchmap

http://jsbin.com/fewuwan/edit?html,js,output

http://jsbin.com/zuqebo/edit?html,js,output

http://jsbin.com/bowumar/edit?html,js,output

http://jsbin.com/ziraga/edit?html,css,js,output

http://jsbin.com/buyose/edit?html,js,output

120

이정도로시작해도좋아요<3

121

RxReferencehttp://reactivex.io/tutorials.html

ReactiveXLab

https://www.facebook.com/groups/111

1730648912253/

122

결론

123

실시간프로그래밍은

어렵다

124

실시간프론트엔드

프로그래밍은

어렵다

125

실시간프론트엔드

다중사용자

프로그래밍은어렵다

126

실시간풀스택

다중사용자

프로그래밍은어렵다

127

ReactiveProgramming하세요128

Meteorfull-stackreactivejavascriptplatform

129

Meteorfull-stackreactivejavascriptplatform

ReactiveXAnAPIforasynchronousprogramming

withobservablestreams

130

Meteorfull-stackreactivejavascriptplatform

ReactiveXAnAPIforasynchronousprogramming

withobservablestreams

Meteorschool

https://www.facebook.com/groups/meteorschool/

ReactiveXLab

https://www.facebook.com/groups/1111730648912253/

131

고맙습니다

Thankyou

132

참조

https://www.meteor.com/

http://reactivex.io/

https://tweetnacl.js.org/

http://rxmarbles.com/

http://spectrumdig.blogspot.kr/

133