Chat refactor + persistent backing chat users (#1163)

* First pass at chat user registration and validation * Disable chat if the user is disabled/blocked or the server hits max connections * Handle dropping sockets if chat is disabled * Fix origin in automated chat test * Work for updated chat moderation * Chat message markdown rendering and fix tests * Put /api/chat behind a chat user access token. Closes #1085 * Reject blocked username changes * More WIP moderation * Defer configuring chat until we know if it is enabled. Closes #1135 * chat user blocking. Closes #1096 * Add tests around user access for #1096 * Add external integration chat message API + update integration auth middleware to pass along integration name. Closes #1092 * Delete old chat messages from db as to not hold on to excessive data. Closes #1152 * Add schema migration for messages. Closes #1155 * Commit updated API documentation * Add chat load test * Shared db mutex and db optimizations * Simplify past display name handling * Use a new test db for each test run * Wire up the external messages actions + add tests for them * Move access tokens to be actual users * Run message pruning at launch + fix comparison * Do not return API users in disabled users response * Fix incorrect highlighting. Closes #1160 * Consolidate user table statements * Set the max process connection limit to 70% of maximum * Fix wrong old display name being returned in name change event * Delete the old chat server files * Wire back up the webhooks * Remove unused * Invalidate user cache on changes * Do not send rendered body as RawBody * Some cleanup * Standardize names for external API users to ExternalAPIUser * Do not log token * Checkout branch when building admin for testing * Bundle in dev admin for testing * Some cleanup * Cleanup js logs * Cleanup and standardize event names * Clean up some logging * Update API spec. Closes #1133 * Commit updated API documentation * Change paths to be better named * Commit updated API documentation * Update admin bundle * Fix duplicate event name * Rename scope var * Update admin bundle * Move connected clients controller into admin package * Fix collecting usernames for autocomplete purposes * No longer generate username when it is empty * Sort clients and users by timestamp * Move file to admin controller package * Swap, so the comments stay correct Co-authored-by: Jannik <jannik@outlook.com> * Use explicit type alias Co-authored-by: Jannik <jannik@outlook.com> * Remove commented code. Co-authored-by: Jannik <jannik@outlook.com> * Cleanup test * Remove some extra logging * Add some clarity * Update dev instance of admin for testing * Consolidate lines Co-authored-by: Jannik <jannik@outlook.com> * Remove commented unused vars Co-authored-by: Jannik <jannik@outlook.com> * Until needed do not return IP address with client list * Fix typo of wrong var * Typo led to a bad test. Fix typo and fix test. * Guard against the socket reconnecting on error if previously set to shutdown * Do not log access tokens * Return success message on enable/disable user * Clean up some inactionable error messages. Sent ban message. Sort banned users. * fix styling for when chat is completely disabled * Unused * guard against nil clients * Update dev admin bundle * Do not unhide messages when unblocking user just to be safe. Send removal action from the controller * Add convinience function for getting active connections for a single user * Lock db on these mutations * Cleanup force disconnect using GetClientsForUser and capture client reference explicitly * No longer re-showing banned user messages for safety. Removing this test. * Remove no longer needed comment * Tweaks to forbidden username handling. - Standardize naming to not use "block" but "forbidden" instead. - Pass array over the wire instead of string. - Add API test - Fix default list incorrectly being appended to custom list. * Logging cleanup * Update dev admin bundle * Add an artificial delay in order to visually see message being hidden when testing * Remove the user cache as it is a premature optimization * When connected to chat let the user know their current user details to sync the username in the UI * On connected send current display name back to client. - Move name change out of chat component. - Add additional event type constants. * Fix broken workflow due to typo * Troubleshoot workflow * Bump htm from 3.0.4 to 3.1.0 in /build/javascript (#1181) * Bump htm from 3.0.4 to 3.1.0 in /build/javascript Bumps [htm](https://github.com/developit/htm) from 3.0.4 to 3.1.0. - [Release notes](https://github.com/developit/htm/releases) - [Commits](https://github.com/developit/htm/compare/3.0.4...3.1.0) --- updated-dependencies: - dependency-name: htm dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * Run npm run build and update libraries Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> * Commit updated Javascript packages * Re-send current user info when a rejected name change takes place * All socket writes should be through the send chan and not directly * Seed the random generator * Add keys and indexes to users table * a util to generate consistent emoji markup * console clean up * mod tidy * Commit updated API documentation * Handle the max payload size of a socket message. - Only close socket if x2 greater than the max size. - Send the user a message if a message is too large. - Surface the max size in bytes in the config. * Update admin bundle * Force all events to be sent in their own socket message and do not concatinate in a single message * Update chat embed to register for access token * Use a different access token for embed chat * Update the chat message bubble background color to be bolder * add base tag to open links in new window, closes #1220 * Support text input of :emoji: in chat (#1190) * Initial implementation of emoji injection * fix bookkeeping with multiple emoji * make the emoji lookup case-insensitive * try another solution for Caretposition * add title to emojis minor refactoring * bind moji injection to InputKeyUp * simplify the code replace all found emojis * inject emoji if the modifer is released earlier * more efficient emoji tag search * use json emoji.emoji as url * use createEmojiMarkup() * move emojify() to chat.js * emojify on paste * cleanup emoji titles in paste * update inputText in InputKeyup * mark emoji titles with 2*zwnj this way paste cleanup will not interfere with text which include zwnj * emoji should not change the inputText * Do not show join messages when chat is offline. Closes #1224 - Show stream starting/ending messages in chat. - When stream starts show everyone the welcome message. * Force scrolling chat to bottom after history is populated regardless of scroll position. Closes https://github.com/owncast/owncast/issues/1222 * use maxSocketPayloadSize to calculate total bytes of message payload (#1221) * utilize maxSocketPayloadSize from config; update chatInput to calculate based on that value instead of text value; remove usage of inputText for counting * add a buffer to account for entire websocket payload for message char counting; trim nbsp;'s from ends of messages when calculating count Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: Jannik <jannik@outlook.com> Co-authored-by: Ginger Wong <omqmail@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Meisam <39205857+MFTabriz@users.noreply.github.com>
2021-07-19 19:22:29 -07:00
parent e3dc736cf4
commit b6f68628c0
88 changed files with 10691 additions and 2281 deletions
--- a/webroot/js/app-standalone-chat.js
+++ b/webroot/js/app-standalone-chat.js
@@ -4,21 +4,32 @@ const html = htm.bind(h);

 import Chat from './components/chat/chat.js';
 import Websocket from './utils/websocket.js';
-import { getLocalStorage, generateUsername } from './utils/helpers.js';
-import { KEY_USERNAME } from './utils/constants.js';
+import { getLocalStorage, setLocalStorage } from './utils/helpers.js';
+import { KEY_EMBED_CHAT_ACCESS_TOKEN } from './utils/constants.js';
+import { registerChat } from './chat/register.js';

 export default class StandaloneChat extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
-      websocket: new Websocket(true), // Send along the "ignoreClient" flag so this isn't counted as a viewer
      chatEnabled: true, // always true for standalone chat
-      username: getLocalStorage(KEY_USERNAME) || generateUsername(),
+      username: null,
    };

