WebSockets Tag

Using Redux middleware for polling

In the frontend development world, we oftentimes need to have up-to-date data on the client. And to achieve that there are several options at our disposal:

1. WebSockets (WS);
2. Server-Sent Events (SSE);
3. Polling (Short/Long).

While the first to are preferred, polling still is an important tool especially in situations when our backend can’t provide us with WS or SSE. And in this article, we will be reviewing how to use polling with arguably the most widely-used state manager in the JavaScript realm – Redux.

First things first – what polling is and how it’s done

There are two basic types of polling – Short and Long. For the sake of simplicity, we will be reviewing only Short polling. It’s the easiest one to implement – all it does – sends requests from the client-side to the server at a certain fixed interval. For example, let’s say we have a small website that shows the current weather in a selected region. And to keep the client up-to-date we can use the Short polling technique, that is, send client-to-server requests (for weather data) every 30 seconds. And, therefore, approximately (time between responses might differ) every 30 seconds we will be getting new weather data.

Now, let’s see how we can implement polling in React & Redux application. In our examples, we’ll continue working on the weather application and see how it can be realized using different techniques.

Setting the interval on the component mount

The most naive implementation would be by using the “setInterval” function in the “componentDidMount” method (or the “useEffect” hook).

In this implementation, we’re creating the “updateInterval” variable that points to an actual interval function after it’s being initialized in the “componentDidMount” life cycle method. The interval dispatches the “getWeatherData” redux-action every 30 seconds and does so continually while the component is mounted.

class WeatherApp extends Rect.Component {
  updateInterval;
  
  componentDidMount() {
    this.updateInterval = setInterval(() => {
      this.props.getWeatherData();
    }, 1000 * 30); // 30 seconds
  }
  
  componentWillUnmount() {
    clearInterval(updateInterval);
  }

  render() {
    return (
      <div>
        {this.props.weatherData}
      </div>
    );
  }
}

The biggest downside of this approach is that business logic (pulling data) is tight to the view. The other problem is that the “setInterval” function doesn’t wait till the previous action call (from the “setInterval” body) is completed. Therefore, this version can be improved by using the “setTimeout” function, with the help of which we can start each next cycle only when the previous one is completed. Thus, we won’t accidentally run into a situation where we have two (or even more) calls simultaneously (might happen in the case with “setInterval” on when we have small delays between cycles).

Here is our improved version with the use of the “setTimeout” function.

class WeatherApp extends React.Component {
  updateTimeout;
  
  componentDidMount() {
    this.getWeatherData();
  }
  
  getWeatherData = async () => {
    await this.props.getWeatherData();

    this.updateTimeout = setTimeout(this.getWeatherData, 30 * 1000);
  }
  
  componentWillUnmount() {
    clearTimeout(updateTimeout);
  }

  render() {
    return (
      <div>
        {this.props.weatherData}
      </div>
    );
  }
}

We would like to point out that it’s not an actual code from production, just an example. And there is a good chance that async/await won’t be a viable option because the “getWeatherData” function most likely won’t be an asynchronous function – in such instances, we can use callbacks.

Nevertheless, even this improved version is still not good enough because we didn’t resolve the main problem – a tight connection between business logic and the presentation layer. And one of the drawbacks of previous solutions is that the update logic is defined in components thus making it hardly reusable.

Creating custom actions

By creating a custom action that will encapsulate all the “update by timeout” logic in action’s body – we can address the reusability drawback mentioned earlier and untight the connection between layers.

export const initActions = async dispatch => {
  let updateTimeout;
  
  getWeatherDataTimedout = async () => {
    await dispatch(getWeatherData());

    updateTimeout = setTimeout(getWeatherDataTimedout, 30 * 1000);
  }
  
  /** Initialize any other actions */
  
  getWeatherDataTimedout();
}

class WeatherApp extends React.Component {
  componentDidMount() {
    this.props.initActions();
  }
  
  render() {
    return (
      <div>
        {this.props.weatherData}
      </div>
    );
  }
}

Again, it’s a simplified version. And the “initActions” function can be easily extended by adding custom parameters that can be passed from containers and by adding more actions that can be dispatched in the action’s body.

But we should look for another approach if we want to unentangle the “update by timeout” logic from the View as much as possible.

Middleware

One of the ways to achieve that level of disentanglement is to use Redux middlewares.

