Realtime App Using Laravel + NodeJs

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

Now create a new class inside our app/KodeInfo and name it UserUpdatedEventHandler

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

Our UsersController will handle request from angularjs

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

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

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

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 .

Now create a new file inside public/nodejs and name it server.js

In the above code our nodejs is listening on port 3000 .
we have created a new redis client

and subscribed to users.update event

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.

We have defined socket factory

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

I have also created a migration make sure to run

You can also monitor redis request using the redis-cli monitor
Now navigate to / route and you will see all users

Output: