Building a realtime score board component with StencilJS and Pusher
Stencil JS: A compiler which generates Web Components and combines the best concepts of the most popular frameworks into a simple build-time tool.
Pusher: A free, realtime, easy to use pub/sub service. Pusher makes realtime as easy as using basic events. You will need to sign up for a free account to get started.
Bulma: A free and open source CSS framework based on Flexbox.
dotenv: A zero-dependency module that loads environment variables from a .env file into process.env.
Here is a glimpse of what we will be working on:
The app is going to have a very simple server that emits Pusher events at intervals.
Setting up our Stencil Project
Ensuring that we already have npm installed, we execute the following commands in our command line:
# Clone the Github repo
git clone https://github.com/ionic-team/stencil-starter.git real-time-scoreboard-app
# Move into the repo
# Remove original remote URL
git remote rm origin
# Install npm dependencies
# install Pusher (client & server) SDK as well as dotevn
npm install pusher-js pusher dotenv --save
When we are done, our project folder should look like this:
In our folder, we should have an index.html file. Empty the file and replace it with the following markup which includes Bulma’s CDN for our scoreboard app styling.
In the component above, we import the Component and State decorators from the Stencil JS core library. The Component decorator is responsible for configuring our scoreboard class component, AppSite. It configures the selector’s name (app-site) which is used to mount the component in the entry index.html:
<app-site></app-site> <!-- our app template in the DOM -->
The State decorator is responsible for managing the state of the scoreboard component. The component is rendered using the render function.
To style our component, create a file called app-site.scss, add our style to it and insert it in our src/components directory:
font-size: 10rem !important;
The component is linked to this style using the Component decorator’s object through the styleUrl property.
Start the app with npm start via your terminal and you should get the following at localhost, port 3333:
Realtime updates with Pusher
For realtime updates to our scoreboard, we are going to integrate Pusher. Pusher is a simple cloud-based API for implementing easy and secure realtime functionalities on the web and mobile apps.
To integrate Pusher, we need to install Pusher on both the client side and on the server side.
The most significant part is using pusher to emit a score payload to the scores event via the soccer channel.
You can start the server by running the following command:
You should see the client updating with emitted values:
It’s really exciting to see where the web is headed. The ability to create shareable web components and build realtime apps such as this with Pusher shows how far the limit can be pushed with web and mobile development. The concepts you have seen in this example is applicable also to server monitoring, shopping counters, admin dashboards, etc. Should you want to add other features to this app, you can check it out on GitHub. You can take a look at Pusher’s documentation as well as that of Stencil’s while you’re at it.