Mastering Real-Time Communication with Angular: A Guide to Web Socket Connections

A state-full communication protocol called Web Socket allows a client and server to maintain a connection over time. A user can send messages to a server and receive event-driven responses, all without the need for time-consuming polling.

A single TCP/IP socket connection makes bidirectional, full-duplex communications over HTTP possible when using Web Sockets. It connects to the same TCP port via “ws://” or “wss://”.

To create a Web Socket connection, the client sends the server a Web Socket handshake request, just an ordinary HTTP request with an Upgrade header added to let the server know that the client is attempting to create a Web Socket connection. The server then responds with a Web Socket handshake.

Accepting the handshake request, the server establishes a Web Socket connection using the same TCP/IP protocol if it is protocol compliant. Every client that has established a web socket connection with the server has their connection maintained open. This makes it possible for data to be requested in real-time and sent from the server to the client. Data exchange is now possible between the two parties until the connection is severed.

Angular Chat Application

Step 1

Use the angular cli command below to generate an angular application. By doing this, a new Angular application will be created, and all of the application’s building blocks will have the prefix added by the prefix attribute.

Step 2

The command below will install the most recent version of the Bootstrap library into our application. Install Bootstrap from npm.

The command below will install the most recent version of the Bootstrap library into our application. Install Bootstrap from npm.

Apps[0] should now have Bootstrap CSS added.style array:

Step 3

Using the command below, let’s create a new component called chat and add it to the app component.

To begin adding ngmodel to the form elements of the chat.component.html, create a basic chat user interface and add FormsModule to the app.module.ts file, as indicated below:

chat.component.css

Step 4

Next, let’s add our web socket service to the chat app by creating a service file.

Make a websocket.service.ts file.

The WebsocketChat model will now be added to the service, and all messages from the other clients and the backend will be stored there.

By providing the URL to the WebSocket object’s constructor in the openWebsocketConnection() method, we will establish the web socket.

After that, our web socket will have three event handlers:

onopen: This event is set off whenever the web socket is created, allowing us to manage the web socket’s onopen functionality.

onmessage: This is the crucial piece of code where we receive messages from the web socket. It is triggered whenever a message is sent from the web socket to the client.

onclose: This event is triggered whenever the web socket closes, allowing us to handle the web socket’s onclose functionality.

sendMessage(): This function transfers data between the web socket server and the client. We make use of the WebSocket object’s send() method.

closeWebsocketConnection(): This function calls the WebSocket object’s close method to terminate the active web socket connection.

Related read: Build A Multi-User Chat Application Using Websockets

Step 5

chat.components.ts: Returning now to the chat.components.ts file, we must inject the WebSocket service and then call the ngOnInit and ngOnDestroy life cycle hooks’ openWebsocketConnection() and closeWebsocketConnection() methods to open and close the Web Socket, respectively.

The message will then be sent from the client to the server via a web socket using the sendMessage() method. To assign the data, we pass the user and message data from the form to the WebsocketChat constructor.

The message is then sent by sending the same to the WebSocket Services sendWebSocketMessage() function. Additionally, we delete the message to prepare the form for the subsequent message.

Step 6

Make changes to chat.component.html: We now iterate the list using the websocketMessage array from the service to render the message in the view.

Let’s now use the following command to serve the application:

To run the application from two separate browser windows and have two distinct clients up and running, repeat the process for two separate instances. As a result, two clients will be linked to the same web socket URL.

Now that the application is configured, we can use the web socket to send chat messages in real time.

Benefits of Web Socket for Chat Application Use

Constant Communication Between the Client and the Server: Allows for the sending of data to the client whenever it is needed, even in the absence of a request.

Full Duplex Communication: Throughout the connection, messages can be sent in either direction at any moment.

Extremely Low Latency: Data transfers happen far more quickly because there is less HTTP overhead (such as headers, cookies, etc.).