Skip to content

Latest commit

 

History

History
83 lines (52 loc) · 2.62 KB

08.sockets.md

File metadata and controls

83 lines (52 loc) · 2.62 KB
Raw

Sockets: events based programing

Outline

Objective

  • Setup a simple messenger
  • Connect our client to that messenger
  • building a react messenger

Technologies used

  • Javascript
  • Socket.io
  • Mocha

Design Patterns

  • FRP (Functional Reactive Programing)

What we will do

  • Complete the socket.io getting started guide
  • Re implement the messenger app in socket.io getting started with react
  • Support multiple user logging in

Pre Session

Session

Finish the [getting started for socket.io)[https://socket.io/get-started/chat/]

crete a react app that with a similar interface and connect it to the server

Start adding the extra functionality at the end of the tutorial in your react app

  • Add support for nicknames (assign one randomly)
  • Don’t send the same message to the user that sent it himself. Instead, append the message directly as soon as he presses enter.
  • Add “{user} is typing” functionality
  • add a sidebar Showing who’s online
  • Add private messaging (by selecting the form the users who are in the sidebar)

Assignment

Complete the session to get (10 points)

  • 2 for socket io server
  • 2 for basic react app
  • 4 for additional features

For after easter break (10 points) implement a messaging app using Facebook login

The app has 4 screens in mobile view and one 2 in web (login and everything else).

Login, Public Channels/Rooms, Messages, Users

Login page

The User should be able to login using Facebook (go to Facebook and create an app and support login)

A user's Facebook id, name, profile picture is saved in our server in order to remember him for next time, if he's already saved then his information is retrieved.

After Login the user is sent to the Rooms screen.

The Rooms screen is a list of all Public rooms followed by a divider and a list of private rooms.

  • A user can create a room from this page by typing a name (he is set as the owner of the room)
  • A single Room in this view shows a live count of how many people are currently in the room and how many messages were posted.

The Messages screen shows messages sent by users in the Room

  • The screen shows a list of messages ordered by latest from bottom to top showing only the last 10
  • the user can scroll up to view more.
  • The user can type a message himself in input field at the bottom
  • The Room shows who's typing on top of the input field
  • The Room screen shows the Room's name on top
  • A user's image is shown next to his message

The Online users screen

  • Inside each room in addition to the messages we can view more info about the Room
  • This view shows who has posted in this room and wether they are online or not