MitrahSoft is an Adobe offcial partner MitrahSoft is Lucee offcial partner & core contributing developer

WebSocket In React/Node And Steps To Resolve EC2 Polling Issue

We're going to cover how to use WebSockets to create real-time web applications with React and Node JS and EC2 Polling issue fix in AWS.

WebSockets

WebSockets enable the server and client to send messages to each other at any time, after a connection is established, without an explicit request by one or the other.

WebSockets convert their HTTP connection to a WebSocket connection. In other words, a WebSocket connection uses HTTP only to do the initial handshake (for authorization and authentication), after which the TCP connection is utilized to send data via its own protocol.

polling
Websocket process

Websocket provide the connection between the client and server. That enable both parties can send messages to each other at any time.

The client make the websocket connection using websocket handshake. websocket handshake is a bridge from HTTP to WebSockets.

The client request an http connection with upgrade header. This header informs to the server the clients want a web socket connection.

Client Request Header

The server establish the connection if the server supports the socket protocol. This connection made by sending upgrade header as response.

Server Response Header
WebSocket in React and NodeJS

Now we will implement websocket connection with React and NodeJS server using Socket.IO.

Server Socket Connection
Installation
Client socket Connection
Installation
npm i socket.io-client -S

Connect socket in specific path

var io = require('socket.io')(http, { path: '/socket.io' });

this.socket = io.connect('http://localhost:8081', { path: '/socket.io' });

This websocket connection working fine with local. Now I like to move it to production. So I've uploaded the server code in AWS Elastic Beanstalk.

The websocket successfully connected in http. But I've faced polling issue in https (SSL port). The web client connects but never upgrades, and just stays in polling mode.

websocket polling

Polling

When there is no proper connection between socket server and client, the socket io client package makes frequent http calls to get data from server instead of websocket protocol.

How to fix the polling issue?

We need to change the proxy header in EC2 to fix this issue. Follow below steps to edit the proxy setting in windows.

  1. Creating a Key Pair Using Amazon EC2. Click here
  2. Added this created key pair in your elasticbeanstalk application configuration.
    key pair config
    add key to EB
  3. Convert the downloaded .pem file to .ppk by Using the below link. Click here
  4. Open putty and select session. Copy the EC2 Public DNS (IPv4) url and paste it in hostname. (EC2 Public DNS (IPv4) url - Open AWS console and select EC2 in services. Open running instances and select your application. Copy the Public DNS in the description block.)
    putty config
  5. Select the created private key file (.ppk) and click open. It opens a putty window.
    putty config2
  6. Give username in putty window.
  7. Edit nginx config using below comments.
  8. Restart the nginx by using sudo service nginx restart.