Add support for and use socket host override. (#1682)

* Add support for and use socket host override. Closes #1378

* Fix embeds with the new websocket constructor

webroot/js/app-standalone-chat.js

@@ -20,6 +20,7 @@ import {
   URL_CONFIG,
   TIMER_STATUS_UPDATE,
 } from './utils/constants.js';
+import { URL_WEBSOCKET } from './utils/constants.js';
 
 export default class StandaloneChat extends Component {
   constructor(props, context) {
@@ -53,6 +54,8 @@ export default class StandaloneChat extends Component {
     this.setupChatAuth = this.setupChatAuth.bind(this);
     this.disableChat = this.disableChat.bind(this);
 
+    this.socketHostOverride = null;
+
     // user events
     this.handleWebsocketMessage = this.handleWebsocketMessage.bind(this);
 
@@ -98,7 +101,7 @@ export default class StandaloneChat extends Component {
   }
 
   setConfigData(data = {}) {
-    const { chatDisabled } = data;
+    const { chatDisabled, socketHostOverride } = data;
 
     // If this is the first time setting the config
     // then setup chat if it's enabled.
@@ -107,7 +110,7 @@ export default class StandaloneChat extends Component {
     }
 
     this.hasConfiguredChat = true;
-
+    this.socketHostOverride = socketHostOverride;
     this.setState({
       canChat: !chatDisabled,
       configData: {
@@ -277,7 +280,10 @@ export default class StandaloneChat extends Component {
     }
 
     // Without a valid access token he websocket connection will be rejected.
-    const websocket = new Websocket(accessToken);
+    const websocket = new Websocket(
+      accessToken,
+      this.socketHostOverride || URL_WEBSOCKET
+    );
     websocket.addListener(
       CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED,
       this.handleWebsocketMessage

webroot/js/app.js

@@ -2,6 +2,8 @@ import { h, Component } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
+import { URL_WEBSOCKET } from './utils/constants.js';
+
 import { OwncastPlayer } from './components/player.js';
 import SocialIconsList from './components/platform-logos-list.js';
 import UsernameForm from './components/chat/username.js';
@@ -154,6 +156,7 @@ export default class App extends Component {
     this.hasConfiguredChat = false;
     this.setupChatAuth = this.setupChatAuth.bind(this);
     this.disableChat = this.disableChat.bind(this);
+    this.socketHostOverride = null;
   }
 
   componentDidMount() {
@@ -245,9 +248,11 @@ export default class App extends Component {
   }
 
   setConfigData(data = {}) {
-    const { name, summary, chatDisabled } = data;
+    const { name, summary, chatDisabled, socketHostOverride } = data;
     window.document.title = name;
 
+    this.socketHostOverride = socketHostOverride;
+
     // If this is the first time setting the config
     // then setup chat if it's enabled.
     if (!this.hasConfiguredChat && !chatDisabled) {
@@ -638,8 +643,11 @@ export default class App extends Component {
       });
     }
 
-    // Without a valid access token he websocket connection will be rejected.
-    const websocket = new Websocket(accessToken);
+    // Without a valid access token the websocket connection will be rejected.
+    const websocket = new Websocket(
+      accessToken,
+      this.socketHostOverride || URL_WEBSOCKET
+    );
     websocket.addListener(
       CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED,
       this.handleWebsocketMessage

webroot/js/utils/websocket.js

@@ -1,4 +1,3 @@
-import { URL_WEBSOCKET } from './constants.js';
 /**
  * These are the types of messages that we can handle with the websocket.
  * Mostly used by `websocket.js` but if other components need to handle
@@ -30,8 +29,9 @@ export const CALLBACKS = {
 const TIMER_WEBSOCKET_RECONNECT = 5000; // ms
 
 export default class Websocket {
-  constructor(accessToken) {
+  constructor(accessToken, path) {
     this.websocket = null;
+    this.path = path;
     this.websocketReconnectTimer = null;
     this.accessToken = accessToken;
 
@@ -50,7 +50,7 @@ export default class Websocket {
   }
 
   createAndConnect() {
-    const url = new URL(URL_WEBSOCKET);
+    const url = new URL(this.path);
     url.searchParams.append('accessToken', this.accessToken);
 
     const ws = new WebSocket(url.toString());