Skip to content

Commit

Permalink
Merge pull request #33 from izzy/feature/connection-status
Browse files Browse the repository at this point in the history 
Added connection status and fix to faulty sb_ws_uri Parameter, fixes #32
  • Loading branch information
@izzy
izzy authored Feb 17, 2023
2 parents e7f4028 + bc7a600 commit c0c7439
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 6 deletions.
31 changes: 28 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ file:///C:/path/to/stream-chat/chat.html?sb_enabled=true&bubbles=true
| option | default | valid options | description | example |
|--------------------|----------------------|---------------|------------------------------------------------------------------------------------------------|----------------------------------|
| `sb_enabled` | true | boolean | Enable Streamer.Bot integration | `sb_enabled=true` |
| `sb_ws_uri` | ws://localhost:8080/ | uri | The Streamer.Bot's local websocket URL | `ws_uri=ws://localhost:8080/` |
| `sb_ws_uri` | ws://127.0.0.1:8080/ | uri | The Streamer.Bot's local websocket URL | `ws_uri=ws://localhost:8080/` |
| `sb_twitch` | true | boolean | Enable Streamer.Bot Twitch Messsages | `sb_twitch=true` |
| `sb_youtube` | true | boolean | Enable Streamer.Bot YouTube Messsages | `sb_youtube=true` |
| `version_check` | true | boolean | Checks for new versions when starting the overlay and displays a warning when a new version is available | `version_check=true` |
Expand Down Expand Up @@ -74,10 +74,35 @@ file:///C:/path/to/stream-chat/chat.html?sb_enabled=true&bubbles=true
`locale`: [ISO 639-1 language code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)(i.e. 'de-DE' or 'en-GB')


### I've read this README but I still have questions/problems, where can I get help?
## Troubleshooting
Generally the best way to troubleshoot is to open the browser console (F12) and check for any errors. Error messages in the console might differ depending on your browser. Given OBS is based on CEF(Chromium Embedded Framework) it's likely that Chrome's console is the most accurate.

If you're not sure what to do, feel free to open an issue and we'll try to help. You can also join the discord(see below) and we can help you in text or voice chat.

### Can't connect to WebSocket

#### Possible errors in the console:

* Firefox can’t establish a connection to the server at ws://127.0.0.1:8080/
* Websocket connection to 'ws://127.0.0.1:8080/' failed: [...]

#### Possible reasons:

* Streamer.Bot is not running
* Streamer.Bot is listening on a different port
* Streamer.Bot is listening on a port that is not exclusively available

#### Troubleshooting:

* Make sure Streamer.Bot is running
* If you're using a custom port, make sure it's the same as the one in the overlay's URL
* If you're using a custom port, make sure it's not in use by another application(try a different port)
* To make sure the port is exclusively available, close Streamer.Bot and run `Get-Process -Id (Get-NetTCPConnection -LocalPort 8080).OwningProcess` in PowerShell. If the output is empty, the port is available, otherwise it's in use by another process and you should probably try a different port.

## I've read this README but I still have questions/problems, where can I get help?

If you have a Github account, opening an issue is the best way to give feedback. Otherwise feel free to join my [Discord](https://discord.gg/yRTM7H2tek) and ask your questions in #development.

### Contributors / Thanks
## Contributors / Thanks

Thanks to @andi242 for his fork on https://github.com/andi242/twitch-chat
118 changes: 116 additions & 2 deletions chat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,19 @@
color: #950000;
box-sizing: border-box;
}

#connection-status {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
padding: 1rem;
font-size: 1.5rem;
font-weight: bold;
color: #410000;
background-color: #ff827c;
box-sizing: border-box;
}
</style>

<style type="text" id="enable-bubbles">
Expand Down Expand Up @@ -194,12 +207,108 @@
<body>
<div id="chat"></div>
<div id="version-notice" style="display: none;"></div>
<div id="connection-status" style="display: none;"></div>

<script>
const STREAMCHAT_VERSION = '0.2.0';
const STREAMCHAT_VERSION = '0.2.1';
const STREAMCHAT_GH_USER = 'izzy';
const STREAMCHAT_GH_REPO = 'stream-chat';

class ConnectionStatus {

/**
* @type {number}
* @value 0
*/
static DISCONNECTED = 0;

/**
* @type {number}
* @value 1
*/
static CONNECTING = 1;

/**
* @type {number}
* @value 2
*/
static CONNECTED = 2;

/**
* @type {number}
* @value 3
*/
static ERROR = 3;

/**
* @type {Object.<string, number>}
*/
status = {
'StreamerBot': ConnectionStatus.DISCONNECTED,
'BeanBot': ConnectionStatus.DISCONNECTED
}

update() {
let status = ConnectionStatus.CONNECTED;
for (let key in this.status) {
if (!config['plugins'].hasOwnProperty(key.toLowerCase()) || config['plugins'][key.toLowerCase()]['enabled'] == false) {
continue;
}

if (this.status[key] == ConnectionStatus.DISCONNECTED) {
status = ConnectionStatus.DISCONNECTED;
break;
} else if (this.status[key] == ConnectionStatus.CONNECTING) {
status = ConnectionStatus.CONNECTING;
}
}

let status_text = "",
status_div = document.getElementById("connection-status");

switch (status) {
case ConnectionStatus.DISCONNECTED:
status_text = "disconnected. Is your bot running?";
status_div.style.display = "block";
break;
case ConnectionStatus.CONNECTING:
status_text = "connecting";
status_div.style.display = "block";
break;
case ConnectionStatus.CONNECTED:
status_div.style.display = "none";
break;
case ConnectionStatus.ERROR:
status_text = "experiencing an error";
status_div.style.display = "block";
break;
}

status_div.innerText = "You are currently " + status_text;

}
}

