This document discusses WebSocket protocol and compares it to HTTP. It explains how WebSocket works, how to implement simple WebSocket clients, and how to build WebSocket clients using RxJS services. WebSocket allows for full-duplex communication over a single TCP connection, making it suitable for applications requiring real-time data exchange like chat, games, or live updates. The document provides code examples of creating a WebSocket service and subscribing to messages from the server. It also demonstrates an auction app using WebSockets.

1. 16 May 2018 | Rahul Rai | Consultant Cloud Technologies
https://rahulrai.in

2. 01 What is WebSocket Protocol?
02 HTTP vs. WebSocket
03 WebSocket Internals
04 Implementing Simple WebSocket Clients
05 Building WebSocket Clients using RxJS Services
06 Summary

3. What is WebSocket Protocol?
Full-Duplex binary protocol for client server interaction
Low-overhead binary protocol compatible with most browsers.
Stream text and binary data between browser and server.
CS real-time data push mechanism makes it suitable for:
• Live trading/auctions/sports notifications
• Controlling medical equipment over the web
• Chat applications
• Multiplayer online games
• Real-time updates in social streams

4. HTTP vs. WebSocket
Client sends a request and waits a response.
CS use the same browser-server connection.
Half-Duplex communication.
Adds several HTTP headers to reqres.
HTTP
Data travels in both directions simultaneously.
CS use the same connection. Connection is kept alive.
Full-Duplex communication. Low latency.
Sends and receives only the necessary information.
WebSocket

5. HTTP/2 vs. WebSocket
HTTP/2 is more efficient than HTTP and is well supported.
Allows data push from servers.
WebSocket API is for transmitting data. HTTP/2 is for pushing static resources to client

6. How WebSocket Works

7. Implementation
External client will connect to our server and send a web socket request.
We will see protocol upgrade and request and data sent and received by the client
using WS.
Do not try this at work (in enterprise apps)

8. Demo
Push Data from Server to Plain Client

9. Implementing Simple WebSocket Client
Best practice to wrap server interaction into Injectable services.
Two approaches to handling WebSocket messages in Angular.
• Manually create service producing Observable Stream from WS connection.
• Use services provided by RxJS.

10. Implementing Simple WebSocket Client
WebSocket Service: https://gist.github.com/rahulrai-in/d36c220966da4da5861ee2e500d301cc
AppComponent: https://gist.github.com/rahulrai-in/2dce3dde9e3eb59c1add6db104b8c648
Quirks
Browsers don’t implement single origin policy on WS connections. Different servers have different security
measures applied for WS.
WebSockets can send arbitrary formatted data to server because frames don’t have metadata (like HTTP
headers). A client can announce the subprotocol that it will use. Server can modify its behaviour accordingly.
STOMP is a popular choice.
const ws = new WebSocket('ws://localhost:8085’, [‘Employee’]);

11. WebSocket Client Using RxJS Services
RxJS contains an implementation of the WS service based on Subject.
A Subject is both an observer (receiver) and an observable (emitter).
The RxJS WebSocketSubject is a wrapper around the standard browser’s WebSocket object.
Lifecycle
1. Create WebSocketSubject with WS endpoint and configurations.
2. Subscriber to WebSocketSubject either creates a new connection or reuses the existing one.
3. Unsubscribing to WebSocketSubject closes the connection if there are no other subscribers attached
to it.

12. Demo
Auction App

13. Summary
WebSockets offers unique features that are not available with HTTP which makes it suitable for certain use cases.
Both Client and Server can initiate communication.
WebSockets do not follow the request-response model.
There are two approaches to creating a WebSocket service.
1. Use an Angular service that converts WebSocket events to observable stream.
2. Use RxJS WebSockets Subject based implementation: WebSocketSubject

14. Thank you | readify.net