Socket Events

Whenever a user Right clicks on your script and selects Insert API Key a API_KEY.js file will be generated in your Script folder. This file will contain the following information:

var API_Key = "6d5f87e923539c5b14f70afcdac2er67g8b";
var API_Socket = "ws://127.0.0.1:3337/streamlabs";

Simply reference the API_Key.js file and use the above variables in your code.

Basic Setup

//---------------------------------
//  Variables
//---------------------------------
var socket = new WebSocket(API_Socket);

//---------------------------------
//  Open Event
//---------------------------------
socket.onopen = function()
{
	// Format your Authentication Information
	var auth = {
		author: "AnkhHeart",
		website: "https://Streamlabs.com",
		api_key: API_Key,
		events: [
			"EVENT_SUB",
			"EVENT_GW_SUB",
			"EVENT_FOLLOW",
			"EVENT_HOST"
		]
	}
	
	//  Send your Data to the server
	socket.send(JSON.stringify(auth));
};

//---------------------------------
//  Error Event
//---------------------------------
socket.onerror = function(error)
{
	//  Something went terribly wrong... Respond?!
	console.log("Error: " + error);
}

//---------------------------------
//  Message Event
//---------------------------------
socket.onmessage = function (message) 
{
	//  You have received new data now process it
	console.log(message.data);
}

//---------------------------------
//  Close Event
//---------------------------------
socket.onclose = function () 
{
	//  Connection has been closed by you or the server
	console.log("Connection Closed!");
}

HTML

The next step would be to create a simple HTML file with an accompanying CSS file which would run the javascript either within your local browser or an OBS browsersource. This will allow you to create animations, notifications, whichever crazy ideas you can come up with 😊

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Task List Example</title>
</head>
<body id="output">

<script src="API_Key.js"></script>
<script src="client.js"></script>
</body>
</html>