This is insane how we can combine Laravel,NodeJS,AngularJS and Redis to create an amazing product . For this tutorial i hope you know basics of angularjs , laravel and dont worry about redis , nodejs i will cover that in detail . Below are our steps for User Management Panel .
- Laravel Installation and Configuration
- Setting up Redis Server and NodeJS
- Wrapping up with AngularJS
- Final Step
What are we creating ?
Laravel Installation and Configuration
Install a fresh copy of laravel and configure your database . I am using mysql as my database and redis to publish/subscribe events .
Now lets create a listener which listens to our update user event . Create a new folder inside the app and name it KodeInfo , create one more folder inside app/KodeInfo and name it Handlers
Add this to autoload classmap as below and run php artisan dump-autoload
1 2 |
<span class="token string">"app/KodeInfo"</span><span class="token punctuation">,</span> <span class="token string">"app/KodeInfo/Handlers"</span> |
1 |
php artisan dump-autoload |
Now create a new class inside our app/KodeInfo and name it UserUpdatedEventHandler
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<span class="token delimiter"><?php</span> <span class="token keyword">namespace</span> <span class="token package">KodeInfo<span class="token punctuation">\</span>Handlers</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Redis</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Response</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">UserUpdatedEventHandler</span> <span class="token punctuation">{</span> <span class="token keyword">CONST</span> <span class="token constant">EVENT</span> <span class="token operator">=</span> <span class="token string">'users.update'</span><span class="token punctuation">;</span> <span class="token keyword">CONST</span> <span class="token constant">CHANNEL</span> <span class="token operator">=</span> <span class="token string">'users.update'</span><span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">handle</span><span class="token punctuation">(</span><span class="token variable">$data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$redis</span> <span class="token operator">=</span> <span class="token scope">Redis<span class="token punctuation">::</span></span><span class="token function">connection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$redis</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">publish</span><span class="token punctuation">(</span><span class="token scope"><span class="token keyword">self</span><span class="token punctuation">::</span></span><span class="token constant">CHANNEL</span><span class="token punctuation">,</span> <span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
We will create a listeners.php in app folder and will listen for event users.update . whenever users.update it will execute handle method of UserUpdatedEventHandler class which will publish our data to users.update channel . So that means we have to listen for our event users.update in our angularjs code and act accordingly .
listeners.php
1 2 3 |
<span class="token delimiter"><?php</span> <span class="token scope">Event<span class="token punctuation">::</span></span><span class="token function">listen</span><span class="token punctuation">(</span>\<span class="token scope">KodeInfo<span class="token punctuation">\</span>Handlers<span class="token punctuation">\</span>UserUpdatedEventHandler<span class="token punctuation">::</span></span><span class="token constant">EVENT</span><span class="token punctuation">,</span> <span class="token string">'\KodeInfo\Handlers\UserUpdatedEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Our UsersController will handle request from angularjs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<span class="token delimiter"><?php</span> <span class="token keyword">class</span> <span class="token class-name">UsersController</span> <span class="token keyword">extends</span> <span class="token class-name">BaseController</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token scope">View<span class="token punctuation">::</span></span><span class="token function">make</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">'rows'</span><span class="token operator">=</span><span class="token operator">></span><span class="token scope">User<span class="token punctuation">::</span></span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token string">'window'</span><span class="token operator">=</span><span class="token operator">></span><span class="token keyword">new</span> <span class="token class-name"><span class="token punctuation">\</span>KodeInfo<span class="token punctuation">\</span>JSHelper</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">addUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token variable">$user</span><span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span> <span class="token operator">=</span> <span class="token scope">Input<span class="token punctuation">::</span></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">email</span> <span class="token operator">=</span> <span class="token scope">Input<span class="token punctuation">::</span></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'email'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token scope">Event<span class="token punctuation">::</span></span><span class="token function">fire</span><span class="token punctuation">(</span>\<span class="token scope">KodeInfo<span class="token punctuation">\</span>Handlers<span class="token punctuation">\</span>UserUpdatedEventHandler<span class="token punctuation">::</span></span><span class="token constant">EVENT</span><span class="token punctuation">,</span> <span class="token keyword">array</span><span class="token punctuation">(</span><span class="token scope">User<span class="token punctuation">::</span></span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">updateUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token variable">$user</span><span class="token operator">=</span><span class="token scope">User<span class="token punctuation">::</span></span><span class="token function">find</span><span class="token punctuation">(</span><span class="token scope">Input<span class="token punctuation">::</span></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span> <span class="token operator">=</span> <span class="token scope">Input<span class="token punctuation">::</span></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">email</span> <span class="token operator">=</span> <span class="token scope">Input<span class="token punctuation">::</span></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'email'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token scope">Event<span class="token punctuation">::</span></span><span class="token function">fire</span><span class="token punctuation">(</span>\<span class="token scope">KodeInfo<span class="token punctuation">\</span>Handlers<span class="token punctuation">\</span>UserUpdatedEventHandler<span class="token punctuation">::</span></span><span class="token constant">EVENT</span><span class="token punctuation">,</span> <span class="token keyword">array</span><span class="token punctuation">(</span><span class="token scope">User<span class="token punctuation">::</span></span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">deleteUser</span><span class="token punctuation">(</span><span class="token variable">$user_id</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token scope">User<span class="token punctuation">::</span></span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$user_id</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token scope">Event<span class="token punctuation">::</span></span><span class="token function">fire</span><span class="token punctuation">(</span>\<span class="token scope">KodeInfo<span class="token punctuation">\</span>Handlers<span class="token punctuation">\</span>UserUpdatedEventHandler<span class="token punctuation">::</span></span><span class="token constant">EVENT</span><span class="token punctuation">,</span> <span class="token keyword">array</span><span class="token punctuation">(</span><span class="token scope">User<span class="token punctuation">::</span></span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token scope">Response<span class="token punctuation">::</span></span><span class="token function">json</span><span class="token punctuation">(</span><span class="token scope">User<span class="token punctuation">::</span></span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
We are using same view files which we have used in our previous tutorial Laravel Admin Panel . So we are using Adminlte with following directory structure
I wont be putting all views here so please have a look at views on github . We will get back to our app and work on nodejs,redis,angularjs . Below is our index.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<span class="token markup"><span class="token doctype"><!DOCTYPE html></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>html<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>head<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>meta <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>title<span class="token punctuation">></span></span></span>Laravel Realtime App<span class="token markup"><span class="token tag"><span class="token punctuation"></</span>title<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>meta <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1, maximum-scale<span class="token punctuation">=</span>1, user-scalable<span class="token punctuation">=</span>no<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>viewport<span class="token punctuation">'</span></span><span class="token punctuation">></span></span></span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">style</span><span class="token punctuation">(</span><span class="token string">"/css/bootstrap.min.css"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">style</span><span class="token punctuation">(</span><span class="token string">"/css/font-awesome.min.css"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">style</span><span class="token punctuation">(</span><span class="token string">"/css/ionicons.min.css"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">style</span><span class="token punctuation">(</span><span class="token string">"/css/AdminLTE.css"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>!--[if <span class="token attr-name">lt</span> <span class="token attr-name">IE</span> <span class="token attr-name">9]</span><span class="token punctuation">></span></span></span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span>"https<span class="token punctuation">:</span><span class="token comment" spellcheck="true">//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js")}}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">style</span><span class="token punctuation">(</span>"https<span class="token punctuation">:</span><span class="token comment" spellcheck="true">//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js")}}</span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>![endif]--<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span></span> window<span class="token punctuation">.</span>extras <span class="token operator">=</span> window<span class="token punctuation">.</span>extras <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token variable">$window</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span></span> @<span class="token keyword">yield</span><span class="token punctuation">(</span><span class="token string">'styles'</span><span class="token punctuation">)</span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>base <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>head<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>body <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>skin-blue<span class="token punctuation">"</span></span> <span class="token attr-name">ng-app</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>DemoApp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> <span class="token markup"><span class="token comment" spellcheck="true"><!-- header logo: style can be found in header.less --></span></span> @<span class="token keyword">include</span><span class="token punctuation">(</span><span class="token string">'layouts.header'</span><span class="token punctuation">)</span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrapper row-offcanvas row-offcanvas-left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> <span class="token markup"><span class="token comment" spellcheck="true"><!-- Left side column. contains the logo and sidebar --></span></span> @<span class="token keyword">include</span><span class="token punctuation">(</span><span class="token string">'layouts.navigation'</span><span class="token punctuation">)</span> <span class="token markup"><span class="token comment" spellcheck="true"><!-- Right side column. Contains the navbar and content of the page --></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>aside <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right-side<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">ng-view</span><span class="token punctuation">></span></span></span><span class="token markup"><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>aside<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token comment" spellcheck="true"><!-- /.right-side --></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token comment" spellcheck="true"><!-- ./wrapper --></span></span> <span class="token markup"><span class="token comment" spellcheck="true"><!--Template Plugins--></span></span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">"/js/jquery.2.0.3.js"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">"/js/jquery-ui-1.10.3.min.js"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">"/js/bootstrap.min.js"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">"js/plugins/iCheck/icheck.min.js"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">"js/AdminLTE/app.js"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token markup"><span class="token comment" spellcheck="true"><!--AngularJS--></span></span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span>"https<span class="token punctuation">:</span><span class="token comment" spellcheck="true">//code.angularjs.org/1.2.13/angular.js")}}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span>"<span class="token comment" spellcheck="true">//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.js")}}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span>"<span class="token comment" spellcheck="true">//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js")}}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span>"<span class="token comment" spellcheck="true">//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js")}}</span> <span class="token markup"><span class="token comment" spellcheck="true"><!--Socket.io--></span></span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span>"http<span class="token punctuation">:</span><span class="token comment" spellcheck="true">//localhost:3000/socket.io/socket.io.js")}}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">"/angular/modules/angular-socket-io/socket.js"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">"/angular/app.js"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token markup"><span class="token comment" spellcheck="true"><!--Controllers and Services--></span></span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">"/angular/services/users-service.js"</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> @<span class="token keyword">yield</span><span class="token punctuation">(</span><span class="token string">'scripts'</span><span class="token punctuation">)</span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>body<span class="token punctuation">></span></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>html<span class="token punctuation">></span></span></span> |
In the above code, we are getting some variables to angularjs so that it will be helpful . We can send csrf_token with each post request to be safe from csrf attach and so on . We are using KodeInfo/JSHelper to do so
1 2 3 |
<span class="token operator"><</span>script<span class="token operator">></span> window<span class="token punctuation">.</span>extras <span class="token operator">=</span> window<span class="token punctuation">.</span>extras <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>$window<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> |
We have defined a ng-view in which our list will load and have some angular scripts . Here the main part in below which we will get back soon after covering nodejs . I have seen many people get strucked in this step of how to load socket.io.js
1 |
<span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token scope">HTML<span class="token punctuation">::</span></span><span class="token function">script</span><span class="token punctuation">(</span>"http<span class="token punctuation">:</span><span class="token comment" spellcheck="true">//localhost:3000/socket.io/socket.io.js")}}</span> |
We have also using https://github.com/btford/angular-socket-io library to easily use socket.io inside angularjs .
Setting up Redis Server and NodeJS
I was using windows at the time of writing this post so i have downloaded win64 executable from this link . It is also included with the source code .
Now download and install nodejs from nodejs website and windows users make sure you have set the path for nodejs installation folder [mine was C:\Program Files\nodejs] . Now start command prompt/terminal and navigate to your laravel project/public directory , create a new folder nodejs and navigate to nodejs from cmd/terminal , now lets install our dependencies using below command .
1 |
npm install socket.io express redis |
Now create a new file inside public/nodejs and name it server.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<span class="token keyword">var</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'http'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> server <span class="token operator">=</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> redis <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'redis'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> io <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'socket.io'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> client <span class="token operator">=</span> redis<span class="token punctuation">.</span><span class="token function">createClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token string">'localhost'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Listening....."</span><span class="token punctuation">)</span><span class="token punctuation">;</span> io<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span>server<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'connection'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> redisClient <span class="token operator">=</span> redis<span class="token punctuation">.</span><span class="token function">createClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> redisClient<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token string">'users.update'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Redis server running....."</span><span class="token punctuation">)</span><span class="token punctuation">;</span> redisClient<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"message"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>channel<span class="token punctuation">,</span> message<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> client<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span>channel<span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'disconnect'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> redisClient<span class="token punctuation">.</span><span class="token function">quit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
In the above code our nodejs is listening on port 3000 .
we have created a new redis client
1 |
<span class="token keyword">const</span> redisClient <span class="token operator">=</span> redis<span class="token punctuation">.</span><span class="token function">createClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
and subscribed to users.update event
1 2 3 4 5 6 7 8 |
redisClient<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token string">'users.update'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Redis server running....."</span><span class="token punctuation">)</span><span class="token punctuation">;</span> redisClient<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"message"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>channel<span class="token punctuation">,</span> message<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> client<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span>channel<span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Once the event is fired we will send message to all subscribers to that channel .
Now go back to our index.blade.php do you remember what i told about socket.io script .
make sure the port which are we are using in server.js is same here .
Wrapping up with AngularJS
Our angularjs directory structure is below
In our app.js i have defined one route so you can expand it and do not have to declare routeprovider.
1 2 3 4 5 6 7 8 9 10 11 12 |
app<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'$routeProvider'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>$routeProvider<span class="token punctuation">)</span> <span class="token punctuation">{</span> $routeProvider<span class="token punctuation">.</span> <span class="token function">when</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> templateUrl<span class="token punctuation">:</span> <span class="token string">'/partials/users/index.html'</span><span class="token punctuation">,</span> controller<span class="token punctuation">:</span> <span class="token string">'UsersController'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span> <span class="token function">otherwise</span><span class="token punctuation">(</span><span class="token punctuation">{</span> redirectTo<span class="token punctuation">:</span> <span class="token string">'/'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
We have defined socket factory
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
app<span class="token punctuation">.</span><span class="token function">factory</span><span class="token punctuation">(</span><span class="token string">'socket'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>$rootScope<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> socket <span class="token operator">=</span> io<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span><span class="token string">'http://127.0.0.1:3000/'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> on<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span> socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> args <span class="token operator">=</span> arguments<span class="token punctuation">;</span> $rootScope<span class="token punctuation">.</span><span class="token function">$apply</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> callback<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>socket<span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> emit<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> data<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span> socket<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> args <span class="token operator">=</span> arguments<span class="token punctuation">;</span> $rootScope<span class="token punctuation">.</span><span class="token function">$apply</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token punctuation">{</span> callback<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>socket<span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Our userscontroller is basic it will load all users at startup and have methods to create , update or delete the user . In our userscontroller, we have listening for users.update event and get the new users set .
Final Step
Our final step is to run our redis server with admin rights , run our server.js using node which can be done like below in terminal / cmd
1 |
node server.js |
I have also created a migration make sure to run
1 |
php artisan migrate |
You can also monitor redis request using the redis-cli monitor
Now navigate to / route and you will see all users
Output: