obs-twitch-camera-frame/js/pubsub.js

const rootElem = document.querySelector(":root");
let ws;
let channelId;

function changeColorTheme(theme) {
	localStorage.setItem("theme", JSON.stringify(theme));
	rootElem.style.setProperty("--border-color-1", theme[0]);
	rootElem.style.setProperty("--border-color-2", theme[1]);
}

function pubSubNonce(length) {
	var text = "";
	var possible =
		"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
	for (var i = 0; i < length; i++) {
		text += possible.charAt(Math.floor(Math.random() * possible.length));
	}
	return text;
}

function pubSubHeartbeat() {
	message = {
		type: "PING",
	};
	ws.send(JSON.stringify(message));
}

function pubSubListen(topic) {
	message = {
		type: "LISTEN",
		nonce: pubSubNonce(15),
		data: {
			topics: [topic],
			auth_token: CONFIG.twitch.oAuth,
		},
	};
	ws.send(JSON.stringify(message));
}

function pubSubConnect() {
	var heartbeatInterval = 1000 * 60; //ms between PING's
	var reconnectInterval = 1000 * 3; //ms to wait before reconnect
	var heartbeatHandle;

	ws = new WebSocket("wss://pubsub-edge.twitch.tv");

	ws.onopen = function (event) {
		console.log("PubSub Opened");
		pubSubHeartbeat();
		heartbeatHandle = setInterval(pubSubHeartbeat, heartbeatInterval);

		pubSubListen("channel-points-channel-v1." + channelId);
	};

	ws.onerror = function (error) {
		console.log("ERR:  " + JSON.stringify(error) + "\n");
	};

	ws.onmessage = function (event) {
		data = JSON.parse(event.data);
		if (data.type == "MESSAGE") {
			message = JSON.parse(data.data.message);
			reward = message.data.redemption.reward;
			console.log(`Received reward: ${reward.id} - ${reward.title}`);
			switch (reward.id) {
				case CONFIG.twitch.rewardIds.turnGreen:
					changeColorTheme(CONFIG.themes.green);
					break;
				case CONFIG.twitch.rewardIds.turnPurple:
					changeColorTheme(CONFIG.themes.purple);
					break;
				case CONFIG.twitch.rewardIds.turnRed:
					changeColorTheme(CONFIG.themes.red);
					break;
				case CONFIG.twitch.rewardIds.turnBlue:
					changeColorTheme(CONFIG.themes.blue);
					break;
			}
		}

		if (message.type == "RECONNECT") {
			setTimeout(pubSubConnect, reconnectInterval);
		}
	};

	ws.onclose = function () {
		clearInterval(heartbeatHandle);
		setTimeout(pubSubConnect, reconnectInterval);
	};
}

function pubSubMain() {
	fetch("https://api.twitch.tv/helix/users?login=" + CONFIG.twitch.username, {
		headers: {
			Authorization: "Bearer " + CONFIG.twitch.oAuth,
			"Client-Id": CONFIG.twitch.clientId,
			"Content-Type": "application/json",
		},
	})
		.then((response) => response.json())
		.then((resData) => {
			channelId = resData.data[0].id;
			pubSubConnect();
		});
}

pubSubMain();
changeColorTheme(JSON.parse(localStorage.getItem("theme")));