Download to read offline
![@doanduyhai http://goo.gl/gKxIHb
Cassandra data distribution!
Random: hash of #partition → token = hash(#p)
Hash: ]-X, X]
X = huge number (264/2)
n1
n2
n3
n4
n5
n6
n7
n8
7](https://image.slidesharecdn.com/killrchat-150129165944-conversion-gate02/85/Introduction-to-KillrChat-7-320.jpg)
![@doanduyhai http://goo.gl/gKxIHb
Token Ranges!
A: ]0, X/8]
B: ] X/8, 2X/8]
C: ] 2X/8, 3X/8]
D: ] 3X/8, 4X/8]
E: ] 4X/8, 5X/8]
F: ] 5X/8, 6X/8]
G: ] 6X/8, 7X/8]
H: ] 7X/8, X]
n1
n2
n3
n4
n5
n6
n7
n8
A
B
C
D
E
F
G
H
8](https://image.slidesharecdn.com/killrchat-150129165944-conversion-gate02/85/Introduction-to-KillrChat-8-320.jpg)
![@doanduyhai http://goo.gl/gKxIHb
The controllers!
15
killrChat.controller('ListAllRoomsCtrl',6function($scope,6ListAllRoomsService){6
666666$scope.allRooms6=6[];6
666666$scope.joinRoom6=6function(roomToJoin)6{6
666666666ListAllRoomsService.joinRoom($scope,6roomToJoin);6
666666};6
666666$scope.quitRoom6=6function(roomToLeave)6{6
666666666ListAllRoomsService.quitRoom($scope,6roomToLeave);6
666666};6
666666$scope.$evalAsync(ListAllRoomsService.loadInitialRooms($scope));66
});6](https://image.slidesharecdn.com/killrchat-150129165944-conversion-gate02/85/Introduction-to-KillrChat-15-320.jpg)
![@doanduyhai http://goo.gl/gKxIHb
The REST resources!
20
killrChat.factory('User',4function($resource)4{4
44444return4$resource('users',4[],{4
444444444'create':4{url:4'users',4method:4'POST',4isArray:false,4…},4
444444444'login':4{url:4'authenticate',4method:4'POST',4isArray:false,4…},4
444444444'load':4{url4:4'users/:login',4method:'GET',4isArray:false,4…},4
444444444'logout':4{url:4'logout',4method:4'GET',4isArray:false,4…});4
4});4
killrChat.factory('Room',3function($resource)3{3
33333return3$resource('rooms',3[],{3
333333333'create':3{url:3'rooms/:roomName',3method:3'POST',3isArray:false,...},3
333333333'delete':3{url:3'rooms/:roomName',3method:3'PATCH',3isArray:false,...},3
333333333"addParticipant":3{url:3'rooms/participant/:roomName',3method:3'PUT',...},3
333333333'removeParticipant':3{url:3'rooms/participant/:roomName',3method:3'PATCH',...},3
333333333'load':3{url:3'rooms/:roomName',3method:3'GET',3isArray:false,...},3
333333333'list':3{url:3'rooms',3method:3'GET',3isArray:true,...}3
33333});3
});3](https://image.slidesharecdn.com/killrchat-150129165944-conversion-gate02/85/Introduction-to-KillrChat-20-320.jpg)
![@doanduyhai http://goo.gl/gKxIHb
$resource tricks & traps!
21
https://docs.angularjs.org/api/ngResource/service/$resource
• HTTP GET "class" actions: Resource.action([parameters], [success], [error])
• non-GET "class" actions: Resource.action([parameters], postData, [success], [error])
• non-GET instance actions: instance.$action([parameters], [success], [error])](https://image.slidesharecdn.com/killrchat-150129165944-conversion-gate02/85/Introduction-to-KillrChat-21-320.jpg)
![@doanduyhai http://goo.gl/gKxIHb
$resource tricks & traps!
22
vs
• HTTP GET "class" actions: Resource.action([parameters], [success], [error])
• non-GET "class" actions: Resource.action([parameters], postData, [success], [error])
• non-GET instance actions: instance.$action([parameters], [success], [error])
ctions: Resource.action([parameters], [success], [error
tions: Resource.action([parameters], postData, [success
ctions: instance.$action([parameters], [success], [erro
• HTTP GET "class" actions: Resource.action([paramete
• non-GET "class" actions: Resource.action([parameter
• non-GET instance actions: instance.$action([paramet
https://docs.angularjs.org/api/ngResource/service/$resource](https://image.slidesharecdn.com/killrchat-150129165944-conversion-gate02/85/Introduction-to-KillrChat-22-320.jpg)
Uploaded byDuyhai Doan
Introduction to KillrChat
The document describes the KillrChat application, which is a scalable chat application built with AngularJS, Cassandra, and Spring Boot. It discusses the application architecture including using Cassandra for distributed data storage and scaling out via a message broker. It also summarizes the key components of the application including controllers, services, REST resources, directives, and how data is distributed in Cassandra.
Introduction to KillrChat
- 1. @doanduyhai KillrChat, the scalablechat with AngularJS, Cassandra & Spring Boot DuyHai DOAN, Technical Advocate
- 2. @doanduyhai http://goo.gl/gKxIHb Who amI ?! 2 Duy Hai DOAN Cassandra technical advocate • talks, meetups, confs • open-source devs (Achilles, KillrChat …) • OSS Cassandra point of contact ☞ duy_hai.doan@datastax.com • Datastax = OSS Cassandra + extra features
- 3. @doanduyhai http://goo.gl/gKxIHb Why KillrChat?! 3 • Cassandra Hands-on exercise • Real working app, not toy example • Scalable design • FUN • AngularJS, Spring Boot
- 4. @doanduyhai http://goo.gl/gKxIHb Architecture! Single node 4 Tomcat Spring C* HTTPRest AngularJS, UI Bootstrap, SockJS Spring {Boot,Security, Rest, Messaging} Cassandra, Achilles
- 5. @doanduyhai http://goo.gl/gKxIHb Architecture! 5 Tomcat Spring C* HTTP Rest Spring{Boot,Security, Rest, Messaging} Cassandra, Achilles In-memory broker Embedded/local Cassandra Single node AngularJS, UI Bootstrap, SockJS
- 6. @doanduyhai http://goo.gl/gKxIHb Architecture! 6 Tomcat Spring … Broker(RabbitMQ, ZeroMQ, Kafka…) Tomcat Spring Tomcat Spring Scaling out
- 7. @doanduyhai http://goo.gl/gKxIHb Cassandra datadistribution! Random: hash of #partition → token = hash(#p) Hash: ]-X, X] X = huge number (264/2) n1 n2 n3 n4 n5 n6 n7 n8 7
- 8. @doanduyhai http://goo.gl/gKxIHb Token Ranges! A:]0, X/8] B: ] X/8, 2X/8] C: ] 2X/8, 3X/8] D: ] 3X/8, 4X/8] E: ] 4X/8, 5X/8] F: ] 5X/8, 6X/8] G: ] 6X/8, 7X/8] H: ] 7X/8, X] n1 n2 n3 n4 n5 n6 n7 n8 A B C D E F G H 8
- 9. @doanduyhai http://goo.gl/gKxIHb How toscale ?! With Cassandra 9 user_id1 user_id2 user_id3 user_id4 user_id5 n1 n2 n3 n4 n5 n6 n7 n8 A B C D E F G H
- 10. @doanduyhai http://goo.gl/gKxIHb How toscale ?! With Cassandra ☞ distributed tables 10 n1 n2 n3 n4 n5 n6 n7 n8 A B C D E F G H user_id1 user_id2 user_id3 user_id4 user_id5
- 11. @doanduyhai http://goo.gl/gKxIHb How toscale ?! The broker 11 Broker (RabbitMQ, ZeroMQ, Kafka…) Tomcat Spring
- 12. @doanduyhai http://goo.gl/gKxIHb Why AngularJS?! • Easy • Extensible (directives) • Productive • Lot of resources/tutorial • Bootstrap integration (UI-bootstrap) 12
- 13.
- 14. @doanduyhai http://goo.gl/gKxIHb The controllers! 14 Pass-throughlayer to services Keep state of the view Bind view behaviors to services methods
- 15.
- 16. @doanduyhai http://goo.gl/gKxIHb The services! 16 Businesslogic Stateless (scopes passed as param) 1 method = 1 responsibility Lots of DI
- 17.
- 18. @doanduyhai http://goo.gl/gKxIHb The services! 18 killrChat.service('ParticipantService',5function(){5 55555var5self5=5this;5 55555this.sortParticipant5=5function(participantA,participantB){5 555555555return5participantA.firstname.localeCompare(participantB.firstname);5 55555};5 55555this.addParticipantToCurrentRoom5=5function(currentRoom,5participantToAdd)5{5 555555555currentRoom.participants.push(participantToAdd);5 555555555currentRoom.participants.sort(self.sortParticipant);5 55555};5 55555this.removeParticipantFromCurrentRoom5=5function(currentRoom,5participantToRemove)5{5 555555555var5indexToRemove5=5currentRoom5 555 .participants5 55 5 .map(function(p)5{return5p.login})5 55 5 .indexOf(participantToRemove.login);5 555555555currentRoom.participants.splice(indexToRemove,51);5 55555};5 });5
- 19. @doanduyhai http://goo.gl/gKxIHb The RESTresources! 19 Leverage Angular $resource Lots of custom behaviors 1 root path, many actions Tricks & traps with $promise
- 20. @doanduyhai http://goo.gl/gKxIHb The RESTresources! 20 killrChat.factory('User',4function($resource)4{4 44444return4$resource('users',4[],{4 444444444'create':4{url:4'users',4method:4'POST',4isArray:false,4…},4 444444444'login':4{url:4'authenticate',4method:4'POST',4isArray:false,4…},4 444444444'load':4{url4:4'users/:login',4method:'GET',4isArray:false,4…},4 444444444'logout':4{url:4'logout',4method:4'GET',4isArray:false,4…});4 4});4 killrChat.factory('Room',3function($resource)3{3 33333return3$resource('rooms',3[],{3 333333333'create':3{url:3'rooms/:roomName',3method:3'POST',3isArray:false,...},3 333333333'delete':3{url:3'rooms/:roomName',3method:3'PATCH',3isArray:false,...},3 333333333"addParticipant":3{url:3'rooms/participant/:roomName',3method:3'PUT',...},3 333333333'removeParticipant':3{url:3'rooms/participant/:roomName',3method:3'PATCH',...},3 333333333'load':3{url:3'rooms/:roomName',3method:3'GET',3isArray:false,...},3 333333333'list':3{url:3'rooms',3method:3'GET',3isArray:true,...}3 33333});3 });3
- 21. @doanduyhai http://goo.gl/gKxIHb $resource tricks& traps! 21 https://docs.angularjs.org/api/ngResource/service/$resource • HTTP GET "class" actions: Resource.action([parameters], [success], [error]) • non-GET "class" actions: Resource.action([parameters], postData, [success], [error]) • non-GET instance actions: instance.$action([parameters], [success], [error])
- 22. @doanduyhai http://goo.gl/gKxIHb $resource tricks& traps! 22 vs • HTTP GET "class" actions: Resource.action([parameters], [success], [error]) • non-GET "class" actions: Resource.action([parameters], postData, [success], [error]) • non-GET instance actions: instance.$action([parameters], [success], [error]) ctions: Resource.action([parameters], [success], [error tions: Resource.action([parameters], postData, [success ctions: instance.$action([parameters], [success], [erro • HTTP GET "class" actions: Resource.action([paramete • non-GET "class" actions: Resource.action([parameter • non-GET instance actions: instance.$action([paramet https://docs.angularjs.org/api/ngResource/service/$resource
- 23. @doanduyhai http://goo.gl/gKxIHb $resource tricks& traps! 23 What’s about $promise ?
- 24. @doanduyhai http://goo.gl/gKxIHb $resource tricks& traps! 24 What’s about $promise ?
- 25. @doanduyhai http://goo.gl/gKxIHb $resource tricks& traps! 25 What’s about $promise ? Room.load({roomName:roomToEnter})4 4444444444444.$promise4 4444444444444.then(function(...){...})4 4444444444444.catch(function(...){...});4 new$User().$login({$ $$$$$$$$$$$$$j_username:$$scope.username,$ $$$$$$$$$$$$$j_password:$$scope.password,$ $$$$$$$$$$$$$_spring_security_remember_me:$$scope.rememberMe$ $$$$$$$$$})$ $$$$$$$$$.then(function()${...})$ $$$$$$$$$.catch(function(...){...});$ { $promise: …., … } { then: function(….), catch: function(…), … }
- 26. @doanduyhai http://goo.gl/gKxIHb The directives! 26 Goodunderstanding of Angular internals https://github.com/Zenika/angular-from-scratch Javascript mastering is required Basic knowledge of JQuery is a +
- 27. @doanduyhai http://goo.gl/gKxIHb Password matchdirective! 27
- 28. @doanduyhai http://goo.gl/gKxIHb Password matchdirective! 28 <input'type="password"'class="form6control"'name="password"' ''''''placeholder="Password"' ''''''ng6model="user.password"'required>''' ' <input'type="password"'class="form6control"'name="confirm_password"' ''''''placeholder="Password'Confirm"' ''''''password6match="user.password"' ''''''ng6model="user.passwordConfirm"'required>!
- 29. @doanduyhai http://goo.gl/gKxIHb Password matchdirective! 29 killrChat.directive('passwordMatch',6function()6{6 66666return6{6 666666666require:6'ngModel',6 666666666...,6 666666666link:6function6(scope,6el,6attrs,6ngCtrl)6{6 6666666666666scope.$watch(function(){6 66666666666666666//6check6for6equality6in6the6watcher6and6return6validity6flag6 66666666666666666var6modelValue6=6ngCtrl.$modelValue;6 66666666666666666return6(ngCtrl.$pristine6&&6angular.isUndefined(modelValue))6||66 6 6 6 angular.equals(modelValue,6scope.passwordMatch);6 6666666666666},function(validBoolean){6 66666666666666666//6set6validation6with6validity6in6the6listener6 66666666666666666ngCtrl.$setValidity('passwordMatch',6validBoolean);6 6666666666666});6 666666666}6 66666}6 6}666
- 30. @doanduyhai http://goo.gl/gKxIHb Chat zonedirective! 30
- 31. @doanduyhai http://goo.gl/gKxIHb Chat zonedirective! 31 <!##Chat(Main(Section##>( <chat#zone(( ( state="state"(//Reference(to(parent(scope(state(object( ( user="user"(//Reference(to($rootScope.user( ( home="home()"((//Reference(to(home()(method( ( get#light#model="getLightModel()"//Reference(to(getLightModel()(method( >( </chat#zone>(
- 32. @doanduyhai http://goo.gl/gKxIHb Chat zonedirective! 3 scroll modes • display (scroll down on new message) • fixed (de-activate automatic scroll) • loading (scroll up when old messages loaded) 32
- 33. @doanduyhai http://goo.gl/gKxIHb Chat zonedirective! Display 33 messageszone displayzone autoscroll-down
- 34. @doanduyhai http://goo.gl/gKxIHb Chat zonedirective! Fixed 34 fixedposition
- 35. @doanduyhai http://goo.gl/gKxIHb Chat zonedirective! Loading 35 autoscroll-up
- 36. @doanduyhai http://goo.gl/gKxIHb Chat zonedirective! 36 killrChat.directive('chatZone',4function(...)4{4 44444return4{4 444444444...,4 4 link:4function4(scope,4root)4{4 4444444444444...4 4444444444444//Change4in4the4list4of4chat4messages4should4be4intercepted4 4444444444444scope.$watchCollection(4 44444444444444444function()4{44//4watch4on4chat4message4 444444444444444444444return4scope.messages;4 44444444444444444},4 44444444444444444function(newMessages,oldMessages)4{4//4on4change4of4chat4messages4 444444444444444444444if(scrollMode4===4'display')4{4 4444444444444444444444444if(newMessages.length4>4oldMessages.length){4 44444444444444444444444444444//4scroll4down4on4new4chat4messages4 4444444444444444444444444}4else4if(scrollMode4===4'loading')4{4 4 4444444444444444444444444element.scrollTop4=410;4 4 44444444444444444}4 44444444444444444}4 4444444444444);4
- 37. @doanduyhai http://goo.gl/gKxIHb Chat zonedirective! 37 !!!!!!!!!!!!!wrappedElement.bind('scroll',!function()!{! !!!!!!!!!!!!!!!!!if(!<!<<!user!scrolls!down!<<>!)!{! !!!!!!!!!!!!!!!!!!!!!scrollMode!=!'display';! !!!!!!!!!!!!!!!!!}!else!if(!<!<<!user!scroll!up!&&!more!data!to!load!<<>!)!{! !!!!!!!!!!!!!!!!!!!!!scope.$apply(function(){! !!!!!!!!!!!!!!!!!!!!!!!!!usSpinnerService.spin('loading<spinner');! !!!!!!!!!!!!!!!!!!!!!!!!!scrollMode!=!'loading';! !!!!!!!!!!!!!!!!!!!!!!!!!//!load!previous!messages! !!!!!!!!!!!!!!!!!!!!!});! !!!!!!!!!!!!!!!!!!}!else!{! !!!!!!!!!!!!!!!!!!!!!scrollMode!=!'fixed';! !!!!!!!!!!!!!!!!!}! !!!!!!!!!!!!!});!
- 38. @doanduyhai http://goo.gl/gKxIHb WebSockets! SockJS • useStomp over plain TCP • publish/subscribe broker abstraction • browsers subscribe to topics 38
- 39. @doanduyhai http://goo.gl/gKxIHb WebSockets! 39 this.initSockets,=,function($scope),{, , self.closeSocket($scope);, ,var,roomName,=,$scope.state.currentRoom.roomName;, , $scope.socket.client,=,new,SockJS('/killrchat/chat');, , var,stomp,=,Stomp.over($scope.socket.client);, , stomp.connect({},,function(),{, ,,,,,,,,,,,,,stomp.subscribe('/topic/messages/'+roomName,, ,,,,,,,,,,,,,,,,,function(message){,self.notifyNewMessage($scope,message),});, ,,,,,,,,,,,,,stomp.subscribe('/topic/participants/'+roomName,, ,,,,,,,,,,,,,,,,,function(message),{,self.notifyParticipant($scope,,message),});, ,,,,,,,,,,,,,stomp.subscribe('/topic/action/'+roomName,, ,,,,,,,,,,,,,,,,,function(message),{,self.notifyRoomAction($scope,,message),});, ,,,,,,,,,});, ,,,,,,,,,$scope.socket.stomp,=,stomp;, };, Client-side
- 40.
- 41. Q & R !"!
- 42.