BookMyGIG - live gigs for live audiences
Tags: node, redis, socketio, gftwhackathon
Published: 2020-06-04 19:34:13

---
title: BookMyGIG - live gigs for live audiences
published: true
description: Creator/Artist friendly platform to make fair gains for their content.
tags: node, redis, socketio, gftwhackathon
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7xfcui1jeetbu2mka4hk.png
---

As the pandemic broke out, Shows/events were called off across the globe. This has impacted the creators severely and made them sit idle at home. This is when I thought of building something which helps creators make some penny online from their fresh content.

**BookMyGIG** is a platform where creators/artists perform live online shows(could be related to Dance, Fitness, Comedy, Plays, Wokshops, Concerts and the list goes on...) for live audiences. There is also a chat section, where the users who are part of the same show can chat in realtime while they are watching it.

### Submission Category: 

Exciting Experiments

## Demo

* Hompage with monetization support

![Hompage with monetization support](https://dev-to-uploads.s3.amazonaws.com/i/j7fhciy2hiqvya4zbyhr.png)

* Creator gig registration

![Creator gig registration](https://dev-to-uploads.s3.amazonaws.com/i/bxlw3xgg2tvkek6d9v8z.png)

* Streaming credentials

![Streaming credentials](https://dev-to-uploads.s3.amazonaws.com/i/v0y5s2jqvwun2ra58wr6.png)

* Streaming page with no monetization

![Streaming page with no monetization](https://dev-to-uploads.s3.amazonaws.com/i/octx8wwzr824lxf7h0bn.png)

* Streaming page with monetization

![Streaming page with monetization](https://dev-to-uploads.s3.amazonaws.com/i/xoyz8ns5a3bvr64inoa8.png)

* Stream session

![Stream session](https://dev-to-uploads.s3.amazonaws.com/i/oy2y7yi1q9n7j596n9fr.png)

* Realtime chat demo

![Realtime chat demo](https://dev-to-uploads.s3.amazonaws.com/i/jq0g59k3lluyn6sq8f30.gif)

## How it Works in a nutshell

* Creator's perspective
    + Registers for a new show/event by filling out gig registration form, where finally needs to provide `wallet pointer` to accept the micro-payments.
    + After successful registration, OBS credentials are provided to start the live stream.

* User's perspective
    + Goes through the list of registered shows/events on homepage.
    + Gets tickets/access to gigs by making successful online payment.
    + Sits back and enjoys the live show 🍿🥤.
    + Not just that, users who are part of the same show can chat with each other in realtime with the help of realtime chatbox.

* But, how's monetization working under the hood?
    + When the user is in streaming page (creator's live stream section), the micro-payments are sent to creator's wallet 💰.
    + When the user is anywhere in the site other than creator's streaming page, BookMyGIG is making money 💵.

`index.html` looks like...

```html
  <!DOCTYPE html>
  <html>
   <head>
     .....
     <meta name="monetization" content="$BOOKMYGIG_WALLET_POINTER">
     .....
   </head>
   <body>
     .....
   </body>
  </html>
```


and the JS code looks something like this...

```javascript
window.addEventListener('load', () => {
  const inStreamPage = window.location.pathname.startsWith('/gig/')
  if(inStreamPage){
    const metaTag = document.querySelector('meta[name="monetization"]')
    metaTag.setAttribute("content", '$CREATOR_WALLET_POINTER')
  }
})
```

## How I built it 

#### Framework/Technologies used :

* [ReactJS](https://reactjs.org/)
* [NodeJS](https://nodejs.org/en/)
* [Redis](https://redis.io/) as an in-memory database
* [Node-Media-Server](https://github.com/illuspas/Node-Media-Server) for video streaming
* [Socket.io](https://socket.io/) for realtime-chat
* [Web Monetization API](https://webmonetization.org/) + [Coil](https://coil.com/) for monetizing content

#### 4 Pillars of the application : 

*  **REDIS** is used to store data, as it is an in-memory database which makes our app incredibly fast and the process of exchanging data back and forth is seamless. Our application uses different blend of [built-in data structures](https://redislabs.com/redis-enterprise/data-structures/) to store and retreive data in an efficient manner.

* **RTMP** provides a bidirectional message multiplex service over a reliable stream transport, such as TCP, intended to carry parallel streams of video, audio, and data messages, with associated timing information, between a pair of communicating peers. More about RTMP could be learned [here](https://en.wikipedia.org/wiki/Real-Time_Messaging_Protocol).

	- When a creator lists a gig, he/she is given a unique streaming ID which is used to identify the creator on the backend and allocate a separate channel, where creator could live stream and also the audiences of that particular show are isolated from the rest of the channels/shows.
	
	- As soon as the creator hits `start stream` button, the video data is transported to media server, where it is encoded to different formats. In our case we use `flv`, which is a file format used by Adobe Flash Player to store and deliver synchronized audio and video streams over the Internet.

	- Later, on the client side we use a `flvjs plugin` to render the video in realtime. 

* **REALTIME CHAT** is accomplished using socket.io, which is a library to abstract the [WebSocket](https://en.wikipedia.org/wiki/WebSocket) connections. It enables realtime, bi-directional communication between web clients and servers. 
	  - When a client types the message and clicks send, it is sent to server and is then broadcasted to all the connected clients in the same room.
	  
	  - The messages that gets exchanged within a room is isolated from the outside world.

> Also, we are using Redis [pubsub](https://redis.io/topics/pubsub) indirectly as socket.io internally relies on it to achieve the realtime two-way communication.

* **Web-Monetization** gives a special flavour to our product. Apparently, this is one of the best ways to monetize the content by not annoying the users with those flashy banner ads. Let us see how it is being used?
    + **Creator** makes money when... 
        - User buys the access to the show.
        - User Streams the show(*through micro-payments*).
    + **BookMyGIG** makes money when... 
        - User is anywhere in the site(*Other than the show streaming page*).
 
## Challenges I ran into

* Handling creator data in the backend and storing it efficiently using built-in Redis data structures.

* Fetching all the shows asynchronously(using [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)), and resolving them was tricky.

* Figuring out a way to load & play the live stream on the browser without clashing between other sessions was really challenging.

## Accomplishments that I'm proud of

I could successfully able to hook-up all the different parts of the application together and come up with the working end product.

## What I learned

This was the first time having my hands-on experience with Redis, Socket.io, RTMP, Web-Monetization...It was a lot of fun 😁

## Link to Code

{% github manojnaidu619/bookmygig-frontend %}

## Additional Resources/Info 

* [Node-Redis client](https://github.com/NodeRedis/node-redis)
* [Redis commands](https://redis.io/commands)
* [Socket.io Rooms](https://socket.io/docs/rooms-and-namespaces/#Rooms)