Join Alex Banks for an in-depth discussion in this video Connecting the board, part of Building a Polling App with Socket IO and React.js.
- Now that we have gathered the user's answer into a results object,…we need to visualize that data on the board.…So we're going to need to build our board component.…The first thing that we need to do…is we need to send this data to all of our sockets,…and we do that in the same two places we always have.…One, we want to welcome any new connections…with information about the results as well.…So in our app-server.js on line 80…where we emit the welcome event,…I'm going to go ahead and add another field to this object.…
I'm going to drop my cursor at the end of line 85,…throw in a comma, and also send the results.…Now we are sending the results…to any newly connected socket.…Also when users answer a question…I want to broadcast that answer.…So I'm going to come in here on line 76…inside of the handler for the answer socket.…Drop my cursor at the end of that…and io.sockets.emit, and we are going to…go ahead and emit a results event.…And this results event will pass our results object. Great.…
Now we are getting that answer data from the server…
- Setting up the environment
- Connecting sockets
- Handling disconnects
- Setting up the React.js router
- Passing state to child components as properties
- Joining the presentation
- Starting and running the presentation
- Asking and answering questions
- Graphing results
- Upgrading to ES6
Skill Level Intermediate
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
1. Setting Up the Environment
Setting up npm scripts4m 22s
2. Connecting Sockets
3. App State and Routes
4. Joining the Presentation
5. Starting the Presentation
6. Questions and Answers
7. Graphing Results on a Scoreboard
8. Upgrading to ES6 Syntax
Next steps1m 1s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.