Build sockot.io traffic light app

To reinforce these initial socket concepts we’ve just covered. We will write a small app that simulates control of one or more traffic light components. The setup will work as follows: • Server Side Code: o Use the server code in today’s [login to view URL] as a starting point (this will be provided) o In addition, add an array of objects that include street names and data representing the length of time (in milliseconds) required for each lamp in a street light to be illuminated (green, red and yellow). In the data, ensure each element of the array uses different times, the provided example uses 12, 7.5 and 3 seconds respectively. Use the following format: let streetLights = [ {streetName: 'Maple', green: 12000, red: 7500, yellow: 3000}, … … Add other street values here } o When the server receives a join message from a client, a street name will be passed from the client as part of the payload . Use this name as the room to join. o After joining, have the server emit a turnLampOn message back to the client. This message should contain a payload consisting of the array element whose street name property matches the current room name (use the array method find to get the desired entry). This is an example from the MDN site to show you the syntax of using the find but obviously is not part of the lab: const result = [login to view URL]( fruit => [login to view URL] === 'cherries' ); • Client Side Code: o Create a component called [login to view URL] that does the following:  In the componentDidMount method: • Connects to the socket server • Emits a join message to the server, passing [login to view URL] as the payload (a parent component will load this see pg. 10) • In return, handles a turnLampOn message from server that includes lamp data as the payload from server. Then registers an event handler where the lights will be controlled  turnLampOn Event handler • Renders lamps based on state data (see markup below) • Continously calls a timing method for each color and the particular amount of time the light will be lit. This processing should be asynchronous ensuring one light completes before the next one starts) and should always be redgreenyellow and back to red continuously: while (true) { await [login to view URL]('red', [login to view URL]); … // other colours go here } waitSomeSeconds = (color, wait) => { return new Promise((resolve, reject) => { setTimeout(() => { [login to view URL]({ currentcolor: color }); resolve(); }, wait); }); };  Renders a single traffic light using markup similar to (again feel free to design your own): <div className="light"> <div className="lamp" style={{ backgroundColor: [login to view URL]('red'), margin: '.5rem' }} /> <div className="lamp" style={{ backgroundColor: [login to view URL]('yellow'), margin: '.5rem' }} /> <div className="lamp" style={{ backgroundColor: [login to view URL]('green'), margin: '.5rem' }} /> <div style={{ textAlign: 'center', fontName: 'Helvetica' }}>{[login to view URL]}</div> </div>  This code is an example to change the lamp’s backgroundColor to white if it’s not active so that there is only ever one active lamp: getColor = color => ([login to view URL] === color ? color : 'white');  The markup above uses classes called lamp and light. The following CSS can be added to [login to view URL] file to render 3 circle divs, and make sure you add the import for it to the [login to view URL] file .lamp { height: 3rem; width: 3rem; border-style: solid; border-width: 2px; border-radius: 50%; } .light { border: solid; width: 4.25rem; } o The parent component must contain a minimum of 4 <TrafficLight…/> tags. You can make this parent a functional component as no state or lifecycle methods are required