DEV Community

Cover image for Connection Types In Web Apps
Nicholas Mendez
Nicholas Mendez

Posted on

Connection Types In Web Apps

Making Connections

Web apps have come a long way form being static documents that are loaded into the browser. Here's an overview of the different methods modern web apps can use to send and receive data.

XHR/Fetch

Image description

The XMLHttpRequest (XHR) API became standard in 2004 and revolutionized how web apps were build. Before then, presenting new data on a page required an immersion breaking refresh or a redirect.

XHR allowed apps to request data programmatically in the background and then we can manipulate the DOM to present it. This technique of data fetching and updating the page is referred to as Asynchronous JavaScript and XML (AJAX). The fetch API is a newer, promise-based alternative to XHR.

Web Sockets

Image description
Image Credit

The Web Socket API is a very popular API for building real time web apps that provide features like tracking and messaging.

It allows web apps to create a keep open connection to the server and transfer bidirectional messages across the connection. Socket IO is a popular library used for building with web sockets.

Server Sent Events

Image description
Image Credit

Sever Sent Events is an API that allows application servers to send data to the client over an HTTP connection.

This API is different from web sockets in that it is unidirectional. It is simply a means for a server to push updates to a client.

Web RTC

Image description
Image Credit

Web Real-time Connection (RTC) is a standardized API for peer to peer communication. It is available on all major browsers and supports video and voice. Many video calling applications use Web RTC Under the hood.

Push Notifications

Image description
Image Credit

The Push API is a standard web API that facilitates push notifications on the web. It is natively supported on all major browsers except those on the MAC or IOS platform (push notifications can sill be done however using Apple Push).

Push notifications are a neat way to give reminders, updates and alerts to the user to increase engagement once the user has opt-in.

Push notifications are special from the others in that it is the only way for a server to push data to an app that isn't currently open by the user.

You can also have silent data notifications that update your apps in the background.

Web Transport

Web transport is a new specification which serves to be provide a lower latency connection by removing the sequencing delivery that web sockets do. It works on top of HTTP3 to provide and can be used as a client to server alternative to web RTC. It's still very early for web transport (scheduled for release in chrome 97) but it is an exciting development none the less.

Comparison

So which method should you use? Here's a table which summarizes the differences:

Connection Type Transfer Mode Common Usage
XHR/Fetch Client to Server Most dynamic web apps, pull to refresh, gmail, instagram etc
Web Sockets Bi Directional Text messaging applications, broadcasting, real-time applications
Server Sent Events Server to Client Streaming data, tracking, timers
Web RTC Client to Client Screen sharing, video calling apps
Push Notifications Server to Client Notifications, alerts, background updates
Web Transport Bi Directional Low latency, unordered messaging, media streaming, online games

Conclusion

Over the next couple of weeks I shall take a deep dive in each methodology. Which one have you used? Are you looking forward to a specific method?

References

Top comments (0)