Custom Experiences
Scott Garner edited this page Mar 6, 2022
·
10 revisions
It is possible to create your own custom experiences using the data provided by Heat. Below is a minimal example in javascript.
Legacy connections to Heat using https://heat-ebs.j38.net/ with socket.io or websockets are no longer supported. That endpoint was removed March 5, 2022. Please connect to Heat through https://heat-api.j38.net/ using websockets only as described below.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Container for incoming Heat data. -->
<pre id="data">Waiting for data.</pre>
<script>
// Twitch channel ID for ScottMadeThis.
// Replace with your own channel ID.
const channel = 97032862;
// Connect to the Heat back-end.
let url = `wss://heat-api.j38.net/channel/${channel}`;
let ws = new WebSocket(url);
// Connection successful.
ws.addEventListener('open', () => {
console.log(`Connection open to Heat API server, channel ${channel}.`);
});
// Message received.
ws.addEventListener('message', (message) => {
// Parse message data.
let data = JSON.parse(message.data);
// Write to console.
console.log(data);
// Display in the DOM.
document.getElementById('data').innerText = JSON.stringify(data, null, ' ');
});
</script>
</body>
</html>See heat.js in this repository for a more robust client implementation in JS.
{
type: "click", // Message type, currently either "click" or "system".
id: "U97032862", // User ID for viewer, which may be Anonymous, Opaque or a real Twitch user ID.
x: "0.354", // Normalized X coordinate.
y: "0.736" // Normalized Y coordinate.
}