An Introduction to WebSocket… 30daysofJavaScript ==> Day 29

A WebSocket is an object that provides an API (also known as the WebSocket API) that creates a WebSocket connection to a server, the process involves sending and receiving data as long as the connection is still on. The WebSocket API on the other hand is a piece of advanced technology that allows interaction between a client’s application/web browser and the server over a connection.

Photo by Chirayu Trivedi on Unsplash

var Socket = new WebSocket(url, [protocal] );

To create a WebSocket connection, we need to create new WebSocket using the special protocol ws in the URL, although the protocol wss is preferable because not only s it encrypted but also reliable, you can liken this protocol to the HTTPS:// in comparison to HTTP://. To fully activate WebSockets we have to use listeners and lucky these listeners are not as broad and are only classified into four.

• open – connection established,
• message – data received,
• error – WebSocket error,
• close – connection is closed.

We also have properties like .send() which allows you to send data back and forth. Let us go a step further and create an example on WebSocket.

Here is a more editable version of the code above

let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");
//javascript.info is a reference here and teh example on the site is whatis been used here
socket.onopen = function(event) {
  alert("[open] Connection established");
  alert("Sending to server");
  socket.send("My name is Niniola Olajide, I am a tech writer");
};
socket.onmessage = function(event) {
  alert(`[message] Data received from server: ${event.data}`);
};
socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`Connection closed, code=${event.code} reason=${event.reason}`);
  } else {
    // e.g. server process dterminated or network down
    // event.code is usually 1006 in this case
    alert('[close] Connection died');
  }
};
socket.onerror = function(error) {
  alert(`[error] ${error.message}`);
};

The Difference between WebSocket and HTTP Request

Looking at the example on WebSocket or the results of WebSocket, we can see it is similar to an HTTP request. So what is the difference?

• The major difference between WebSocket and an HTTP request is the corresponding response. In an HTTP request, the connection is terminated immediately after a response has been received but for a WebSocket, the connection is still ongoing even after a request has been received.
• HTTP requests use http:// and https:// while WebSocket uses ws:// and wss:// for as a protocol and secured protocol respectively.

What is this about?

30daysofjavascript is a series of writing on how I learned to code in JavaScript. These episodes are as simplified as possible and for beginners like me, I hope you find JavaScript less confusing throughout this episode. Thank you as always and see you in the next episode. Check out every episode I have written here.