Peruttu

Build [login to view URL] 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

Taidot: node.js, React.js, Socket IO

Näytä lisää: 555 timer traffic light, build social networking site google app engine, build traffic light, socket.io github, socket.io vs websocket, socket io android, socket.io tutorial, socket io, socket.io example, socket.io npm, socket.io php, traffic light multisim, traffic light design 555 timer, traffic light project, design traffic light system, design traffic light project, build traffic light timer, iphone app icon traffic light, build and get traffic to my website, Build a simple Angular 2 web app to flip image file and use edge.js

Tietoa työnantajasta:
( 1 arvostelu ) London, Canada

Projektin tunnus: #18925526

9 freelanceria on tarjonnut keskimäärin %project_bid_stats_avg_sub_26% %project_currencyDetails_sign_sub_27% tähän työhön

arifjaunpur

Hello, I have experience in NodeJS, WebSocket, and [login to view URL] framework. Let me know when we can discuss. I am Sr. full stack developer & DevOps with 6+ years of experience. I have experience in Java, JavaScript, Lisää

$250 CAD 3 päivässä
(86 arvostelua)
6.5
hunmin888

Hi, My name is Han. I am who is React Expert with 3+ years experience in a React Company. I read your project description carefully. My Skills are as below. - Web : ReactJS (FrontEnd) + MongoDB + Express/Laravel Lisää

$144 CAD 3 päivässä
(3 arvostelua)
3.7
sotnikovuri

Your idea is very good. [login to view URL] is very useful tool for real-time communication. I have many experiences of real-time communincation programming and have a deep knowledge. I want you to work with me.thanks.

$155 CAD 3 päivässä
(1 arvostelu)
0.6
Vadimwang

Hi With 5 years’ experience in React I am well-versed in Angular, Ionic framework, Typescript, Javascript ES6/7/2015, SASS/SCSS, Webpack, Gulp, babel, etc. Also I am very familiar with Html5/CSS3/JQuery/Postgress/Pyt Lisää

$155 CAD 3 päivässä
(0 arvostelua)
0.0
nguyenluungoc

I have extensive experience in ReactJS / NodeJS (Express/Hapi framework and [login to view URL]) - this project seems conceptually simple enough that I have to wonder if there will eventually be other requirements in customizing Lisää

$55 CAD 1 päivässä
(0 arvostelua)
0.0
rayfigs

Hello I am very familiar with [login to view URL] in Node.js and javascript frameworks such like Vue.js, React.js and Angualr I can help you to run it successful Thanks

$150 CAD 1 päivässä
(0 arvostelua)
0.0
chacho60

Hello! My name is Edgardo. I've read your project and sounds interesting! I've worked many times with sockets in React, and I wanna help you build your project. I've worked with [login to view URL] before but sincerely I prefe Lisää

$200 CAD 2 päivässä
(0 arvostelua)
0.0
thomascogez

Hi, I'm experienced in [login to view URL] programming if you intrested contact me I'm alway up Have a nice day

$111 CAD 10 päivässä
(0 arvostelua)
0.0
ntsagar13

I can do your traffic light with live response using [login to view URL] and it will give good performance so let’s discuss project needs and time for do that also cost. Ping me if interested for good code quality. Thanks

$222 CAD 10 päivässä
(0 arvostelua)
0.0