const PLUGIN_LIST = Object.keys(new ConnectionStatus().status);
window.CONNECTION_STATUS = new Proxy(new ConnectionStatus(), {
get(target, name, receiver) {
if (PLUGIN_LIST.includes(name)) {
return Reflect.get(target['status'], name, receiver);
} else {
return Reflect.get(target, name, receiver);
}
},

set(target, name, value, receiver) {
if (PLUGIN_LIST.includes(name)) {
target['status'][name] = value;
target.update();
} else {
return Reflect.set(target, name, value, receiver);
}
}
});

/**
* Checks the current version of streamchat against the latest release on GitHub.
* @returns {string} A message indicating whether the current version is up to date or not.
Expand Down Expand Up @@ -356,7 +465,7 @@
'websocket': '',
};
if (streamerbotEnabled === searchParamIsTrue("sb_enabled", true)) {
let sb_ws_uri = 'ws://localhost:8080/';
let sb_ws_uri = 'ws://127.0.0.1:8080/';
if (url.searchParams.get("sb_ws_uri") !== null) {
sb_ws_uri = decodeURI(url.searchParams.get("sb_ws_uri"));
}
Expand Down Expand Up @@ -900,6 +1009,8 @@
if (config['plugins']['streamerbot']['enabled'] === true) {
console.debug('Streamer.Bot is enabled');

CONNECTION_STATUS['StreamerBot'] = ConnectionStatus.CONNECTING;

socket = new WebSocket(config['plugins']['streamerbot']['websocket']);

socket.onopen = () => {
Expand Down Expand Up @@ -937,12 +1048,15 @@
socket.send(JSON.stringify(s));
} else {
console.debug('Streamer.Bot does not have any events to subscribe to');
CONNECTION_STATUS['StreamerBot'] = ConnectionStatus.UNKNOWN;
}

console.debug(['Connected to Streamer.Bot socket:', socket]);
CONNECTION_STATUS['StreamerBot'] = ConnectionStatus.CONNECTED;
};

socket.onclose = function () {
CONNECTION_STATUS['StreamerBot'] = ConnectionStatus.DISCONNECTED;
console.warn('Disconnected from Streamer.Bot socket.');
setTimeout(initializeConnections, 10000);
};
Expand Down
4 changes: 3 additions & 1 deletion generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const fields = [
{ group: groups.Integrations, label: "Use an alert popup for new versions(read the notice!)", name: "version_alert", type: "checkbox", defaultValue: false, help: "Uses a popup instead of the obnoxiously large notification. CAREFUL: If you have the overlay setup more than once or reload the overlay frequently this might be a bad idea!" },
{ group: groups.Integrations, label: "Streamer.Bot enabled", name: "sb_enabled", type: "checkbox", defaultValue: true, help: "Enables Streamer.Bot websocket integration when active." },

{ group: groups.StreamerBot, label: "Websocket URI", name: "sb_websocket", type: "text", defaultValue: "ws://localhost:8080", help: "The address of your Streamer.Bot. See Streamer.Bot -> Server/Clients -> Websocket Server. Should look like 'ws://ADDRESS:PORT/ENDPOINT" },
{ group: groups.StreamerBot, label: "Websocket URI", name: "sb_ws_uri", type: "text", defaultValue: "ws://127.0.0.1:8080", help: "The address of your Streamer.Bot. See Streamer.Bot -> Server/Clients -> Websocket Server. Should look like 'ws://ADDRESS:PORT/ENDPOINT" },
{ group: groups.StreamerBot, label: "Twitch", name: "sb_twitch", type: "checkbox", defaultValue: true, help: "Show Twitch messages from Streamer.Bot" },
{ group: groups.StreamerBot, label: "YouTube", name: "sb_youtube", type: "checkbox", defaultValue: true, help: "Show YouTube messages from Streamer.Bot" },

Expand Down Expand Up @@ -310,10 +310,12 @@ const loadFromUrl = () => {
// deprecated parameters that will be rewritten
const deprecatedParams = {
"background_color": "bubble_color",
"sb_websocket": "sb_ws_uri",
}

for (const [key, value] of url.searchParams.entries()) {
if (deprecatedParams[key]) {
console.debug(["Deprecated parameter: ", key, value])
url.searchParams.delete(key);
url.searchParams.append(deprecatedParams[key], value);
}
Expand Down

0 comments on commit c0c7439

Please sign in to comment.