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.
Note
I'm reviewing this post as I'm migrating it into my new website and it's worth pointing out that as with many of these providers it seems the API is quite fluid. So this code may not work anymore. It's also worth pointing out that you should check the latest StreamElements documentation for the latest API information (although to be fair, I'm not hopeful it will be any good).
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.
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.
importio,{Socket}from"socket.io-client";varjwttoken:string='<YOUR JWT TOKEN>';varsocket:Socket;varchannelid:string='';varclientid:string='';constpassthroughtestevents: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);});functionsocketConnect(){console.log(`Connected, authenticating`);socket.emit('authenticate',{method:'jwt',token:jwttoken});}functionsocketDisconnect(){// You don't need to worry about reconnecting, unless you have turned off automatic reconnect (enabled by default)console.log(`Disconnected`);}functionsocketAuthenticated(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}`);}functionsocketUnauthorized(data){console.log(`Authentication failed - ${JSON.stringify(data)}`);}functionsocketEventTest(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 codeif(passthroughtestevents){socketEvent(data);}}functionsocketEvent(data){varlistener:string=data.listener;varevent=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;}}functionsocketEventUpdate(data){console.log(`Session data update event - ${JSON.stringify(data)}`);}functionsocketEventReset(data){console.log(`Session data reset event - ${JSON.stringify(data)}`);}
This sample code, is only looking for the latest redemptions, tips and merch purchases.