Setup Instructions: Real-Time Twitch Chat Helper

HOW TO USE TWITCH CHAT HELPER

Installation Steps

Extract all the contents of this folder.
Download and install the latest version of Node.js on your computer. Check to see if npm is also installed by entering the following command in your terminal.
```
                
                    npm -v
                
            
```
Open the command prompt by typing 'cmd' in your windows search (you can alternately use the shortcut 'Win + R') and install the 'Serve' package from the npm package by typing in:
```
                
                    npm install -g serve
                
            
```
Open the terminal for the folder 'chat-widget-ws'. To do this, open the folder and on the address bar of the folder window, type 'cmd' and hit Enter.

In the terminal window, we now install WebSocket by executing the following commands one after the other:

                
                    npm init -y
                    npm install ws
                    node server.js

Keep the terminal window open while you set up your other settings.

Open the Twitch Chat Helper over a local server

There are multiple ways to get the live server address. Here are two methods:

Using Visual Studio Code 'Live Preview' Extension

Open VS Code and make sure to have the 'Live Preview' extension installed.
Now, open the Twitch Chat Helper folder in VS Code.
In the 'Explorer' panel in your sidebar, right-click on the file 'highlighted-chat-display.html' and click on 'Show Preview'. This should open up a browser window within VS Code.
Copy the link it has created which should read something like 'http://127.0.0.1:3000/highlighted-chat-display.html' to a web browser of your choice. You can now close VS Code.
This is the Chat Control Panel which will receive the chat feed for your Twitch channel, and allow you to select the user messages that you'd like to highlight for your audience. Click on the link 'Browser Source URL for OBS' to copy it. This link will be used as the URL in OBS.

Using the Serve package in npm

Open the terminal window for the top-level folder by opening the folder and typing in 'cmd' in the address bar of the folder.

In the terminal window, type the following command and hit Enter.

                            
                                serve

It should give you two links, one is a localhost address and the other a network address. You can choose whichever you want but I prefer the network address.
Copy and paste the suitable link to your browser window. You should now be able to click into 'chat-control-panel.html' and you're set!
This is the Chat Control Panel which will receive the chat feed for your Twitch channel, and allow you to select the user messages that you'd like to highlight for your audience. Click on the link 'Browser Source URL for OBS' to copy it. This link will be used as the URL in OBS.

Set up OBS

OBS is the streaming software we are using this on, but it should ideally work with any streaming software. Install and open OBS.
In the Sources panel, click on '+' and then, 'Browser'.
Name the source whatever you want, I chose 'Highlighted Chat', and click 'OK'.
In the Properties window, in the 'URL' field, enter the network address you got from the Chat Control Panel.
Enter '1920' under 'Width'.
Enter '300' under 'Height'.
Check the box for 'Shutdown source when not visible'.
Hit 'OK'.
BONUS: You can also add the Twitch Chat Helper as a dock in OBS by going to Docks > Custom Browser Docks and adding the Chat Control Panel as a browser source.

Steps to take before every livestream

Open the terminal window for the top-level folder by opening the folder and typing in 'cmd' in the address bar of the folder.

In the terminal window, type the following command and hit Enter.

                    
                        serve

It should give you two links, one is a localhost address and the other a network address. You can choose whichever you want but I prefer the network address. If you don't have any other localHost servers open, this should ideally lead you to the 3000 port which looks like this: http://127.0.0.1:3000/
Copy and paste the suitable link to your browser window. You should now be able to click into 'chat-control-panel.html'.
This is the Chat Control Panel which will receive the chat feed for your Twitch channel, and allow you to select the user messages that you'd like to highlight for your audience. Click on the link 'Browser Source URL for OBS' to copy it. This link will be used as the URL in OBS.
Open the terminal window for the folder 'chat-widget-ws'. To do this, open the folder and on the address bar of the folder window, type 'cmd' and hit Enter.

Execute the following command in the terminal window:

                        
                            node server.js

Keep that terminal running during the entire livestream.

Features

'Real-Time Twitch Chat Helper' is a basic widget to help a Twitch livestreamer to manage their chat feed and show which chat message they are currently discussing or responding to on-screen.
The streamer can customize the way their livestream's chat messages are displayed on-screen through the 'font selection' and 'color selection' options.
The displayed chat message disappears after the streamer-selected seconds.
If the streamer clicks on another message from their chat feed, it will replace the previously selected chat message immediately.
The streamer is expected to have the 'Real-Time Twitch Chat Helper Control Panel' browser window open during their livestream from where they can control which message to be displayed live on-screen, which is a separate file and the browser source in OBS.
The displayed chat message consists of the username of the message's origin and the message. The username has the same color as the user's preference in Twitch.
Though the streamer can see a timestamp in the Control Panel, it is not passed on to the livestream. This is by design.
If Twitch chat emotes are included in the chat message, they will be displayed correctly in their image form, whether they are global or custom sub emotes, even if they are animated.
When a message is clicked on for highlighting on stream, it will also appear in the 'Highlighted Message History' panel.
If the livestreamer is addressing a message for longer than intended, the messages in the 'Highlighted Message History' panel are clickable and can be sent to show onto the livestream.

What's NOT included

Badges of the chat user is not available at this moment.
Further customization (such as, borders and animations) of the displayed message box on screen is not available yet.

This folder contains:

A folder containing server-side code for WebSocket.
The minified version of the Twitch chat API has been downloaded and named 'tmi.min.js' in this folder for quick access and loading.
An HTML file named 'chat-control-panel.html' which is what the user opens and accesses in their browser.
An HTML file named 'highlighted-chat-display.html'. This file becomes the browser source for OBS livestreaming software and where the output from the control panel is sent to.
A README file with details of what this folder contains and the features of this Chat Helper.
An HTML file named 'setup-instructions.html' with setup instructions (a beautified version of the README file).

Setup Instructions for Real-Time Twitch Chat Helper

Quick Links