A custom twitch chat that aims to fill gaps in the official Twitch chat for streamers.
The main goal is to follow your chat as best as possible.

For developpers, Twitchat exposes an API to receive events and control some features remotely.
📖 Read its documentation.

Features

Project setup

First create a credentials.json file on the root directory and fill in these values :

{
	"server_port": 3018,
	"admin_ids": ["YOUR_TWITCH_USER_ID"],
	"csrf_key": "",

	"twitch_client_id": "",
	"twitch_client_secret": "",
	"twitch_redirect_uri": "http://localhost:8080/oauth",
	"twitch_scopes": [
		"chat:read",
		"chat:edit",
		"channel:read:redemptions",
		"channel:manage:polls",
		"channel:manage:predictions",
		"moderator:manage:announcements",
		"moderator:manage:chat_messages",
		"moderator:manage:chat_settings",
		"channel:moderate",
		"moderation:read",
		"channel:manage:moderators",
		"channel:manage:vips",
		"channel:manage:raids",
		"channel:manage:broadcast",
		"channel:read:hype_train",
		"channel:edit:commercial",
		"channel:read:subscriptions",
		"channel:read:goals",
		"user:read:follows",
		"user:read:blocked_users",
		"user:manage:blocked_users",
		"moderator:manage:banned_users",
		"whispers:read",
		"user:manage:whispers",
		"moderator:manage:automod",
		"moderator:read:chatters",
		"moderator:read:followers",
		"moderator:manage:shield_mode"
	],
	
	"spotify_client_id": "",
	"spotify_client_secret": "",
	"spotify_scopes": "user-read-currently-playing user-modify-playback-state playlist-read-private",
	"spotify_redirect_uri": "http://localhost:8080/spotify/auth"
}

Create a twitch application and fill in the client_id and client_secret values.
Write anything in the csrf_key field, it will be used to secure twitch authentication from CSRF attacks.
Configure the redirect URI of the twitch application with your localhost and/or production URI.
Set it as the redirect_uri value of the credentials.
The redirect uri must end with /oauth, example :

http://localhost:8080/oauth

You can also create a spotify application and fill in the spotify spotify_client_id and spotify_client_secret
By default the server listens on port 3018, you can change it on credentials.json and src_front/utils/Config.ts.

Environment setup

This project has been coded with VSCode with Volar plugin.
It is recommended to install these plugins:
Vue Language Features (Volar): https://marketplace.visualstudio.com/items?itemName=Vue.volar

TypeScript Vue Plugin: https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin

I18n-ally Plugin: https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally

For correct typings and better lint performance, it is advised to the enable the Take over mode by disabling the native VSCode's Typescript and Javascript features. Read how to.

Compile project

Install dependencies

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Run server

node server/boostrap.js

Install server

All the following MUST be done on a seperate folder from the GIT project.
Compile the project and push the content of the server folder on your server root.
Next to this file, create a public folder and push the content of your local dist folder inside it.
Also add the credentials.json file at the root of the project.
Create an env.conf file, just write prod inside, and push it at the root of the project.
Install all the production dependencies and run the server.
Here is the expected file structure:
─ root
  ├─ node_modules/
  ├─ dist/
  ├─ controllers/
  ├─ utils/
  ├─ bootstrap.js
  ├─ env.conf
  ├─ credentials.json

Localization

App labels can be found under i18n folder.
They are splitted by language then by sections.
Any new file or folder structure can be added to this.
These are all merged into static/labels.json during the build process.
Files can have any name but should have full JSON structure so the plugin i18n-ally can check for label keys on the code. Example:\

─ en\
  ├─ global.json\
  ├─ subFolder/\
  ├─── hello.json/\

global.json example:

{
	"global":{
		"hello":"World"
	}
}

hello.json example:

{
	"subFolder":{
		"hello":{
			"lorem":"ipsum dolor sit amet"
		}
	}
}

Will output this JSON file:

{
	"en":{
		"global":{
			"hello":"World"
		},
		"subFolder":{
			"hello":{
				"lorem":"ipsum dolor sit amet"
			}
		}
	}
}

To make localization easier you can start the following PM2 process that will watch for any file change under i18n folder and rebuild the labels.json file.

pm2 start labels-pm2.json

Labels won't automatically be updated on the frontend though (if anyone knows how to make Vite detect that...). To force labels refresh you can use this keyboard shortcut on Twitchat CTRL+Shift+L

Package Stream Deck™ plugin

Run the following command:

npm run streamdeck_package

The compiled plugin will be there streamdeck_plugin/fr.twitchat.streamDeckPlugin.

egavard / Twitchat