Connecting Node.js to Streamelements Websockets

If you’re planning on using the Streamelements Websockets service to receive realtime notifications of things like tips, merch purchases and stream store redemptions (it can also do follows, cheers, raids, hosts and subs for Twitch), you may find information is a bit thin on the ground, so here’s a quick guide to getting connected using TypeScript and Node.js.

First things first, the library required to connect to the realtime service. The examples provided by Streamelements are based on the socket.io-client library, but what may not be obvious with a cursory glance is the version requirement (I skipped the HTML example and went straight to npm to install the client). The socket.io library server and client have to operate on the same version and Streamelements use version 2 on the server, so you have to run the version 2 client.

socket.io-client Library Installation

npm install socket.io-client@2 --save

With the correct client installed, you’re good to go, so lets look at some sample code. NOTE:- This code is a butchered version of the class within my bot that links to Streamelements, as such there may be minor issues, but it should give you the general idea.

Sample TypeScript Code

import io, { Socket } from "socket.io-client";

var jwttoken: string = '<YOUR JWT TOKEN>';
var socket: Socket;
var channelid: string = '';
var clientid: string = '';
const passthroughtestevents: boolean = false;

socket = io('https://realtime.streamelements.com', {transports: ['websocket']});

socket.on('connect', () => { socketConnect(); });
socket.on('connect_error', (data) => { socketConnectError(data); });
socket.on('disconnect', () => { socketDisconnect(); });
socket.on('authenticated', (data) => { socketAuthenticated(data); });
socket.on('unauthorized', (data) => { socketUnauthorized(data); });
socket.on('event:test', (data) => { socketEventTest(data); });
socket.on('event', (data) => { socketEvent(data); });
socket.on('event:update', (data) => { socketEventUpdate(data); });
socket.on('event:reset', (data) => { socketEventReset(data); });

function socketConnect() {
    console.log(`Connected, authenticating`);
    socket.emit('authenticate', { method: 'jwt', token: jwttoken });
}

function socketDisconnect() {
    // You don't need to worry about reconnecting, unless you have turned off automatic reconnect (enabled by default)
    console.log(`Disconnected`);
}

function socketAuthenticated(data) {
    /* Sample data
    {"clientId":"<YOUR CLIENT ID>","channelId":"<YOUR CHANNEL ID>","project":"realtime","message":"You are in a maze of dank memes, all alike."}
    */

    channelid = data.channelId;
    clientid = data.clientId;

    console.log(`Connected to ${channelid}`);
}

function socketUnauthorized(data) {
    console.log(`Authentication failed - ${JSON.stringify(data)}`);
}

function socketEventTest(data) {
    // Events raised with the 'Emulate' feature of the overlay editor will arrive as this handler
    // During development, you may with to pass them through to the main handler to test out the rest of your code

    if (passthroughtestevents) {
        socketEvent(data);
    }
}

function socketEvent(data) {
    var listener: string = data.listener;
    var event = data.event;

    switch (listener) {
        case 'redemption-latest':
            console.log(`Stream store redemption - ${JSON.stringify(event)}`);
            break;
        case 'tip-latest':
            console.log(`Tip - ${JSON.stringify(event)}`);
            break;
        case 'merch-latest':
            console.log(`Merch store purchase - ${JSON.stringify(event)}`);
            break;
        default:
            break;
    }
}

function socketEventUpdate(data) {
    console.log(`Session data update event - ${JSON.stringify(data)}`);
}

function socketEventReset(data) {
    console.log(`Session data reset event - ${JSON.stringify(data)}`);
}

This sample code, is only looking for the latest redemptions, tips and merch purchases.