Introduce
In this article we learn how to build an online counting application without having to reload the page. To build the application we use Laravel and Pusher. So what is pusher?
pusher is a cloud service, creating an intermediary server that can help us handle real-time tasks. The data is sent to pusher, and pusher sends it to the registered clients and channels.
Pros and cons of pusher
- Pros: Short application development time to be able to create a realtime application using pusher without knowing too much knowledge.
- Disadvantages: Use through an intermediate server so the interaction will be a bit slower but not significant.
- For applications with high number of users or high number of requests per day, it is necessary to upgrade or use other technologies more optimally.
Install a new application on Pusher
Register an account on Pusher ( link )
Create project laravel and install Pusher SDK, Echo
Create a laravel project
laravel new realtime-counter-laravel-pusher
Next, Next use the composer to install the Pusher PHP SDK
composer requires pusher / pusher-php-server
Next install npm
npm install
Next, install the 2 Laravel Echo and Pusher JS libraries
Laravel Echo is a JavaScript library that it uses to subscribe to channels and listen for events broadcast by Laravel. So, you need to install Echo via NPM package manager. In this example, we also install pusher-js because we need to use Pusher broadcaster:
npm install –save laravel-echo pusher-js
Next run
php artisan make: auth
Project configuration
First create values for APP_ID , APP_KEY , APP_SECRET and APP_CLUSTER in the .env file
1 2 3 4 5 6 7 8 9 | # .env BROADCAST_DRIVER=pusher PUSHER_APP_ID=your-pusher-app-id PUSHER_APP_KEY=your-pusher-app-key PUSHER_APP_SECRET=your-pusher-app-secret PUSHER_APP_CLUSTER=your-pusher-app-cluster |
Next, at the end of the resources/assets/js/bootstrap.js add the following code:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">import</span> Echo <span class="token keyword">from</span> <span class="token string">"laravel-echo"</span> window <span class="token punctuation">.</span> Echo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Echo</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> broadcaster <span class="token punctuation">:</span> <span class="token string">'pusher'</span> <span class="token punctuation">,</span> key <span class="token punctuation">:</span> <span class="token string">'your-pusher-app-key'</span> <span class="token punctuation">,</span> cluster <span class="token punctuation">:</span> <span class="token string">'ap2'</span> <span class="token punctuation">,</span> encrypted <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Online users
In this application, Displays the number of online users on the page when any user who accesses the page or exits the application page updates the online users.
To listen for the event the user accesses or exits the page, it is necessary to use the listen function
1 2 3 4 5 6 7 | <span class="token function">listen</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> Echo <span class="token punctuation">.</span> <span class="token function">join</span> <span class="token punctuation">(</span> <span class="token string">'counter'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">here</span> <span class="token punctuation">(</span> users <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> count <span class="token operator">=</span> users <span class="token punctuation">.</span> length <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">joining</span> <span class="token punctuation">(</span> user <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> count <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">leaving</span> <span class="token punctuation">(</span> user <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> count <span class="token operator">--</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- Join : when the user accesses
- here : Provide a list of currently accessed users
- joining : executes when other users join the channel
- leaving : executes when the user leaves the channel
Authorization
Each channel present is a separate channel, in BroadcastServiceProvider we will set the permissions for the channel. To authenticate allowing the user to listen to a specific channel, in the routes/channels.php add the following code:
1 2 3 4 5 6 7 | Broadcast <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">channel</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'video'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token variable">$user</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'id'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token variable">$user</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">id</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'name'</span> <span class="token operator">=</span> <span class="token operator">></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 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> |
As we can see, return is not true or false. If the authenticated user listens on the channel, it will return an array of values including the user’s id and name.
However, we can write a different logic depending on the specific requirements of each application such as:
1 2 3 4 5 6 7 8 9 10 11 | Broadcast <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">auth</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'video'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token variable">$user</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token variable">$user</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'id'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token variable">$user</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">id</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'name'</span> <span class="token operator">=</span> <span class="token operator">></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 punctuation">]</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token boolean">false</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Vue Component
Above we have installed and configured, followed by displaying the number of people online on the page with vuejs
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 | <span class="token operator"><</span> template <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"row"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"col-md-8 col-md-offset-2"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"panel panel-default"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"panel-heading"</span> <span class="token operator">></span> Realtime Counter <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"panel-body"</span> <span class="token operator">></span> <span class="token operator"><</span> p <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lead text-center"</span> <span class="token operator">></span> Online Now <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"text-center"</span> <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> count <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> template <span class="token operator">></span> <span class="token operator"><</span> script <span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">data</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 punctuation">{</span> count <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function">mounted</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">listen</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> methods <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">listen</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> Echo <span class="token punctuation">.</span> <span class="token function">join</span> <span class="token punctuation">(</span> <span class="token string">'counter'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">here</span> <span class="token punctuation">(</span> users <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> count <span class="token operator">=</span> users <span class="token punctuation">.</span> length <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">joining</span> <span class="token punctuation">(</span> user <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> count <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">leaving</span> <span class="token punctuation">(</span> user <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> count <span class="token operator">--</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 operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> |
Below is an illustration of the number of visitors.
Conclude
Above is the article to create an online counting application on the page. The article covered basic concepts as well as configuration settings for building applications using laravel on BE and vue on FE.