Twitch Vote Overlay

This WebApp is used to create an overlay to handle realtime voting from Twitch chat rooms. The streamer simply authenticates with Twitch through the website, and is given an Overlay URL. They can browse to this URL, or add it as a source in any modern broadcasting software. The overlay is then controlled through the chat room on their channel. Using simple commands, the host can start and end polls, with !poll x,y,z and !endpoll respectively; the other people in the chat can vote using !vote [#].

To see this in action, first head over to Twitch and sign up for an account. Once you have an account, go to the Overlay App and authenticate the App with your Twitch account. You will be redirected to the dashboard, which will provide you with a link to the Overlay URL. Copy this link and open it in a new window, it should start as a blank page. Now, in another window, navigate to your twitch channel page, located at http://www.twitch.tv/[YOUR_ACCOUNT_NAME]. Once there, you can start a new poll by typing in chat: !poll option1,option2,option3. Now as anyone votes by typing !vote #, such as !vote 1, the poll will update in real time. As more people vote the poll will continue to be updated, and once finished you can end the poll using the command !endpoll.

When being used with streaming, the streamer will add the Overlay URL to their broadcasting software and simply have the polls appear on their stream, instead of using a page in the browser.

A record of all your previous poll results is kept, and can be accessed Here after authenticating with the WebApp.

The Overlay Application is made up of a few key parts interacting with each other. The website is powered by NodeJS, running an Express Server. The other key component is a twitch chat bot that listens to users channel's. When a user authenticates the site to their Twitch account, their username is added to a mongoDB database, and the twitch chat bot joins their chat channel and starts listening. The user is given an overlay URL, and this URL contains the code of channel used to communicate with the bot.

http://vote.spades.cloud/spadesbot/source/5ce5d87bc30aa90017a9055e

When the user goes to the provided URL, it forms a WebSocket connection to the server on a channel determined by the code in the URL. The bot has access to each user's Overlay code, and uses this to send poll information through the socket. The authentication information is stored using sessions, but the overlay page itself is not locked behind authentication, as information only flows from the bot to the page, and each users overlay page is accessed by a specific code in the URL. If the user loses their Overlay URL, they will need to reauthenticate to find it again, or to generate a new URL.