Realtime Communication for Everyone!
Clone or download
Pull request Compare This branch is 11 commits ahead of wdi-nyc-delorean:master.
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-solution
README.md

README.md

---
title: Sockets
type: lesson
duration: "2:00"
creator:
    name: Ramsey Nasser
    modified: "Taka" Jonathan Ahrens
    city: NY
    parent: https://git.generalassemb.ly/wdi-nyc-delorean/LECTURE_U02_D08_SOCKET_IO
---

⚡️🔌 Sockets 🔌⚡️

Realtime Communication for Everyone!

Lesson Objectives
Understand Websockets
Websockets VS HTTP requests
Use Socket.io to send and recieve messages with Sockets

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.

MDN 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 (30 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.

  • create chat/ directory
  • touch server.js
  • npm init
  • start and dev script
  • npm i -S express socket.io
  • start server
  • Create public/ and index.html
  • create socket instance
  • create connection message
  • Create HTML page
    • require socket
    • create instance of socket
    • text area
    • button with event listener to click

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

  • create a <ul> that can catch all the messages
  • make your listening call create a new <li> element and append it to the <ul> container
  • add nifty nth child styling rule to differentiate chat messages

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.

  • add another input bar ontop of message bar
  • make form submission listener go pick up both values (usernam, text) and insert them into an object
  • adapt listener function to render messages with new format
{
    username: unameInput.value,
    message: textInput.value
}

Lab: "Typing..." (30 minutes)

Modify your chat app to display "typing..." when another user is typing, like Slack does.

  • add keyup event listener to the text input
  • put a socket.emit in the call back to that event
  • add a socket listener in the server that broadcasts back to everyone the typing message
  • add a socket listener on the client JS where we listen for a typing event
    • the callback function triggers a setTimeout and saves the ID.

Bonus: Direct Messages

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.