+    this.isRegistering = false;
+    this.hasConfiguredChat = false;
    this.websocket = null;
    this.handleUsernameChange = this.handleUsernameChange.bind(this);
+
+    // If this is the first time setting the config
+    // then setup chat if it's enabled.
+    const chatBlocked = getLocalStorage('owncast_chat_blocked');
+    if (!chatBlocked && !this.hasConfiguredChat) {
+      this.setupChatAuth();
+    }
+
+    this.hasConfiguredChat = true;
  }

  handleUsernameChange(newName) {
@@ -27,17 +38,52 @@ export default class StandaloneChat extends Component {
    });
  }

+  async setupChatAuth(force) {
+    var accessToken = getLocalStorage(KEY_EMBED_CHAT_ACCESS_TOKEN);
+    const randomInt = Math.floor(Math.random() * 100) + 1
+    var username = 'chat-embed-' + randomInt;
+
+    if (!accessToken || force) {
+      try {
+        this.isRegistering = true;
+        const registration = await registerChat(username);
+        accessToken = registration.accessToken;
+        username = registration.displayName;
+
+        setLocalStorage(KEY_EMBED_CHAT_ACCESS_TOKEN, accessToken);
+
+        this.isRegistering = false;
+      } catch (e) {
+        console.error('registration error:', e);
+      }
+    }
+
+    if (this.state.websocket) {
+      this.state.websocket.shutdown();
+      this.setState({
+        websocket: null,
+      });
+    }
+
+    // Without a valid access token he websocket connection will be rejected.
+    const websocket = new Websocket(accessToken);
+
+    this.setState({
+      username,
+      websocket,
+      accessToken,
+    });
+  }
+
  render(props, state) {
-    const { username, websocket } = state;
-    return (
-      html`
-        <${Chat}
-          websocket=${websocket}
-          username=${username}
-          messagesOnly
-          ignoreClient
-        />
-      `
-    );
+    const { username, websocket, accessToken } = state;
+    return html`
+      <${Chat}
+        websocket=${websocket}
+        username=${username}
+        accessToken=${accessToken}
+        messagesOnly
+      />
+    `;
  }
 }
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -7,7 +7,9 @@ import SocialIconsList from './components/platform-logos-list.js';
 import UsernameForm from './components/chat/username.js';
 import VideoPoster from './components/video-poster.js';
 import Chat from './components/chat/chat.js';
-import Websocket from './utils/websocket.js';
+import Websocket, { CALLBACKS, SOCKET_MESSAGE_TYPES } from './utils/websocket.js';
+import { registerChat } from './chat/register.js';
+
 import ExternalActionModal, {
  ExternalActionButton,
 } from './components/external-action-modal.js';
