The API allows real-time, bidirectional communication between your application and the Social Stream Ninja extension/app, the dock page, and the overlay pages.
There is an easy to use sandbox to play with some of the common API commands and options over here.
Table of Contents
- WebSocket API
- HTTP API
- Special Pages and Features
- Message Targeting System
- Best Practices
- Featured Page (featured.html)
- Dock Page (dock.html)
- Social Stream Ninja API Documentation
- Extension
- Waitlist Page (waitlist.html)
- Battle royale, Polls, etc
- StreamDeck Integration Guide for Social Stream Ninja
- Using Bitfocus Companion with Social Stream Ninja
The WebSocket API allows real-time, bidirectional communication between your application and the Social Stream Ninja server.
Connect to the WebSocket server at wss://io.socialstream.ninja
.
There are two methods to connect and join a session:
- Direct connection with parameters:
ws = new WebSocket("wss://io.socialstream.ninja/join/SESSION_ID/IN_CHANNEL/OUT_CHANNEL");
- Connect first, then send a join message:
ws = new WebSocket("wss://io.socialstream.ninja");
ws.onopen = function() {
ws.send(JSON.stringify({ join: "SESSION_ID", in: IN_CHANNEL, out: OUT_CHANNEL }));
};
Parameters:
SESSION_ID
: Your unique session identifier (same as used in dock.html or featured.html URL)IN_CHANNEL
: Channel number to receive messages (optional)OUT_CHANNEL
: Channel number to send messages (optional)
The default channel value is used if not specified
The channel system allows for more granular control over message routing:
- Channel 1: Main communication channel (default)
- Channel 2: Typically used for dock.html communication
- Channel 3: Often used for extension communication
- Channel 4: Commonly used for featured.html communication
- Channel 5: Used for waitlist.html communication
- Channel 6: Reserved for future use
- Channel 7: Reserved for future use
- Channel 8: Reserved for future use
- Channel 9: Reserved for future use
When specifying channels, you're defining which channels to receive messages from (IN_CHANNEL) and which to send messages to (OUT_CHANNEL). This allows different components of your setup to communicate on separate channels, reducing noise and improving organization.
When a message is sent, it goes to the specified output channel. Those who have that channel set as their input channel will recieve the message.
-
Send Chat Message
- Action:
sendChat
- Example:
{"action": "sendChat", "value": "Hello, world!"}
- Action:
-
Send Encoded Chat Message
- Action:
sendEncodedChat
- Example:
{"action": "sendEncodedChat", "value": "Hello%2C%20world%21"}
- Action:
-
Block User
- Action:
blockUser
- Example:
{"action": "blockUser", "value": {"chatname": "username", "type": "twitch"}}
- Action:
-
Send External Content
- Action:
extContent
- Example:
{"action": "extContent", "value": "{\"chatname\":\"User\",\"chatmessage\":\"Hello\"}"}
- Action:
-
Waitlist Operations
- Remove:
{"action": "removefromwaitlist", "value": 1}
- Highlight:
{"action": "highlightwaitlist", "value": 2}
- Reset:
{"action": "resetwaitlist"}
- Download:
{"action": "downloadwaitlist"}
- Select Winner:
{"action": "selectwinner", "value": 1}
- Remove:
-
Clear Messages
- All:
{"action": "clear"}
or{"action": "clearAll"}
- Overlay:
{"action": "clearOverlay"}
- All:
-
Queue Operations
- Next:
{"action": "nextInQueue"}
- Get Size:
{"action": "getQueueSize"}
- Next:
-
Auto-show Toggle
{"action": "autoShow", "value": "toggle"}
-
Feature Next Message
{"action": "feature"}
-
Get Chat Sources
{"action": "getChatSources"}
-
VIP User Operations
- Toggle:
{"action": "toggleVIPUser", "value": {"chatname": "username", "type": "twitch"}}
- Toggle:
-
Get User History
{"action": "getUserHistory", "value": {"chatname": "username", "type": "twitch"}}
-
Waitlist Message
{"action": "waitlistmessage", "value": "Your custom message"}
-
Draw Mode
{"action": "drawmode", "value": true}
You can send messages to specific channels using the content
action with a channel number:
- Channel 1:
{"action": "content", ...}
- Channel 2:
{"action": "content2", ...}
- Channel 3:
{"action": "content3", ...}
- Channel 4:
{"action": "content4", ...}
- Channel 5:
{"action": "content5", ...}
- Channel 6:
{"action": "content6", ...}
- Channel 7:
{"action": "content7", ...}
The server also supports HTTP GET, POST, and PUT requests for the same actions. Replace SESSION_ID
with your actual session ID.
- GET:
https://io.socialstream.ninja/SESSION_ID/ACTION/TARGET/VALUE
- POST/PUT:
https://io.socialstream.ninja/SESSION_ID
(with JSON body) - POST/PUT:
https://io.socialstream.ninja/SESSION_ID/ACTION
(with JSON body)
You can specify the output channel for HTTP requests using the channel
query parameter:
https://io.socialstream.ninja/SESSION_ID/ACTION/TARGET/VALUE?channel=2
This will send the message to channel 2. If not specified, it defaults to channel 1.
Connect to the SSE endpoint to receive real-time updates:
const eventSource = new EventSource(`https://io.socialstream.ninja/sse/SESSION_ID`);
Include a get
parameter in your request for actions that require a response:
{
"action": "yourAction",
"value": "yourValue",
"get": "uniqueIdentifier"
}
The server will respond with:
{
"callback": {
"get": "uniqueIdentifier",
"result": true
}
}
Note: Not all commands support or require this callback mechanism.
- Success: The server will typically respond with the result of the action.
- Failed: If the action couldn't be performed (e.g., no clients connected to the specified room), the server responds with "failed".
- Timeout: If the server doesn't receive a response from the clients within 5 seconds, it responds with "timeout".
- Special: For non-default channels (2-7), if no clients are connected, the server responds with "special" instead of "failed".
-
Emotes Page (emotes.html)
- Displays emojis/emotes/icons dancing on the screen
- Can receive content via WebRTC or the WebSocket API
- To send content via API: Use the
content
action on channel 1
-
Waitlist Page (waitlist.html)
- Manages draws and waitlists for giveaways
- Communicates on channel 5
- Supports actions like selecting winners and managing the waitlist
-
Custom Actions
- Create custom auto-responding triggers or actions using a
custom.js
file - Example:
auto1
trigger responds "1" to any message that is "1"
- Create custom auto-responding triggers or actions using a
-
Queuing and Pinning Messages
- Queue: Hold CTRL (cmd on Mac) and click messages in the dock
- Pin: Hold ALT and click messages to pin them at the top
-
MIDI Hotkey Support
- Toggle in the extension menu
- Allows predefined chat messages to be sent to all social destinations
- MIDI actions available on Control Change channel 1
Social Stream Ninja implements a targeting system that allows messages to be directed to specific instances of the dock or featured pages if multiple of either are open.
-
URL Parameter: Each instance (featured/dock) can be given a unique label using the
label
URL parameter.Example:
featured.html?label=stream1
ordock.html?label=controlpanel1
-
Message Structure: When sending a message through the API, include a
target
field with the label of the intended recipient.Example:
{ "action": "someAction", "target": "stream1", "value": "someValue" }
-
Message Processing: The application checks each incoming message for a target. If the message has a target that doesn't match the instance's label, the message is ignored.
- Running multiple streams with different configurations
- Sending commands to specific control panels
- Updating particular displays without affecting others
This targeting system allows for more flexible and powerful setups, especially in complex streaming environments.
- Always handle potential errors and timeouts in your application.
- Use appropriate channels for different types of messages to keep your communication organized.
- Leverage the targeting system when working with multiple instances to ensure messages reach the intended recipients.
- Regularly check for updates to the API as new features may be added over time.
The featured.html page is designed to display featured content, typically used for showcasing selected messages or donations in a stream overlay. It communicates primarily on channel 3 for output and channels 1 and 2 for input, depending on the configuration.
The featured.html page can be configured to connect to the WebSocket server in three different ways:
- Default (server): Connects to
wss://io.socialstream.ninja
, joins the room, and sets output to channel 3 and input to channel 2. - Server2: Sets output to channel 3 and input to default channel.
- Server3: Sets output to channel 3 and input to channel 1.
In all cases, channel 3 is reserved for output from the featured.html page.
These can be set using URL parameters:
?server
: Default connection?server2
: Server2 connection?server3
: Server3 connection
The featured page offers several filtering options that can be controlled via the API:
onlyshowdonos
: Only show messages with donationshideDonations
: Hide donation informationhideTwitch
: Hide messages from TwitchonlyTwitch
: Only show messages from TwitchonlyFrom
: Only show messages from a specific sourcehideFrom
: Hide messages from specific sourcesfilterfeaturedusers
: Only show messages from whitelisted users
The featured page responds to the following API actions:
content
: Display new content- Example:
{"action": "content", "value": {...contentObject...}}
- Example:
clear
: Clear the currently displayed content- Example:
{"action": "clear"}
- Example:
toggleTTS
ortts
: Toggle or set Text-to-Speech- Example:
{"action": "toggleTTS", "value": "toggle"}
or{"action": "tts", "value": "on"}
- Example:
When sending content to be displayed, the content object should have the following structure:
{
"chatname": "Username",
"chatmessage": "Message content",
"chatimg": "URL to user avatar",
"contentimg": "URL to content image",
"subtitle": "Subtitle text",
"membership": "Membership information",
"hasDonation": "Donation information",
"type": "Source type (e.g., twitch, youtube)",
"id": "Unique message ID"
}
- Queue System: If
queuetime
is set, messages are added to a queue and displayed sequentially. - Image Preloading: The page attempts to preload user avatars and source type images for smoother display.
- IFrame Support: The page can adjust its height when embedded in an IFrame.
- Transition Effects: Content transitions can be customized using CSS classes.
- Error Handling: Implement more robust error handling for WebSocket connections and message parsing.
- Configuration Options: Consider adding more configuration options via URL parameters or API calls to control filtering and display behavior.
- Performance Optimization: For high-traffic streams, implement rate limiting or batching of messages to prevent overwhelming the display.
- Accessibility: Add options for controlling text size, contrast, and display duration to improve readability for viewers.
- Analytics: Implement tracking for displayed messages and user interactions to gather insights on engagement.
To display a new featured message:
socketserver.send(JSON.stringify({
action: "content",
value: {
chatname: "ExampleUser",
chatmessage: "Hello, featured chat!",
type: "twitch",
hasDonation: "$5.00"
}
}));
To clear the current featured message:
socketserver.send(JSON.stringify({ action: "clear" }));
To toggle Text-to-Speech:
socketserver.send(JSON.stringify({ action: "toggleTTS", value: "toggle" }));
The dock.html page serves as a control center for managing chat messages and interactions. It connects to multiple WebSocket servers and processes incoming messages.
The dock page can be configured to connect to different WebSocket servers:
-
Main Server (default):
- URL:
wss://io.socialstream.ninja/api
- Configurable via the
server
URL parameter - Joins room with
out: 2, in: 1
- URL:
-
Extension Server:
- URL:
wss://io.socialstream.ninja/extension
- Configurable via the
server2
orserver3
URL parameters - Joins room with
out: 3, in: 4
- URL:
server
: Sets the main server URLserver2
: Enables connection to the extension server and sets its URLserver3
: Enables connection to both main and extension servers
The dock page processes incoming WebSocket messages using the processInput
function. This function handles various types of messages and actions, including:
- Message management (pin, unpin, queue)
- User actions (block, delete messages)
- Content display and filtering
- Chat source management
- User history retrieval
- Payment processing (Stripe, Ko-fi, Buy Me a Coffee)
- OBS commands
- TTS (Text-to-Speech) control
- Message Queue: Manages a queue of messages for display
- Pinned Messages: Allows pinning and unpinning of messages
- User Blocking: Supports blocking users across different platforms
- Content Filtering: Provides options to filter content based on various criteria
- Payment Integration: Processes donations from Stripe, Ko-fi, and Buy Me a Coffee
- OBS Integration: Allows control of OBS scenes
- TTS Control: Enables toggling and control of Text-to-Speech functionality
The dock page responds to various API actions, including:
clear
orclearAll
: Clears all messages except pinned onesclearOverlay
: Clears the overlay without affecting the docknextInQueue
: Moves to the next message in the queuegetQueueSize
: Returns the current queue sizeautoShow
: Controls automatic message displaycontent
: Processes and displays new contentfeature
: Features the next unfeatured messagetoggleTTS
ortts
: Controls Text-to-Speech functionality
To clear all messages:
socketserver.send(JSON.stringify({ action: "clear" }));
To feature the next message:
socketserver.send(JSON.stringify({ action: "feature" }));
To toggle Text-to-Speech:
socketserver.send(JSON.stringify({ action: "toggleTTS", value: "toggle" }));
- Error Handling: Implement more robust error handling for WebSocket connections and message parsing.
- Modularization: Consider splitting the
processInput
function into smaller, more manageable functions for easier maintenance. - Configuration Options: Add more configuration options via URL parameters to control filtering and display behavior.
- Security: Implement authentication and encryption for sensitive operations, especially those involving payment processing.
- Performance Optimization: For high-traffic scenarios, implement batching of messages and more efficient DOM manipulation.
- Accessibility: Add keyboard shortcuts and screen reader support for better accessibility.
- Documentation: Maintain detailed inline documentation for complex functions and processes.
[Previous content remains the same]
The extension is a critical component of the Social Stream Ninja system, acting as the primary source of messages and managing communication between different parts of the system.
The extension maintains two WebSocket connections:
-
Dock Connection:
- URL:
wss://io.socialstream.ninja/dock
- Joins room with
out: 4, in: 3
- Controlled by
settings.server2
orsettings.server3
- URL:
-
API Connection:
- URL:
wss://io.socialstream.ninja/api
- Joins room with
out: 2, in: 1
- Controlled by
settings.socketserver
- URL:
- The extension receives messages from various sources (e.g., chat platforms).
- Messages are processed and can be modified by
applyBotActions()
. - Processed messages are sent to the dock or featured pages using
sendToDestinations()
. - Responses or user actions from the dock/featured pages are received by the extension.
- The extension can then send responses back to the original platforms using
processResponse()
.
The extension processes various API actions, including:
sendChat
: Sends a chat message to the specified destination.sendEncodedChat
: Sends an encoded chat message to the specified destination.blockUser
: Blocks a user from a specific source or all sources.extContent
: Processes external content, applying bot actions before sending.removefromwaitlist
: Removes an entry from the waitlist.highlightwaitlist
: Highlights an entry in the waitlist.resetwaitlist
: Resets the entire waitlist.stopentries
: Stops accepting new entries.downloadwaitlist
: Initiates a download of the waitlist.selectwinner
: Selects a random winner from the waitlist.
To send a chat message:
socketserver.send(JSON.stringify({
action: "sendChat",
value: "Hello, world!",
target: "twitch" // optional, specifies the destination platform
}));
To block a user:
socketserver.send(JSON.stringify({
action: "blockUser",
value: "username",
target: "youtube" // optional, "*" for all platforms
}));
To process external content:
socketserver.send(JSON.stringify({
action: "extContent",
value: JSON.stringify({
chatname: "User",
chatmessage: "Hello from an external source!",
type: "external"
})
}));
- Error Handling: Implement more robust error handling for WebSocket connections and message parsing.
- Rate Limiting: Implement rate limiting to prevent flooding of messages to destinations.
- Modularization: Consider splitting the message processing logic into smaller, more manageable functions.
- Logging: Implement comprehensive logging for easier debugging and monitoring.
- Security: Implement authentication and encryption for sensitive operations.
- Configurability: Allow more fine-grained control over which actions are enabled or disabled.
- Documentation: Maintain detailed inline documentation for complex functions and processes.
- Testing: Implement unit and integration tests to ensure reliability of the extension.
The extension plays a central role in the Social Stream Ninja system:
- It receives messages from external chat platforms.
- Processes and optionally modifies these messages.
- Sends the processed messages to the dock.html or featured.html pages for display.
- Receives user actions or responses from the dock/featured pages.
- Can send responses back to the original chat platforms.
This central position allows the extension to act as a powerful intermediary, enabling features like chat moderation, custom bot actions, and cross-platform interactions.
The waitlist.html page is designed to manage and display waitlists or giveaways within the Social Stream Ninja system. It connects to a WebSocket server and processes incoming messages to update the waitlist display.
- URL:
wss://io.socialstream.ninja/extension
- Joins room with
out: 5, in: 6
setupSocket()
: Establishes and manages the WebSocket connection.processInput(data)
: Processes incoming WebSocket messages and updates the waitlist display.
- Draw Mode: Displays entries in a draw or giveaway.
- Regular Mode: Displays a standard waitlist.
The waitlist page processes various types of messages:
waitlistmessage
: Updates the waitlist title.drawmode
: Toggles draw mode and displays winners.drawPoolSize
: Updates the number of entries in the draw.waitlist
: Updates the entire waitlist display.
- Winner Selection: Displays selected winners with confetti animation.
- Entry Count: Shows the number of entries in the draw.
- Customizable Messages: Allows setting custom messages for the waitlist title.
- Source Display: Option to show the source (e.g., Twitch, YouTube) of each entry.
- Randomization: Option to randomize the order of entries in the display.
.winner
: Applied to winning entries..loser
: Applied to non-winning entries in draw mode..selected
: Applied to highlighted entries..guestListHolder
: Container for each waitlist entry.
The waitlist page responds to various API actions, including:
-
waitlistmessage
: Sets a custom message for the waitlist.{ "waitlistmessage": "Welcome to the giveaway!" }
-
drawmode
: Toggles draw mode and can display winners.{ "drawmode": true, "winlist": [ {"chatname": "Winner1", "type": "twitch", "chatimg": "URL"}, {"chatname": "Winner2", "type": "youtube", "chatimg": "URL"} ] }
-
drawPoolSize
: Updates the number of entries in the draw.{ "drawPoolSize": 100 }
-
waitlist
: Updates the entire waitlist.{ "waitlist": [ {"chatname": "User1", "type": "twitch", "chatimg": "URL", "waitStatus": 0}, {"chatname": "User2", "type": "youtube", "chatimg": "URL", "waitStatus": 2} ] }
- Error Handling: Implement more robust error handling for WebSocket connections and message parsing.
- Performance Optimization: For large waitlists, implement virtualization or pagination to improve performance.
- Accessibility: Ensure the waitlist is accessible, including keyboard navigation and screen reader support.
- Customization Options: Allow more customization of the waitlist appearance through API calls or configuration options.
- Animation Options: Provide options to customize or disable animations for different use cases.
- Localization: Add support for multiple languages in the waitlist display.
- Persistence: Implement a way to save and restore waitlist state in case of page reload or disconnection.
The waitlist page integrates with the Social Stream Ninja system by:
- Receiving waitlist updates from the extension or other components.
- Displaying real-time updates of entries, winners, and draw status.
- Providing a visual interface for giveaways or queue management.
This integration allows streamers or moderators to manage waitlists or giveaways efficiently while providing an engaging visual display for viewers.
These pages may lack API support directly, however in some cases they can be controlled via the extension's API.
For example the waitlist has some functions that can be controlled via the extensiion:
removefromwaitlist
highlightwaitlist
resetwaitlist
stopentries
downloadwaitlist
selectwinner
Just to touch on the Battle Royal game though,
The battle.html page is an interactive game-like features. Currently it doesn't use a WebSocket connection but instead communicates directly with the extension via WebRTC.
- Uses WebRTC (peer-to-peer) for direct communication with the extension
- No WebSocket server connection at the moment -- but I'll update this when it does.
- Player Join: Users can join the game using the
!join
command - Weapon Selection: Players can choose a weapon type when joining
- In-game Chat: Players can send messages using the
!say
command
startgame
: Initiates the game- Content messages: Processed for game actions (join, chat)
While the battle page doesn't directly connect to the API server, it can receive actions through the extension:
-
startgame
: Starts the gamesendDataP2P({startgame: true});
-
Player join:
processData({ chatname: "PlayerName", chatmessage: "!join sword", chatimg: "URL", type: "twitch", nameColor: "#FFFFFF" });
-
In-game chat:
processData({ chatname: "PlayerName", chatmessage: "!say Hello, everyone!" });
The battle page relies on the extension for receiving data:
- The extension uses
sendDataP2P()
to send data to the battle page - Data can be sent via WebRTC or fallback to WebSocket if available
- The extension can trigger game actions like starting the game
I'll create a guide focused on integrating Social Stream Ninja with StreamDeck, specifically for sending custom messages.
- Open StreamDeck software
- Add a new "Website" action to your StreamDeck
- Check GET request in background
- Configure the URL using this format:
https://io.socialstream.ninja/YOUR_SESSION_ID/sendEncodedChat/null/YOUR_URL_ENCODED_MESSAGE_HERE
Replace:
YOUR_SESSION_ID
with your Social Stream Ninja session IDYOUR_MESSAGE
with your URL-encoded message
For example, to send "Hello Stream!":
https://io.socialstream.ninja/abc123/sendEncodedChat/null/Hello%20Stream!
You can use this page to test and generate the correct URL here, if having problems doing it manually: https://socialstream.ninja/sampleapi.html. Note that we want to generate a GET request with this method.
For more flexibility, you can use Multi Actions to send different messages:
- Create a new "Multi Action" on your StreamDeck
- Add "Website" actions for each command
- Use these URL patterns:
WebSocket (WSS)
https://io.socialstream.ninja/YOUR_SESSION_ID/sendChat/null/YOUR_MESSAGE
HTTPS POST
https://io.socialstream.ninja/YOUR_SESSION_ID
With body:
{
"action": "sendChat",
"value": "YOUR_MESSAGE",
"apiid": "YOUR_SESSION_ID"
}
- Use URL encoding for special characters in messages
- You can create multiple buttons for different preset messages
- Chain commands using Multi Actions for complex sequences
- Add a delay between actions if needed using StreamDeck's delay feature
- Find your session ID from the Social Stream API Sandbox
- Create a test button with a simple message
- Press the button to verify the message appears in your social platforms
- Check the Social Stream API Sandbox's incoming messages panel to confirm delivery
To send to specific channels, add the channel parameter:
https://io.socialstream.ninja/YOUR_SESSION_ID/sendChat/null/YOUR_MESSAGE?channel=2
Channels:
- 1: General communication
- 2: Dock
- 3: Featured content
- 4-7: Custom channels
I'll add a section about Bitfocus Companion integration with what we can confirm from the provided information:
Bitfocus Companion enables the reasonably priced Elgato Streamdeck to be a professional shotbox surface for a huge amount of different presentation switchers, video playback software and broadcast equipment. It supports Social Stream Ninja and VDO.Ninja!
https://bitfocus.io/companion https://bitfocus.io/connections/socialstream-ninja
-
Enable API Control:
- Open Social Stream Ninja
- Go to
Global settings and tools
>Mechanics
- Enable
Enable remote API control of extension
-
Get Your Session ID:
- Navigate to
Global settings and tools
>Session Options
- Copy your Session ID
- Alternatively, find it in your URL after
?session=
- Navigate to
-
Configure Companion:
- Install the Social Stream Ninja module in Companion
- Paste your Session ID into the module settings
The following commands are confirmed available in Companion:
- Clear featured message
- Clear all messages
- Next in queue
- Toggle auto-show
- Feature next un-featured
- Reset Poll
- Close Poll
- Waitlist Controls
- Text to Speech (TTS) Controls
- Send Chat Message
Companion can access:
queue_size
: Shows the current queue size
Advantages of using Companion:
- Native integration with Social Stream Ninja
- No need for URL encoding or complex HTTP requests
- Direct access to all core functionality
- Real-time queue size monitoring through variables
- Can be used alongside StreamDeck for more complex setups
This makes Companion a simpler alternative to the StreamDeck HTTP method described above, especially for basic Social Stream Ninja control.