What is WebSocket?

WebSocket is very useful pice of technology to communicate seamlessly from server to client, unlike HTTP it use full-duplex data transmission meaning, data can be transmitted in both directions on a signal carrier at the same time. To interact with webSocket we can use socket.io library which hides most of the stuff and provide clean API.

What is strapi?

It’s headless content management system, if this headless makes no sense then think like wordpress or Joomla content management systems (cms) they comes with themes which user can install and see something in action, however in headless CMS there are no theme system, user needs to create their own theme for website or they can consume data on mobile apps.

Strapi is open source nodejs based system, its based on Koa.js.com or follows same style of coding. Its comes with Rest API as well as graphql support too.

I don’t want to create chat-room example for this guide. May be We can create to booking system to send payload to Mars using space-x shuttle service, where user can book a cargo in the space-x rocket once space is allocated from space-x’s team, the user will get notification via WebSocket about cargo space.

It’s going to be very long post, hence I will create it in multiple steps. I will be pushing code to Github in every step so do checkout all the steps of the code.

I will try to implement following

• Create Angular application for frontend system (FE).
• Create user login (FE)
• Create protected route (FE)
• Create Strapi application for backend system (BE).
• Create sample API (BE).
• Create dummy user (BE).
• Start communication from Angular application to Strapi application.
• Identify user and based on user send socket messages.

Lets start building our frontend system first, I will call our fictional cargo booking company. space-XYZ .

Please click her to checkout frontend system.