A local development server that emulates the Twitch Heat extension backend API. This allows you to develop and test Heat-based interactive experiences offline without needing the actual Twitch extension.
- 🚀 Full WebSocket API emulation - Compatible with Heat's
wss://heat-api.j38.net/channel/{channelId}protocol - 🎯 Click coordinate broadcasting - Normalized (0.0-1.0) coordinate system matching production
- 📱 Easy template system - Simple HTML templates for creating clickable pages
- 🔄 Real-time synchronization - Multiple clients can connect and see each other's clicks
- 🛠️ Developer-friendly - TypeScript, hot reload, clean architecture
- 📦 Production-ready - Clean code, proper error handling, ready for public release
npm installStart the server in development mode with hot reload:
npm run devThe server will start on:
- WebSocket:
ws://localhost:8080/channel/{channelId} - HTTP Server:
http://localhost:3000(for serving demo pages)
npm run build
npm startFrom your Heat-compatible client code:
const channelId = "12345"; // Any channel ID
const ws = new WebSocket(`ws://localhost:8080/channel/${channelId}`);
ws.addEventListener('open', () => {
console.log('Connected to Heat emulator');
});
ws.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
if (data.type === 'click') {
console.log(`Click at (${data.x}, ${data.y}) from user ${data.id}`);
}
});Clicks are automatically captured from demo pages. To manually send a click:
// Coordinates are normalized 0.0 to 1.0
const clickData = {
type: 'click',
id: 'U123456', // User ID (U=unverified, A=anonymous, or real Twitch ID)
x: '0.500', // Normalized X coordinate (string)
y: '0.750' // Normalized Y coordinate (string)
};
ws.send(JSON.stringify(clickData));Demo pages are served from the public/ directory:
http://localhost:3000/heatmap.html- Visual heatmap demohttp://localhost:3000/markers.html- Click markers demohttp://localhost:3000/test.html- Basic click test page
See the public/templates/ directory for starter templates. Each template includes:
- Click capture - Automatically converts mouse clicks to normalized coordinates
- WebSocket connection - Pre-configured Heat client
- Channel selection - URL parameter support for testing multiple channels
Example template structure:
<!DOCTYPE html>
<html>
<head>
<title>My Heat Template</title>
<script src="/heat-client.js"></script>
</head>
<body>
<div id="main"></div>
<script>
const heat = new HeatClient('12345'); // Your channel ID
heat.on('click', (data) => {
// Handle incoming clicks
console.log(`Click at ${data.x}, ${data.y}`);
});
// Local clicks are automatically captured and sent
</script>
</body>
</html>{
"type": "click",
"id": "U123456",
"x": "0.500",
"y": "0.750"
}{
"type": "system",
"message": "Welcome to Heat emulator"
}Edit src/config.ts to customize:
export const config = {
wsPort: 8080, // WebSocket server port
httpPort: 3000, // HTTP server port for demos
debugMode: true // Enable verbose logging
};├── src/
│ ├── server.ts # Main WebSocket server
│ ├── channels.ts # Channel management
│ ├── types.ts # TypeScript interfaces
│ └── config.ts # Configuration
├── public/
│ ├── heat-client.js # Reusable client library
│ ├── templates/ # Starter templates
│ └── demos/ # Example implementations
└── dist/ # Compiled output
- Use
?channel=YOUR_IDin URLs to test different channels - Open multiple browser windows to test multi-user interactions
- Check the server console for connection logs and events
- All coordinates are normalized (0.0 to 1.0) for viewport independence
MIT
Inspired by Scott Garner's Heat extension for Twitch.