Checking web sockets and points with fire camp

Consumer requests these days require real-time information. Consumers prefer to get up-to-date information on their devices instead of polling from time to time. For example, whenever a flight schedule changes, a push notification will be sent to the user’s mobile. Also, a corrupt trading web application keeps updating its UI to reflect the latest developments in the market.

Thanks to technologies like WebSockets, implementing real-time applications has become more accessible to developers.

In this tutorial, we will talk with Node.js about implementing a WebSocket endpoint. Then we will use Firecamp to test it.


What is WebSocket?

WebSocket is a computer communication protocol, providing a complete duplex communication channel over a TCP connection.

Simply put, WebSocket allows client and server applications to achieve three things in particular:

  1. The client application establishes a permanent TCP connection with the server. This is called a handshake.
  2. Once connected, both parties can transfer data at any time. Transmission is real time and in both directions.
  3. Either the client or the server can decide to terminate the connection at will.

Typically, WebSocket clients are web browsers. A good part of modern browsers is the WebSocket API. This makes front-end applications straightforward and standard.

WebSocket differs significantly from traditional HTTP in that it does not close the connection after receiving the data. HTTP is designed as a stateless protocol. But some of the technologies built on top of the HTTP, such as long poll and comet, tried to make it state-owned and still lacked credibility and performance.

Where to use WebSockets

WebSockets is a state protocol. Therefore, it is ideal for creating real-time applications that wait for new information and update themselves.

Some examples include:

  • Chat applications
  • Stock trading consoles
  • Live location tracking on maps
  • Live auction bid
  • Social media applications with notifications

How to build WebSocket applications

The web socket application is made up of front end and back end. The front-end is the user-facing component, while the back-end client is responsible for managing connections, accessing data storage, and writing messages back to the front-end.

Today almost all frontend frameworks for WebSockets come with local support. When it comes to backend, most modern programming languages ​​and frameworks provide SDKs and libraries to incorporate WebSocket functionality. For example, Node.js provides the ws npm module.

This prevents libraries and frameworks developers from writing low-level code to gain WebSocket functionality. Instead, they can better focus on the logic of the application.

A simple Node.js WebSockets server

Let’s say we have a simple Node.js WebSocket server that converts whatever text input it receives and writes it back to clients.

The complete code looks like this:

const WebSocket = require('ws');

const PORT = 8080;
const wss = new WebSocket.Server({ port: PORT });

wss.on('connection', (ws) => {
  const clientId = uuidv4();
  console.log("Connection accepted from client: " + clientId)
  ws.send('Welcome to the toUpper() service!');

  ws.on('message', function message(data) {
    const message = data.toString();
    console.log('received: %s', message);
    ws.send(message.toUpperCase());
  });

  ws.on("close", () => {
    console.log("Websocket client " + ws + " has been disconnected.")
  });
});

//A function to generate a unique client ID
function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

console.log("Websocket server has been started and listening on port " + PORT);

Run the server

To run it, you need to have Node.js installed on your machine. Then clone this GitHub repository to the preferred location.

Go inside the cloned space and type the following command in the terminal to fetch dependencies including ws library.

cd websockets-testing-with-firecamp 

npm install

Start the server with:

node server.js

Checking WebSocket Server with Firecamp

Now that we have an active WebSocket server up and running, the next thing is testing.

How can we find a quick way to test this code without writing to the client? The answer is fire camp.

Firecamp is a GUI client for testing multiple Web API protocols such as WebSockets, SocketIO, GraphQL, and REST. If you create an API backend, you can use Firecamp to initiate immediate tests against the backend, share API requests with fellow developers, and collaborate on projects. Ultimately, Firecamp increases a developer’s productivity by reducing boring but essential tasks.

Step 1: Arrange things

To get started, download and install Firecamp on your local machine. Firecamp gives you several options for installation. You can use a desktop client or browser extension. Either way, the basic functionality will be the same.

Step 2: Connect to the server.

Let’s connect Firecamp to the Node.js server running on port 8080. For this we need to create a WebSocket application.

Start a fire camp and then search. Make a request Dropdown menu on splash page. Select. Web socket As follows.

Location of WebSocket buttons

Picture 02

Alternatively, you can select it by clicking on the tab panel. Web socket.

In the next screen, type. ws://localhost:8080 In the URL bar, click More. Connect Button

Once you click. Connect Button, FireCamp tries to establish a connection with the Node.js WebSocket server that runs on port 8080. This is called handshaking. At this point, you can transfer additional parameters to the server, such as configuration, header, and query parameters, using Connections Tabs as follows.

Set header and query parameters.

Picture 03 – Set header and query parameters.

Moreover, Order The tab allows you to set different configuration settings about the connection. This includes reconnect attempts, protocol versions, maximum payload sizes, and more.

Set specific configurations for the connection.

Picture 04 – Set specific configurations for the connection.

If the handshake is good, you will see a list of log messages on the right hand side of the panel.

The handshake from WebSocket was successful.

Fig. 05 – WebSocket handshake was successful.

Currently, Firecamp has connected to the Node.js server, upgraded it to a WebSocket connection, and is ready to send / receive data from both ends.

Step 3: Send a message to the server and observe the response.

Now that we have an open connection to the WebSocket server, let’s send a message and also review the response output.

To send a message, select. Message Click the tab below the URL bar and select text from the drop-down list as the message format.

Type the message of your choice and click the arrow button to send it. Firecamp will then write the message to WebSocket and eventually send it to the server.

Send a simple text message.

Picture 06 – Send a simple text message.

The server receives the message, converts it into capital letters, and writes it back to the open connection.

When Firecamp receives a response, it will be logged into the right-hand panel as follows:

Message flow from end to end

Picture 07 – Message flow from end to end

You can click on each log entry to see more details.

Step 4: Send and receive JSON messages.

We can now verify that our Node.js WebSocket server works well for text messages. Let’s go one step further and change the code to handle JSON messages instead of text.

All you need to do is change:

ws.on('message', function message(data) {
    const originalMessage = JSON.parse(data);
    console.log('received: %s', originalMessage);

    const ucMessage = originalMessage.message.toUpperCase();
    ws.send(JSON.stringify({"transformed" : ucMessage}));
  });

You can find the modified server code. server-json.js File in the same directory. Pause the existing server and start a new JSON server using:

node server-json.js

Follow the same steps as in Step 2 to connect FireCamp to a new WebSocket server that supports JSON. Once the connection is established, select. Message Tab, and then select. JSON As post type.

Send JSON formatted replies.

Picture 08 – Send JSON formatted messages.

Send a message and observe the JSON formatted response in the log panel.

JSON Answer

Picture 09 JSON Answer

Step 5: Disconnect.

You can continue to send and receive various messages with Firecamp. Finally, you can close the connection by clicking. Connect Button again. Firecamp will tell you the status code and the reason for the shutdown. You can leave them blank for the moment.

Firecamp then disconnects the WebSocket connection from the server and then logs in to the following message:

“1000: General Closure ؛ Connection successfully completed the purpose for which it was created.”

Result

In this post, you Learn how to quickly check WebSocket backend using Firecamp..

Firecamp brings all possible tools for checking and debugging any web sockets and points without having to write any client side code. It provides full GUI support for passing additional headers, feeding with different configuration settings, and checking the response received from the server.

In addition to WebSockets, Firecamp supports other web protocols such as Socket.IO, GraphQL, and REST. To learn more about working with them, you can visit here.

.

Write a Comment