@@ -17,7 +19,6 @@ import {
  classNames,
  clearLocalStorage,
  debounce,
-  generateUsername,
  getLocalStorage,
  getOrientation,
  hasTouchScreen,
@@ -27,7 +28,10 @@ import {
  setLocalStorage,
 } from './utils/helpers.js';
 import {
+  CHAT_MAX_MESSAGE_LENGTH,
+  EST_SOCKET_PAYLOAD_BUFFER,
  HEIGHT_SHORT_WIDE,
+  KEY_ACCESS_TOKEN,
  KEY_CHAT_DISPLAYED,
  KEY_USERNAME,
  MESSAGE_OFFLINE,
@@ -54,10 +58,13 @@ export default class App extends Component {
    this.windowBlurred = false;

    this.state = {
-      websocket: new Websocket(),
-      displayChat: chatStorage === null ? true : chatStorage,
+      websocket: null,
+      canChat: false, // all of chat functionality (panel + username)
+      displayChatPanel: chatStorage === null ? true : (chatStorage === 'true'), // just the chat panel
      chatInputEnabled: false, // chat input box state
-      username: getLocalStorage(KEY_USERNAME) || generateUsername(),
+      accessToken: null,
+      username: getLocalStorage(KEY_USERNAME),
+      isRegistering: false,
      touchKeyboardActive: false,

      configData: {
@@ -86,7 +93,7 @@ export default class App extends Component {
    this.playerRestartTimer = null;
    this.offlineTimer = null;
    this.statusTimer = null;
-    this.disableChatTimer = null;
+    this.disableChatInputTimer = null;
    this.streamDurationTimer = null;

    // misc dom events
@@ -116,6 +123,14 @@ export default class App extends Component {
    // fetch events
    this.getConfig = this.getConfig.bind(this);
    this.getStreamStatus = this.getStreamStatus.bind(this);
+
+    // user events
+    this.handleWebsocketMessage = this.handleWebsocketMessage.bind(this);
+
+    // chat
+    this.hasConfiguredChat = false;
+    this.setupChatAuth = this.setupChatAuth.bind(this);
+    this.disableChat = this.disableChat.bind(this);
  }

  componentDidMount() {
@@ -144,7 +159,7 @@ export default class App extends Component {
    clearInterval(this.playerRestartTimer);
    clearInterval(this.offlineTimer);
    clearInterval(this.statusTimer);
-    clearTimeout(this.disableChatTimer);
+    clearTimeout(this.disableChatInputTimer);
    clearInterval(this.streamDurationTimer);
    window.removeEventListener('resize', this.handleWindowResize);
    window.removeEventListener('blur', this.handleWindowBlur);
@@ -197,10 +212,20 @@ export default class App extends Component {
  }

  setConfigData(data = {}) {
-    const { name, summary } = data;
+    const { name, summary, chatDisabled } = data;
    window.document.title = name;

+    // If this is the first time setting the config
+    // then setup chat if it's enabled.
+    const chatBlocked = getLocalStorage('owncast_chat_blocked');
+    if (!chatBlocked && !this.hasConfiguredChat && !chatDisabled) {
+      this.setupChatAuth();
+    }
+
+    this.hasConfiguredChat = true;
+
    this.setState({
+      canChat: !chatBlocked,
      configData: {
        ...data,
        summary: summary && addNewlines(summary),
@@ -274,7 +299,7 @@ export default class App extends Component {
      TIMER_DISABLE_CHAT_AFTER_OFFLINE -
      (Date.now() - new Date(this.state.lastDisconnectTime));
    const countdown = remainingChatTime < 0 ? 0 : remainingChatTime;
-    this.disableChatTimer = setTimeout(this.disableChatInput, countdown);
+    this.disableChatInputTimer = setTimeout(this.disableChatInput, countdown);
    this.setState({
      streamOnline: false,
      streamStatusMessage: MESSAGE_OFFLINE,
@@ -294,8 +319,8 @@ export default class App extends Component {
  // play video!
  handleOnlineMode() {
    this.player.startPlayer();
-    clearTimeout(this.disableChatTimer);
-    this.disableChatTimer = null;
+    clearTimeout(this.disableChatInputTimer);
+    this.disableChatInputTimer = null;

    this.streamDurationTimer = setInterval(
      this.setCurrentStreamDuration,
@@ -332,6 +357,8 @@ export default class App extends Component {
    this.setState({
      username: newName,
    });
+
+    this.sendUsernameChange(newName);
  }

  handleFormFocus() {
@@ -351,16 +378,12 @@ export default class App extends Component {
  }

  handleChatPanelToggle() {
-    const { displayChat: curDisplayed } = this.state;
+    const { displayChatPanel: curDisplayed } = this.state;

    const displayChat = !curDisplayed;
-    if (displayChat) {
-      setLocalStorage(KEY_CHAT_DISPLAYED, displayChat);
-    } else {
-      clearLocalStorage(KEY_CHAT_DISPLAYED);
-    }
+    setLocalStorage(KEY_CHAT_DISPLAYED, displayChat);
    this.setState({
-      displayChat,
+      displayChatPanel: displayChat,
    });
  }

@@ -371,7 +394,7 @@ export default class App extends Component {
  }

  handleNetworkingError(error) {
-    console.log(`>>> App Error: ${error}`);
+    console.error(`>>> App Error: ${error}`);
  }

  handleWindowResize() {
@@ -492,11 +515,95 @@ export default class App extends Component {
    });
  }

+  handleWebsocketMessage(e) {
+    if (e.type === SOCKET_MESSAGE_TYPES.ERROR_USER_DISABLED) {
+      // User has been actively disabled on the backend. Turn off chat for them.
+      this.handleBlockedChat();
+    } else if (e.type === SOCKET_MESSAGE_TYPES.ERROR_NEEDS_REGISTRATION && !this.isRegistering) {
+      // User needs an access token, so start the user auth flow.
+      this.state.websocket.shutdown();
+      this.setState({websocket: null});
+      this.setupChatAuth(true);
+    } else if (e.type === SOCKET_MESSAGE_TYPES.ERROR_MAX_CONNECTIONS_EXCEEDED) {
+      // Chat server cannot support any more chat clients. Turn off chat for them.
+      this.disableChat();
+    } else if (e.type === SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO) {
+      // When connected the user will return an event letting us know what our
+      // user details are so we can display them properly.
+      const {user} = e;
+      const {displayName} = user;
+
+      this.setState({username: displayName});
+    }
+  }
+
+  handleBlockedChat() {
+    setLocalStorage('owncast_chat_blocked', true);
+    this.disableChat();
+  }
+
+  disableChat() {
+    this.state.websocket.shutdown();
+    this.setState({ websocket: null, canChat: false });
+  }
+
+  async setupChatAuth(force) {
+    var accessToken = getLocalStorage(KEY_ACCESS_TOKEN);
+    var username = getLocalStorage(KEY_USERNAME);
+
+    if (!accessToken || force) {
+      try {
+        this.isRegistering = true;
+        const registration = await registerChat(this.state.username);
+        accessToken = registration.accessToken;
+        username = registration.displayName;
+
+        setLocalStorage(KEY_ACCESS_TOKEN, accessToken);
+        setLocalStorage(KEY_USERNAME, username);
+
+        this.isRegistering = false;
+      } catch (e) {
+        console.error('registration error:', e);
+      }
+    }
+
+    if (this.state.websocket) {
+      this.state.websocket.shutdown();
+      this.setState({
+        websocket: null
+      });
+    }
+
+    // Without a valid access token he websocket connection will be rejected.
+    const websocket = new Websocket(accessToken);
+    websocket.addListener(
+      CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED,
+      this.handleWebsocketMessage
+    );
+
+    this.setState({
+      username,
+      websocket,
+      accessToken,
+    });
+  }
+
+  sendUsernameChange(newName) {
+		const nameChange = {
+			type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
+			newName,
+		};
+		this.state.websocket.send(nameChange);
+  }
+
+
  render(props, state) {
    const {
      chatInputEnabled,
      configData,
-      displayChat,
+      displayChatPanel,
+      canChat,
+
      isPlaying,
      orientation,
      playerActive,
@@ -512,7 +619,6 @@ export default class App extends Component {
      externalAction,
      lastDisconnectTime,
    } = state;
-
    const {
      version: appVersion,
      logo = TEMP_IMAGE,
@@ -524,6 +630,7 @@ export default class App extends Component {
      chatDisabled,
      externalActions,
      customStyles,
+      maxSocketPayloadSize,
    } = configData;

    const bgUserLogo = { backgroundImage: `url(${logo})` };
@@ -544,13 +651,13 @@ export default class App extends Component {
    const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
    const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;

-    const shouldDisplayChat = displayChat && !chatDisabled;
-    const usernameStyle = chatDisabled ? 'none' : 'flex';
+    const shouldDisplayChat = displayChatPanel && canChat && !chatDisabled;

    const extraAppClasses = classNames({
      'config-loading': configData.loading,
      chat: shouldDisplayChat,
-      'no-chat': !shouldDisplayChat,
+      'chat-hidden': !displayChatPanel && canChat && !chatDisabled, // hide panel
+      'chat-disabled': !canChat || chatDisabled,
      'single-col': singleColMode,
      'bg-gray-800': singleColMode && shouldDisplayChat,
      'short-wide': shortHeight && windowWidth > WIDTH_SINGLE_COL,
@@ -587,6 +694,19 @@ export default class App extends Component {
        onClose=${this.closeExternalActionModal}
      />`;

+    const chat = this.state.websocket
+      ? html`
+          <${Chat}
+            websocket=${websocket}
+            username=${username}
+            chatInputEnabled=${chatInputEnabled && !chatDisabled}
+            instanceTitle=${name}
+            accessToken=${this.state.accessToken}
+            inputMaxBytes=${(maxSocketPayloadSize - EST_SOCKET_PAYLOAD_BUFFER) || CHAT_MAX_MESSAGE_LENGTH}
+          />
+        `
+      : null;
+
    return html`
      <div
        id="app-container"
@@ -620,7 +740,6 @@ export default class App extends Component {
            <div
              id="user-options-container"
              class="flex flex-row justify-end items-center flex-no-wrap"
-              style=${{ display: usernameStyle }}
            >
              <${UsernameForm}
                username=${username}
@@ -633,6 +752,7 @@ export default class App extends Component {
                id="chat-toggle"
                onClick=${this.handleChatPanelToggle}
                class="flex cursor-pointer text-center justify-center items-center min-w-12 h-full bg-gray-800 hover:bg-gray-700"
+                style=${{ display: chatDisabled ? 'none' : 'block' }}
              >
                💬
              </button>
@@ -712,13 +832,7 @@ export default class App extends Component {
          </span>
        </footer>

-        <${Chat}
-          websocket=${websocket}
-          username=${username}
-          chatInputEnabled=${chatInputEnabled && !chatDisabled}
-          instanceTitle=${name}
-        />
-        ${externalActionModal}
+        ${chat} ${externalActionModal}
      </div>
    `;
  }
--- a/webroot/js/chat/register.js
+++ b/webroot/js/chat/register.js
@@ -0,0 +1,19 @@
+import {URL_CHAT_REGISTRATION} from "../utils/constants.js";
+
+export async function registerChat(username) {
+    const options = {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({displayName: username})
+    }
+
+    try {
+        const response = await fetch(URL_CHAT_REGISTRATION, options);
+        const result = await response.json();
+        return result;
+    } catch(e) {
+        console.error(e);
+    }
+}
--- a/webroot/js/components/chat/chat-input.js
+++ b/webroot/js/components/chat/chat-input.js
@@ -10,6 +10,9 @@ import {
  getCaretPosition,
  convertToText,
  convertOnPaste,
+  createEmojiMarkup,
+  trimNbsp,
+  emojify,
 } from '../../utils/chat.js';
 import {
  getLocalStorage,
@@ -19,7 +22,6 @@ import {
 import {
  URL_CUSTOM_EMOJIS,
  KEY_CHAT_FIRST_MESSAGE_SENT,
-  CHAT_MAX_MESSAGE_LENGTH,
  CHAT_CHAR_COUNT_BUFFER,
  CHAT_OK_KEYCODES,
  CHAT_KEY_MODIFIERS,
@@ -38,10 +40,10 @@ export default class ChatInput extends Component {

    this.state = {
      inputHTML: '',
-      inputText: '', // for counting
-      inputCharsLeft: CHAT_MAX_MESSAGE_LENGTH,
+      inputCharsLeft: props.inputMaxBytes,
      hasSentFirstChatMessage: getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT),
      emojiPicker: null,
+      emojiList: null,
    };

    this.handleEmojiButtonClick = this.handleEmojiButtonClick.bind(this);
@@ -71,6 +73,7 @@ export default class ChatInput extends Component {
        return response.json();
      })
      .then((json) => {
+        const emojiList = json;
        const emojiPicker = new EmojiButton({
          zIndex: 100,
          theme: 'owncast', // see chat.css
@@ -91,7 +94,7 @@ export default class ChatInput extends Component {
          this.formMessageInput.current.focus();
          replaceCaret(this.formMessageInput.current);
        });
-        this.setState({ emojiPicker });
+        this.setState({ emojiList, emojiPicker });
      })
      .catch((error) => {
        // this.handleNetworkingError(`Emoji Fetch: ${error}`);
@@ -106,18 +109,23 @@ export default class ChatInput extends Component {
  }

  handleEmojiSelected(emoji) {
-    const { inputHTML } = this.state;
+    const { inputHTML, inputCharsLeft } = this.state;
+    // if we're already at char limit, don't do anything
+    if (inputCharsLeft < 0) {
+      return;
+    }
    let content = '';
    if (emoji.url) {
-      const url = location.protocol + '//' + location.host + '/' + emoji.url;
-      const name = url.split('\\').pop().split('/').pop();
-      content = '<img class="emoji" alt="' + name + '" src="' + url + '"/>';
+      content = createEmojiMarkup(emoji, false);
    } else {
      content = emoji.emoji;
    }

+    const newHTML = inputHTML + content;
+    const charsLeft = this.calculateCurrentBytesLeft(newHTML);
    this.setState({
      inputHTML: inputHTML + content,
+      inputCharsLeft: charsLeft,
    });
    // a hacky way add focus back into input field
    setTimeout(() => {
@@ -159,23 +167,33 @@ export default class ChatInput extends Component {
    if (possibilities.length > 0) {
      this.suggestion = possibilities[this.completionIndex];

+      const newHTML = inputHTML.substring(0, at + 1) + this.suggestion + ' ' + inputHTML.substring(position);
+
      this.setState({
-        inputHTML:
-          inputHTML.substring(0, at + 1) +
-          this.suggestion +
-          ' ' +
-          inputHTML.substring(position),
+        inputHTML: newHTML,
+        inputCharsLeft: this.calculateCurrentBytesLeft(newHTML),
      });
    }

    return true;
  }

+  // replace :emoji: with the emoji <img>
+  injectEmoji() {
+    const { inputHTML, emojiList } = this.state;
+    const textValue = convertToText(inputHTML);
+    const processedHTML = emojify(inputHTML, emojiList);
+
+    if (textValue != convertToText(processedHTML)) {
+      this.setState({
+        inputHTML: processedHTML,
+      });
+      return true;
+    }
+    return false;
+  }
+
  handleMessageInputKeydown(event) {
-    const formField = this.formMessageInput.current;
-    let textValue = formField.textContent; // get this only to count chars
-    const newStates = {};
-    let numCharsLeft = CHAT_MAX_MESSAGE_LENGTH - textValue.length;
    const key = event && event.key;

    if (key === 'Enter') {
@@ -196,37 +214,32 @@ export default class ChatInput extends Component {
    if (key === 'Tab') {
      if (this.autoCompleteNames()) {
        event.preventDefault();
-
-        // value could have been changed, update char count
-        textValue = formField.textContent;
-        numCharsLeft = CHAT_MAX_MESSAGE_LENGTH - textValue.length;
      }
    }

-    if (numCharsLeft <= 0 && !CHAT_OK_KEYCODES.includes(key)) {
-      newStates.inputText = textValue;
-      this.setState(newStates);
+    // if new input pushes the potential chars over, don't do anything
+    const formField = this.formMessageInput.current;
+    const tempCharsLeft = this.calculateCurrentBytesLeft(formField.innerHTML);
+    if (tempCharsLeft <= 0 && !CHAT_OK_KEYCODES.includes(key)) {
      if (!this.modifierKeyPressed) {
        event.preventDefault(); // prevent typing more
      }
      return;
    }
-    newStates.inputText = textValue;
-    this.setState(newStates);
  }

  handleMessageInputKeyup(event) {
-    const formField = this.formMessageInput.current;
-    const textValue = formField.textContent; // get this only to count chars
-
    const { key } = event;
-
    if (key === 'Control' || key === 'Shift') {
      this.prepNewLine = false;
    }
    if (CHAT_KEY_MODIFIERS.includes(key)) {
      this.modifierKeyPressed = false;
    }
+
+    if (key === ':' || key === ';') {
+      this.injectEmoji();
+    }
    this.setState({
      inputCharsLeft: CHAT_MAX_MESSAGE_LENGTH - textValue.length,
    });
@@ -239,11 +252,11 @@ export default class ChatInput extends Component {

  handlePaste(event) {
    // don't allow paste if too much text already
-    if (CHAT_MAX_MESSAGE_LENGTH - this.state.inputText.length < 0) {
+    if (this.state.inputCharsLeft < 0) {
      event.preventDefault();
      return;
    }
-    convertOnPaste(event);
+    convertOnPaste(event, this.state.emojiList);
    this.handleMessageInputKeydown(event);
  }

@@ -253,16 +266,15 @@ export default class ChatInput extends Component {
  }

  sendMessage() {
-    const { handleSendMessage } = this.props;
-    const { hasSentFirstChatMessage, inputHTML, inputText } = this.state;
-    if (CHAT_MAX_MESSAGE_LENGTH - inputText.length < 0) {
+    const { handleSendMessage, inputMaxBytes } = this.props;
+    const { hasSentFirstChatMessage, inputHTML, inputCharsLeft } = this.state;
+    if (inputCharsLeft < 0) {
      return;
    }
    const message = convertToText(inputHTML);
    const newStates = {
      inputHTML: '',
-      inputText: '',
-      inputCharsLeft: CHAT_MAX_MESSAGE_LENGTH,
+      inputCharsLeft: inputMaxBytes,
    };

    handleSendMessage(message);
@@ -277,13 +289,23 @@ export default class ChatInput extends Component {
  }

  handleContentEditableChange(event) {
-    this.setState({ inputHTML: event.target.value });
+    const value = event.target.value;
+    this.setState({
+      inputHTML: value,
+      inputCharsLeft: this.calculateCurrentBytesLeft(value),
+    });
+  }
+
+  calculateCurrentBytesLeft(inputContent) {
+    const { inputMaxBytes } = this.props;
+    const curBytes = new Blob([trimNbsp(inputContent)]).size;
+    return inputMaxBytes - curBytes;
  }

  render(props, state) {
    const { hasSentFirstChatMessage, inputCharsLeft, inputHTML, emojiPicker } =
      state;
-    const { inputEnabled } = props;
+    const { inputEnabled, inputMaxBytes } = props;
    const emojiButtonStyle = {
      display: emojiPicker && inputCharsLeft > 0 ? 'block' : 'none',
    };
@@ -348,7 +370,7 @@ export default class ChatInput extends Component {
          </span>

          <span id="message-form-warning" class="text-red-600 text-xs"
-            >${inputCharsLeft}/${CHAT_MAX_MESSAGE_LENGTH}</span
+            >${inputCharsLeft} bytes</span
          >
        </div>
      </div>
--- a/webroot/js/components/chat/chat-message-view.js
+++ b/webroot/js/components/chat/chat-message-view.js
@@ -4,8 +4,8 @@ import Mark from '/js/web_modules/markjs/dist/mark.es6.min.js';
 const html = htm.bind(h);

 import {
-  messageBubbleColorForString,
-  textColorForString,
+  messageBubbleColorForHue,
+  textColorForHue,
 } from '../../utils/user-colors.js';
 import { convertToText } from '../../utils/chat.js';
 import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
@@ -28,8 +28,9 @@ export default class ChatMessageView extends Component {

  async componentDidMount() {
    const { message, username } = this.props;
+    const { body } = message;
+  
    if (message && username) {
-      const { body } = message;
      const formattedMessage = await formatMessageText(body, username);
      this.setState({
        formattedMessage,
@@ -39,22 +40,24 @@ export default class ChatMessageView extends Component {

  render() {
    const { message } = this.props;
-    const { author, timestamp, visible } = message;
+    const { user, timestamp } = message;
+    const { displayName, displayColor, createdAt } = user;

    const { formattedMessage } = this.state;
    if (!formattedMessage) {
      return null;
    }
-    const formattedTimestamp = formatTimestamp(timestamp);
+    const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
+    const userMetadata = `${displayName} first joined ${formatTimestamp(createdAt)}`;

    const isSystemMessage = message.type === SOCKET_MESSAGE_TYPES.SYSTEM;

    const authorTextColor = isSystemMessage
      ? { color: '#fff' }
-      : { color: textColorForString(author) };
+      : { color: textColorForHue(displayColor) };
    const backgroundStyle = isSystemMessage
      ? { backgroundColor: '#667eea' }
-      : { backgroundColor: messageBubbleColorForString(author) };
+      : { backgroundColor: messageBubbleColorForHue(displayColor) };
    const messageClassString = isSystemMessage
      ? getSystemMessageClassString()
      : getChatMessageClassString();
@@ -66,8 +69,8 @@ export default class ChatMessageView extends Component {
        title=${formattedTimestamp}
      >
        <div class="message-content break-words w-full">
-          <div style=${authorTextColor} class="message-author font-bold">
-            ${author}
+          <div style=${authorTextColor} class="message-author font-bold" title=${userMetadata}>
+            ${displayName}
          </div>
          <div
            class="message-text text-gray-300 font-normal overflow-y-hidden pt-2"
@@ -87,7 +90,7 @@ function getChatMessageClassString() {
  return 'message flex flex-row items-start p-3 m-3 rounded-lg shadow-s text-sm';
 }

-export async function formatMessageText(message, username) {
+export async function formatMessageText(message, username) {  
  let formattedText = getMessageWithEmbeds(message);
  formattedText = convertToMarkup(formattedText);
  return await highlightUsername(formattedText, username);
@@ -156,7 +159,7 @@ function formatTimestamp(sentAt) {
    return '';
  }

-  let diffInDays = getDiffInDaysFromNow(sentAt); //(new Date() - sentAt) / (24 * 3600 * 1000);
+  let diffInDays = getDiffInDaysFromNow(sentAt);
  if (diffInDays >= 1) {
    return (
      `Sent at ${sentAt.toLocaleDateString('en-US', {
@@ -165,7 +168,7 @@ function formatTimestamp(sentAt) {
    );
  }

-  return `Sent at ${sentAt.toLocaleTimeString()}`;
+  return `${sentAt.toLocaleTimeString()}`;
 }

 /*
--- a/webroot/js/components/chat/chat.js
+++ b/webroot/js/components/chat/chat.js
@@ -8,13 +8,12 @@ import { CALLBACKS, SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
 import {
  jumpToBottom,
  debounce,
-  getLocalStorage,
+  setLocalStorage,
 } from '../../utils/helpers.js';
 import { extraUserNamesFromMessageHistory } from '../../utils/chat.js';
 import {
  URL_CHAT_HISTORY,
  MESSAGE_JUMPTOBOTTOM_BUFFER,
-  KEY_CUSTOM_USERNAME_SET,
 } from '../../utils/constants.js';

 export default class Chat extends Component {
@@ -33,6 +32,7 @@ export default class Chat extends Component {
    this.websocket = null;
    this.receivedFirstMessages = false;
    this.receivedMessageUpdate = false;
+    this.hasFetchedHistory = false;

    this.windowBlurred = false;
    this.numMessagesSinceBlur = 0;
@@ -52,7 +52,6 @@ export default class Chat extends Component {

  componentDidMount() {
    this.setupWebSocketCallbacks();
-    this.getChatHistory();

    window.addEventListener('resize', this.handleWindowResize);

@@ -93,23 +92,25 @@ export default class Chat extends Component {

  componentDidUpdate(prevProps, prevState) {
    const { username: prevName } = prevProps;
-    const { username } = this.props;
+    const { username, accessToken } = this.props;

    const { messages: prevMessages } = prevState;
    const { messages } = this.state;

-    // if username updated, send a message
-    if (prevName !== username) {
-      this.sendUsernameChange(prevName, username);
-    }
-
    // scroll to bottom of messages list when new ones come in
    if (messages.length !== prevMessages.length) {
      this.setState({
        newMessagesReceived: true,
      });
    }
+
+    // Fetch chat history
+    if (!this.hasFetchedHistory && accessToken) {
+      this.hasFetchedHistory = true;
+      this.getChatHistory(accessToken);
+    }
  }
+
  componentWillUnmount() {
    window.removeEventListener('resize', this.handleWindowResize);
    if (!this.props.messagesOnly) {
@@ -138,8 +139,8 @@ export default class Chat extends Component {
  }

  // fetch chat history
-  getChatHistory() {
-    fetch(URL_CHAT_HISTORY)
+  getChatHistory(accessToken) {
+    fetch(URL_CHAT_HISTORY + `?accessToken=${accessToken}`)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`Network response was not ok ${response.ok}`);
@@ -153,30 +154,20 @@ export default class Chat extends Component {
          messages: this.state.messages.concat(data),
          chatUserNames,
        });
+        this.scrollToBottom();
      })
      .catch((error) => {
        this.handleNetworkingError(`Fetch getChatHistory: ${error}`);
      });
  }

-  sendUsernameChange(oldName, newName) {
-    clearTimeout(this.sendUserJoinedEvent);
-
-    const nameChange = {
-      type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
-      oldName,
-      newName,
-    };
-    this.websocket.send(nameChange);
-  }
-
  receivedWebsocketMessage(message) {
    this.handleMessage(message);
  }

  handleNetworkingError(error) {
    // todo: something more useful
-    console.log(error);
+    console.error('chat error', error);
  }

  // handle any incoming message
@@ -247,13 +238,6 @@ export default class Chat extends Component {
    this.setState({
      webSocketConnected: true,
    });
-
-    const hasPreviouslySetCustomUsername = getLocalStorage(
-      KEY_CUSTOM_USERNAME_SET
-    );
-    if (hasPreviouslySetCustomUsername && !this.props.ignoreClient) {
-      this.sendJoinedMessage();
-    }
  }

  websocketDisconnected() {
@@ -269,38 +253,20 @@ export default class Chat extends Component {
    const { username } = this.props;
    const message = {
      body: content,
-      author: username,
-      type: SOCKET_MESSAGE_TYPES.CHAT,
+			type: SOCKET_MESSAGE_TYPES.CHAT,
    };
    this.websocket.send(message);
  }

-  sendJoinedMessage() {
-    const { username } = this.props;
-    const message = {
-      username: username,
-      type: SOCKET_MESSAGE_TYPES.USER_JOINED,
-    };
-
-    // Artificial delay so people who join and immediately
-    // leave don't get counted.
-    this.sendUserJoinedEvent = setTimeout(
-      function () {
-        this.websocket.send(message);
-      }.bind(this),
-      5000
-    );
-  }
-
  updateAuthorList(message) {
    const { type } = message;
    const nameList = this.state.chatUserNames;

    if (
      type === SOCKET_MESSAGE_TYPES.CHAT &&
-      !nameList.includes(message.author)
+      !nameList.includes(message.user.displayName)
    ) {
-      return nameList.push(message.author);
+      return nameList.push(message.user.displayName);
    } else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
      const { oldName, newName } = message;
      const oldNameIndex = nameList.indexOf(oldName);
@@ -373,7 +339,7 @@ export default class Chat extends Component {
  }

  render(props, state) {
-    const { username, messagesOnly, chatInputEnabled } = props;
+    const { username, messagesOnly, chatInputEnabled, inputMaxBytes } = props;
    const { messages, chatUserNames, webSocketConnected } = state;

    const messageList = messages
@@ -416,6 +382,7 @@ export default class Chat extends Component {
            chatUserNames=${chatUserNames}
            inputEnabled=${webSocketConnected && chatInputEnabled}
            handleSendMessage=${this.submitChat}
+            inputMaxBytes=${inputMaxBytes}
          />
        </div>
      </section>
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -12,33 +12,35 @@ export default function Message(props) {
  if (type === SOCKET_MESSAGE_TYPES.CHAT || type === SOCKET_MESSAGE_TYPES.SYSTEM) {
    return html`<${ChatMessageView} ...${props} />`;
  } else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
-    const { oldName, newName } = message;
+    const { oldName, user } = message;
+    const { displayName } = user;  
    return (
      html`
        <div class="message message-name-change flex items-center justify-start p-3">
          <div class="message-content flex flex-row items-center justify-center text-sm w-full">
            <div class="text-white text-center opacity-50 overflow-hidden break-words">
-              <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
+              <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${displayName}</span>.
            </div>
          </div>
        </div>
      `
    );
  } else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) {
-    const { username } = message;
+    const { user } = message
+    const { displayName } = user;
    return (
      html`
          <div class="message message-user-joined flex items-center justify-start p-3">
            <div class="message-content flex flex-row items-center justify-center text-sm w-full">
              <div class="text-white text-center opacity-50 overflow-hidden break-words">
-                <span class="font-bold">${username}</span> joined the chat.
+                <span class="font-bold">${displayName}</span> joined the chat.
              </div>
            </div>
          </div>
        `
    );
  } else if (type === SOCKET_MESSAGE_TYPES.CHAT_ACTION) {
-    const { author, body } = message;
+    const { body } = message;
    const formattedMessage = `${body}`
    return (
      html`
@@ -51,6 +53,8 @@ export default function Message(props) {
          </div>
        `
    );
+  } else if (type === SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO) {
+    // noop for now
  } else {
    console.log("Unknown message type:", type);
  }
--- a/webroot/js/components/external-action-modal.js
+++ b/webroot/js/components/external-action-modal.js
@@ -24,7 +24,7 @@ export default class ExternalActionModal extends Component {
        onClose: this.props.onClose,
      });
    } catch (e) {
-      console.log('micromodal error: ', e);
+      console.error('modal error: ', e);
    }
  }

--- a/webroot/js/components/player.js
+++ b/webroot/js/components/player.js
@@ -155,7 +155,7 @@ class OwncastPlayer {
          const response = await fetch('/api/video/variants');
          qualities = await response.json();
        } catch (e) {
-          console.log(e);
+          console.error(e);
        }

        var MenuItem = videojs.getComponent('MenuItem');
--- a/webroot/js/utils/chat.js
+++ b/webroot/js/utils/chat.js
@@ -7,41 +7,41 @@ import {

 // Taken from https://stackoverflow.com/questions/3972014/get-contenteditable-caret-index-position
 export function getCaretPosition(editableDiv) {
-	var caretPos = 0,
-		sel, range;
-	if (window.getSelection) {
-		sel = window.getSelection();
-		if (sel.rangeCount) {
-			range = sel.getRangeAt(0);
-			if (range.commonAncestorContainer.parentNode == editableDiv) {
-				caretPos = range.endOffset;
-			}
-		}
-	} else if (document.selection && document.selection.createRange) {
-		range = document.selection.createRange();
-		if (range.parentElement() == editableDiv) {
-			var tempEl = document.createElement("span");
-			editableDiv.insertBefore(tempEl, editableDiv.firstChild);
-			var tempRange = range.duplicate();
-			tempRange.moveToElementText(tempEl);
-			tempRange.setEndPoint("EndToEnd", range);
-			caretPos = tempRange.text.length;
-		}
-	}
-	return caretPos;
+  var caretPos = 0,
+    sel, range;
+  if (window.getSelection) {
+    sel = window.getSelection();
+    if (sel.rangeCount) {
+      range = sel.getRangeAt(0);
+      if (range.commonAncestorContainer.parentNode == editableDiv) {
+        caretPos = range.endOffset;
+      }
+    }
+  } else if (document.selection && document.selection.createRange) {
+    range = document.selection.createRange();
+    if (range.parentElement() == editableDiv) {
+      var tempEl = document.createElement("span");
+      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
+      var tempRange = range.duplicate();
+      tempRange.moveToElementText(tempEl);
+      tempRange.setEndPoint("EndToEnd", range);
+      caretPos = tempRange.text.length;
+    }
+  }
+  return caretPos;
 }

 // Might not need this anymore
 // Pieced together from parts of https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div
 export function setCaretPosition(editableDiv, position) {
-	var range = document.createRange();
-	var sel = window.getSelection();
-	range.selectNode(editableDiv);
-	range.setStart(editableDiv.childNodes[0], position);
-	range.collapse(true);
+  var range = document.createRange();
+  var sel = window.getSelection();
+  range.selectNode(editableDiv);
+  range.setStart(editableDiv.childNodes[0], position);
+  range.collapse(true);

-	sel.removeAllRanges();
-	sel.addRange(range);
+  sel.removeAllRanges();
+  sel.addRange(range);
 }


@@ -55,9 +55,9 @@ export function generatePlaceholderText(isEnabled, hasSentFirstChatMessage) {
 export function extraUserNamesFromMessageHistory(messages) {
  const list = [];
  if (messages) {
-    messages.forEach(function(message) {
-      if (!list.includes(message.author)) {
-        list.push(message.author);
+    messages.forEach(function (message) {
+      if (!list.includes(message.user.displayName)) {
+        list.push(message.user.displayName);
      }
    });
  }
@@ -86,6 +86,9 @@ export function convertToText(str = '') {
  // Replace `<p>` (from IE).
  value = value.replace(/<p>/gi, '\n');

+  // Cleanup the emoji titles.
+  value = value.replace(/\u200C{2}/gi, '');
+
  // Trim each line.
  value = value
    .split('\n')
@@ -109,7 +112,7 @@ export function convertToText(str = '') {
  You would call this when a user pastes from
  the clipboard into a `contenteditable` area.
 */
-export function convertOnPaste( event = { preventDefault() {} }) {
+export function convertOnPaste(event = { preventDefault() { } }, emojiList) {
  // Prevent paste.
  event.preventDefault();

@@ -136,8 +139,47 @@ export function convertOnPaste( event = { preventDefault() {} }) {
  // Clean up text.
  value = convertToText(value);

+  const HTML = emojify(value, emojiList);
+
  // Insert text.
  if (typeof document.execCommand === 'function') {
-    document.execCommand('insertText', false, value);
+    document.execCommand('insertHTML', false, HTML);
  }
 }
+
+export function createEmojiMarkup(data, isCustom) {
+  const emojiUrl = isCustom ? data.emoji : data.url;
+  const emojiName = (isCustom ? data.name : data.url.split('\\').pop().split('/').pop().split('.').shift()).toLowerCase();
+  return '<img class="emoji" alt=":‌‌' + emojiName + '‌‌:" title=":‌‌' + emojiName + '‌‌:" src="' + emojiUrl + '"/>';
+}
+
+// trim html white space characters from ends of messages for more accurate counting
+export function trimNbsp(html) {
+  return html.replace(/^(?:&nbsp;|\s)+|(?:&nbsp;|\s)+$/ig,'');
+}
+
+export function emojify(HTML, emojiList) {
+  const textValue = convertToText(HTML)
+
+  for (var lastPos = textValue.length; lastPos >= 0; lastPos--) {
+    const endPos = textValue.lastIndexOf(':', lastPos);
+    if (endPos <= 0) {
+      break;
+    }
+    const startPos = textValue.lastIndexOf(':', endPos - 1);
+    if (startPos === -1) {
+      break;
+    }
+    const typedEmoji = textValue.substring(startPos + 1, endPos).trim();
+    const emojiIndex = emojiList.findIndex(function (emojiItem) {
+      return emojiItem.name.toLowerCase() === typedEmoji.toLowerCase();
+    });
+
+    if (emojiIndex != -1) {
+      const emojiImgElement = createEmojiMarkup(emojiList[emojiIndex], true)
+      HTML = HTML.replace(":" + typedEmoji + ":", emojiImgElement)
+    }
+  }
+  return HTML;
+
+}
--- a/webroot/js/utils/constants.js
+++ b/webroot/js/utils/constants.js
@@ -8,9 +8,8 @@ export const URL_VIEWER_PING = `/api/ping`;

 // TODO: This directory is customizable in the config.  So we should expose this via the config API.
 export const URL_STREAM = `/hls/stream.m3u8`;
-export const URL_WEBSOCKET = `${
-  location.protocol === 'https:' ? 'wss' : 'ws'
-}://${location.host}/entry`;
+export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`;
+export const URL_CHAT_REGISTRATION = `/api/chat/register`;

 export const TIMER_STATUS_UPDATE = 5000; // ms
 export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
@@ -26,6 +25,8 @@ export const MESSAGE_ONLINE = 'Stream is online.';
 export const URL_OWNCAST = 'https://owncast.online'; // used in footer
 export const PLAYER_VOLUME = 'owncast_volume';

+export const KEY_ACCESS_TOKEN = 'owncast_access_token';
+export const KEY_EMBED_CHAT_ACCESS_TOKEN = 'owncast_embed_chat_access_token';
 export const KEY_USERNAME = 'owncast_username';
 export const KEY_CUSTOM_USERNAME_SET = 'owncast_custom_username_set';
 export const KEY_CHAT_DISPLAYED = 'owncast_chat';
@@ -35,6 +36,7 @@ export const CHAT_INITIAL_PLACEHOLDER_TEXT =
 export const CHAT_PLACEHOLDER_TEXT = 'Message';
 export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.';
 export const CHAT_MAX_MESSAGE_LENGTH = 500;
+export const EST_SOCKET_PAYLOAD_BUFFER = 512;
 export const CHAT_CHAR_COUNT_BUFFER = 20;
 export const CHAT_OK_KEYCODES = [
  'ArrowLeft',
--- a/webroot/js/utils/helpers.js
+++ b/webroot/js/utils/helpers.js
@@ -92,10 +92,6 @@ export function getOrientation(forTouch = false) {
  }
 }

-export function generateUsername() {
-  return `User ${Math.floor(Math.random() * 42) + 1}`;
-}
-
 export function padLeft(text, pad, size) {
  return String(pad.repeat(size) + text).slice(-size);
 }
@@ -122,7 +118,6 @@ export function setVHvar() {
  var vh = window.innerHeight * 0.01;
  // Then we set the value in the --vh custom property to the root of the document
  document.documentElement.style.setProperty('--vh', `${vh}px`);
-  console.log('== new vh', vh);
 }

 export function doesObjectSupportFunction(object, functionName) {
--- a/webroot/js/utils/user-colors.js
+++ b/webroot/js/utils/user-colors.js
@@ -1,31 +1,17 @@
-export function messageBubbleColorForString(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    // eslint-disable-next-line
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
+export function messageBubbleColorForHue(hue) {
  // Tweak these to adjust the result of the color
-  const saturation = 25;
-  const lightness = 45;
+  const saturation = 45;
+  const lightness = 50;
  const alpha = 'var(--message-background-alpha)';
-  const hue = parseInt(Math.abs(hash), 16) % 360;

  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
 }

-export function textColorForString(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    // eslint-disable-next-line
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
+export function textColorForHue(hue) {
  // Tweak these to adjust the result of the color
  const saturation = 80;
  const lightness = 80;
  const alpha = 0.8;
-  const hue = parseInt(Math.abs(hash), 16) % 360;

  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
 }
--- a/webroot/js/utils/websocket.js
+++ b/webroot/js/utils/websocket.js
@@ -11,23 +11,25 @@ export const SOCKET_MESSAGE_TYPES = {
  PONG: 'PONG',
  SYSTEM: 'SYSTEM',
  USER_JOINED: 'USER_JOINED',
-  CHAT_ACTION: 'CHAT_ACTION'
+  CHAT_ACTION: 'CHAT_ACTION',
+  CONNECTED_USER_INFO: 'CONNECTED_USER_INFO',
+  ERROR_USER_DISABLED: 'ERROR_USER_DISABLED',
+  ERROR_NEEDS_REGISTRATION: 'ERROR_NEEDS_REGISTRATION',
+  ERROR_MAX_CONNECTIONS_EXCEEDED: 'ERROR_MAX_CONNECTIONS_EXCEEDED',
 };

-const IGNORE_CLIENT_FLAG = 'IGNORE_CLIENT';
-
 export const CALLBACKS = {
  RAW_WEBSOCKET_MESSAGE_RECEIVED: 'rawWebsocketMessageReceived',
  WEBSOCKET_CONNECTED: 'websocketConnected',
-  WEBSOCKET_DISCONNECTED: 'websocketDisconnected',
 }

 const TIMER_WEBSOCKET_RECONNECT = 5000; // ms

 export default class Websocket {
-  constructor(ignoreClient) {
+  constructor(accessToken) {
    this.websocket = null;
    this.websocketReconnectTimer = null;
+    this.accessToken = accessToken;

    this.websocketConnectedListeners = [];
    this.websocketDisconnectListeners = [];
@@ -36,15 +38,18 @@ export default class Websocket {
    this.send = this.send.bind(this);
    this.createAndConnect = this.createAndConnect.bind(this);
    this.scheduleReconnect = this.scheduleReconnect.bind(this);
+    this.shutdown = this.shutdown.bind(this);

-    this.ignoreClient = ignoreClient;
+    this.isShutdown = false;

    this.createAndConnect();
  }

  createAndConnect() {
-    const extraFlags = this.ignoreClient ? [IGNORE_CLIENT_FLAG] : [];
-    const ws = new WebSocket(URL_WEBSOCKET, extraFlags);
+    const url = new URL(URL_WEBSOCKET);
+    url.searchParams.append('accessToken', this.accessToken);
+    
+    const ws = new WebSocket(url.toString());
    ws.onopen = this.onOpen.bind(this);
    ws.onclose = this.onClose.bind(this);
    ws.onerror = this.onError.bind(this);
@@ -79,6 +84,11 @@ export default class Websocket {
    this.websocket.send(messageJSON);
  }

+  shutdown() {
+    this.isShutdown = true;
+    this.websocket.close();
+  }
+
  // Private methods

  // Fire the callbacks of the listeners.
@@ -116,14 +126,18 @@ export default class Websocket {
    this.websocket = null;
    this.notifyWebsocketDisconnectedListeners();
    this.handleNetworkingError('Websocket closed.');
-    this.scheduleReconnect();
+    if (!this.isShutdown) {
+      this.scheduleReconnect();
+    }
  }

  // On ws error just close the socket and let it re-connect again for now.
  onError(e) {
    this.handleNetworkingError(`Socket error: ${JSON.parse(e)}`);
    this.websocket.close();
-    this.scheduleReconnect();
+    if (!this.isShutdown) {
+      this.scheduleReconnect();
+    }
  }

  scheduleReconnect() {
@@ -142,9 +156,15 @@ export default class Websocket {
    try {
      var model = JSON.parse(e.data);
    } catch (e) {
-      console.log(e);
+      // console.log(e, e.data);
+      return;
    }

+    if (!model.type) {
+      console.error("No type provided", model);
+      return;
+    }
+    
    // Send PONGs
    if (model.type === SOCKET_MESSAGE_TYPES.PING) {
      this.sendPong();