Live Events Chat

Live Events Chat

Overview

Live Events chat gives users the ability to participate and express their feelings and opinions live while watching sports, concerts, personal live vlogging and a myriad of other live streaming sessions. Building chat around a live event has a few nuances, but essentially is a Basic Chat next to a live stream.

Two key nuances in Live Events are readability and dialogue. We all know the chat spam that can accompany popular live events and how challenging it can be for individual participants to actually participate. Readability is centered around managing the chat stream flow to maintain a maximum message rate, particularly for large audiences that have a lot to say. Dialogue is centered around breaking audiences up into individual smaller audiences so that the possibility for dialogue and responses between members is possible. The Live Event Chat focuses on the former of the two, by managing the message list size and providing the mechanisms around managing the incoming stream. Our Solution Architects team can help with the latter, assisting with strategies around managing audience sizes.

Developer

This demonstration is made from several nested components:

• Basic Chat Components

  • AppState

  • ActiveUserListPanel

    • ActiveUserList

      • ActiveUser

  • MessageListPanel

    • MessageList

      • Message

  • ComposeMessageBox

• Live Events Components

  • EventListPanel

    • EventListTop

    • EventDetailsBottom

    • LiveFeedPanel (YouTube, Jitsi, ReactPlayer)

Setup and installation is very straightforward.

1. Clone the Github Repository

2. Run yarn install

3. Run yarn firehose

4. Run yarn start

Designer

We have developed a symbolized component Sketch file that corresponds to the actual React app components for developers in order to style the experience. This Live Event Chat app provides a very simple way to show how to add Chat functionality to an existing React app or use as a template for your own Live Chat Event.

The Sketch file contains Sketch "Symbols". Each Symbol matches a React Component and a React "Styled Component". One popular design system is Zeplin and its use for this project is described in our Github Repository Readme. Zeplin can take the Sketch File and output the React Application components with styling. Zeplin is not needed to run this project, nor Sketch, but they will allow you to reuse this project effectively if you are working in an environment where the engineering and design team must work effectively together.