Realtime Communication for Everyone!
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
chat
README.md

README.md

⚡️🔌 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:

  1. How is this different from other web apps we've built so far?
  2. What kind of data is my laptop sending? Receiving?
  3. How often is data being sent? Received?
  4. How do you think this works?

Check out the example for five minutes, and then we'll discuss for five more minutes.

Sockets

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

socket.io is a node library that, in their own words:

enables real-time bidirectional event-based communication.

To break that down:

  1. real-time like we said, sockets create the illusion of immediate communication
  2. bidirectional data flows in both directions
  3. event-based somewhat unique to socket.io, communication is based on sending and receiving events

Events

socket.io events have:

  1. names every event has a name (a string) that identifies it
  2. data you can associate any JavaScript value with an event that specifies the details of the event. Usually, this is a JavaScript object but it can be whatever you want.

Sending

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.

Receiving

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 alert

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 name.