---
# System prepended metadata

title: 2101-FSA-RM-WEB-FT Sockets Demo

---

# 2101-FSA-RM-WEB-FT Sockets Demo

## What We Are Creating

We are creating something called "Tip Jar". The idea is that anyone should be able to provide tips around the local area's goings on. Tried some awesome food recently? Put in the tip jar! Awesome event happening at a local bar that wasn't advertised? Put in the tip jar!

It would be very nice if someone submitted a tip, and it reflected on anyone's client who is currently browsing the app. We will be using sockets to do help us achieve this.

## Feature Set

### User Story: Requesting all the users

**User Story**: When Jesse first loads the website, we should send a list of the tips already saved in our "database"

**Implementation**:

* [Server] When the client first connects via HTTP, we should "upgrade" the connection to a socket connection
* [Server] When the socket creation is created, we should send an event back that is currently saved users to the client. We can call this event "all-users"
* [Client] The client should have a matching listener listening to that event as soon as it happens

### User Story: Submitting a tip

**User Story**: Chidi wants to submit a tip to the tip jar. She should be able to fill out the form with her name, and the tip. When she submits, it should automatically be reflected in our frontend as well as any other client connected

**Implementation**:

* [Server] The server should have a listener that we can call "new-user-tip" that, upon submission of a new tip, our server should save that user into our "database" and then broadcast it to everyone except the sender
* [Client] The client should be signaling the event (matching "new-user-tip") as soon as the form submit
* [Client] When the client emits the "new-user-tip" event and the server gets it, the client should also be listening in on the "new-user-tip" when the server sends it back