Understating the Udacity Offline First Project Wittr : Part 3(WebScokets!!!)

Lets Start…

What are Web Sockets

WS allows real-time interactive communication between a client and a server. It uses a different protocol that allows bidirectional data flow, making it unique against HTTP.
Consider it like the cool brother of HTTP.
To understand WS , here’s a small intro to HTTP and WS both.

HTTP/HTTPS

HTTP

Basically everything is HTTP/HTTPS(secure) for a simple application, though there are some fancy protocols available 99% use HTTP/ HTTPS . Following are some request methods of HTTP-

GET
POST
PUT
DELETE

Web Sockets

Have you ever played a game? DOTA 2 ? CS:GO ? Ever thought how they transfer so much data like player positions and scores so fast ?
Well they don’t use HTTP, If you’ve seen the HTTP diagram one can discern some inefficiency , the NOW NOW NOW .
Does this seems like a good use of resources?I think not , lets look at the Web Socket approach.

Hmmm…

Think that proves the point , following are some places where Web Sockets are useful -

• Real-time Apps
• Chat Apps
• IoT (internet of things)
• Online multiplayer games

Now that we are convinced that Web sockets are better in most case why not use them everywhere , well… when designing an application /software we want to use the simplest option available and REST-API frameworks are the simplest ones and they are mostly built on top of HTTP-like protocols.
Finally lets look at how Wittr works with Web Sockets.

Why does Wittr Uses WebSockets?

Lets look at a typical Wittr screen…

See the WebSocket in Type column?

Well all these messages comes from generateMessage.js , it uses Markov library to generate random messages, using the following code..

Well how does the messages seem to appear randomly you ask ,well here’s the code ,you’ll find it bear line 145 of server.js,

How about we inspect how this message looks like..

The first request , one thing to note “ws://localhost….. ”,yep this shows its a web socket request, let’s wait for a few second for another ws response and log it while we’re at it , for that we would go to js/main/indexContorller.js

Member when we looked at the response?

Then how does the client get this?Well here’s how…

From now on I hope it’s easy to understand the Sockets thing in the project.

That’s all folks .Have a nice one.
WebSocket Reference