⚡️ 🔌 Sockets 🔌 ⚡️
Realtime Communication for Everyone!
Real Time Networking
We've looked at RESTful designs to set up CRUD systems, but today we're going to look at something different.
Example & Discussion (10 minutes)
We're going to look at an example first. Keep in mind the following questions:
- How is this different from other web apps we've built so far?
- What kind of data is my laptop sending? Receiving?
- How often is data being sent? Received?
- How do you think this works?
Check out the example for five minutes, and then we'll discuss for five more minutes.
The example we looked at depends on real-time communication among multiple clients. That means that there are more participants than in a client-server relationship, and data should move between every client as fast as possible to create the illusion that we are all playing the same game.
This is a very specific constraint, and many web apps will never need it. If you do, though, most of the techniques we've looked at so far will not cut it. Why not? Instead we need something called sockets.
Think of a socket like a connection between two computers. It stays open as long as you're using it, data flows in both directions, and data sent on one end shows up on the other end in real-time, or as close to it as the network can manage. How is this different from what we've seen so far?
socket.io is a node library that, in their own words:
enables real-time bidirectional event-based communication.
To break that down:
- real-time like we said, sockets create the illusion of immediate communication
- bidirectional data flows in both directions
- event-based somewhat unique to
socket.io, communication is based on sending and receiving events
socket.io events have:
- names every event has a name (a string) that identifies it
You send an event with
socket.emit. This will make the computer on the other end receive the event. You pass into the function the name of the event and the data you want to send.
You receive events with
socket.on. This event would have been triggered by
socket.emit on the other side of the connection. You pass into the function the name of the event to react to and a callback function to run whenever an event with a matching name is received. Your callback receives the event's data as a parameter.
Code Along (20 minutes)
In pairs, code along with me to build a basic two person chat app. It will use
alert to display messages from the other use.
Lab: The DOM (15 minutes)
Modify your chat app to manipulate the DOM and build up a log of chat messages instead of using
Lab: User Names (20 minutes)
Modify your chat app so that users can request their own user names. Display these user names in the DOM when that user sends messages.
Lab: "Typing..." (20 minutes)
Modify your chat app to display "typing..." when another user is typing, like Slack does.
Lab: Direct Messages (30 minutes)
Modify your chat app so that if a user's message starts with
@name then that message will only be sent to the user who's username is