The concept is quite straightforward – middleware is some sort of a middleman between dispatching actions and actual execution of those same actions in the reducer.

With all that in mind, we can create a middleware for the “getWeatherData”:

const getWeatherDataTimedout = async dispatch => {
  await getWeatherData()(dispatch);

  setTimeout(() => updateMessages(dispatch), 30 * 1000);
};

const getWeatherDataMiddleware = ({ dispatch }) => next => {
  getWeatherDataTimedout(dispatch);

  return action => next(action);
};

But just creating middleware is not enough, it should be “registered” at the global store. To do so we can use the “compose” function inside of the “createStore” as follows:

const store = createStore(
  rootReducer,
  compose(applyMiddleware(/** other middlewares */, getWeatherDataMiddleware))
);

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com

Socket.io – easy way to handle WebSockets

The era of static websites has passed. Now users demand dynamic content and application like look and feel. Instead of constantly reloading the page and hitting F5, the page should adjust itself automatically. Many of this can be accomplished with simple asynchronous requests from javascript. But what if you want to update your app only when there is a new data available on the server?

You could send a ton of requests in a loop but that’ll use a lot of bandwidth and with more users could potentially DDoS your server or make it very slow. Web technologies are constantly evolving so it’s not exceptional that we have a solution for this problem. It’s called WebSockets.

Websockets allows us to establish a stateful connection between browser and server so we can exchange pieces of information in both directions. It’s more efficient than standard request and response cycle from HTTP.

Unfortunately, WebSockets are handled differently on different browsers so it’s not easy to implement the cross-browser code. And how about older browsers that don’t support WebSockets? We need some kind of wrapper that will work on different browsers and fallback to polling techniques on older ones. Socket.io does exactly that and also provides nice API and many additional features like broadcasting.

Installation

Socket.io is split into two components client and server libraries. Both written in javascript. I assume that you have nodejs and npm installed. If not just follow instructions on the internet.

Create a directory for server code and run npm init to create package.json file for the project. Next, add the socket.io library to your project by running

npm install --save socket.io

We’ll also need express library to make things simple. Installation is as simple as typing

npm install --save express

Echo server

Let’s start with something simple.

I think echo server should be enough to demonstrate how easy it is to use socket.io, you can easily extend this example to something more complex.

Create a file called server.js and paste this code.

var http = require('http')
var express = require('express')
var socketio = require('socket.io')
var app = express(server)
var server = http.Server(app)
var io = socketio(server)

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html')
});

io.on('connection', function(socket){
  socket.on('echo', function(data){
    socket.emit('echo', data);
  });
});

server.listen(8080); 

server.js

On first three lines, we require libraries that we are going to use. Next, we create HTTP server and express application to be able to define routes easily. You can find more about express framework on its website https://expressjs.com/ . Also, we need to create an instantiate socket.io and assign it to the server to allow WebSocket communication.

In the next line, we are using express to define root route (‘/’) to return the content of index.html file. We will store our client code there just to make things really simple. After that, we use previously created io object to listen on connection event. Every time someone connects to the server via socket.io it’ll trigger the callback function. Inside connection callback, we have access to a socket that is connected to the client. From here we can emit events or listen to them.

Let’s listen to echo event and resend the same payload by emitting echo event to the client. Note that the name echo is our custom event’s name. We don’t need to declare it anywhere so that’s convenient. The last line actually starts the server to listen on port 8080.

Client code

Create index.html file in project’s root directory and paste the following code.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Echo server</title>
<script src="socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
socket.on('echo', function(data){
console.log(data);
});
socket.emit('echo', 'this is a message');
</script>
</head>
<body>
</body>
</html>

The first thing you want to do is to include socket.io library. The file will be served from nodejs server so you can access it. We are adding javascript inside HTML just to make this really simple but you shouldn’t do that in production code.

Inside the code we are creating a connection to the socket.io server by calling io() function. Next, we are emitting echo event with test as a payload. Now just start the server with nodejs server.js and connect to it by accessing 0.0.0.0:8080 from your browser. You should see the this is a message message in the console immediately.

Conclusion

I think that the most important skill for a software developer is to quickly adapt to new technologies and to always pick the right tool for the task.

Socket.io is really nice and simple. It allows us to easily consume WebSockets in any application. It’s great to have it in the toolbox.