Author: John Au-Yeung

Sometimes, we want to automatically reconnect after it dies with WebSocket and JavaScript

In this article, we’ll look at how to automatically reconnect after it dies with WebSocket and JavaScript.

How to automatically reconnect after it dies with WebSocket and JavaScript?

To automatically reconnect after it dies with WebSocket and JavaScript, we set the WebSocket object’s onclose method to a function that reconnects after a set timeout.

For instance, we write

const connect = () => {
  const ws = new WebSocket("ws://localhost:8080");
  ws.onopen = () => {
    ws.send(
      JSON.stringify({
        //....
      })
    );
  };

  ws.onmessage = (e) => {
    console.log("Message:", e.data);
  };

  ws.onclose = (e) => {
    setTimeout(function () {
      connect();
    }, 1000);
  };

  ws.onerror = (err) => {
    console.error(err.message);
    ws.close();
  };
};

connect();

to create the connect function.

In it, we create a WebSocket object.

We set the onclose property to a function that calls connect in the setTimeout callback after a 1 second delay to reconnect after the connection is closed.

Conclusion

To automatically reconnect after it dies with WebSocket and JavaScript, we set the WebSocket object’s onclose method to a function that reconnects after a set timeout.

Sometimes, we want to clone a function with JavaScript.

In this article, we’ll look at how to clone a function with JavaScript.

How to clone a function with JavaScript?

To clone a function with JavaScript, we can create a new function that calls the original function with the same arguments.

For instance, we write

const oldFunction = (params) => {
  // ...
};

const clonedFunction = (...args) => oldFunction(...args);

to create the oldFunction function.

Then we make a clone of that by defining the clonedFunction function that takes an unlimited number of arguments and calls oldFunction with all the arguments.

We use ... in the parameter to get the arguments into the args array.

And then we use ... in the oldFunction to spread the args array entries as arguments.

Conclusion

To clone a function with JavaScript, we can create a new function that calls the original function with the same arguments.

Sometimes, we want to add image to canvas with JavaScript.

In this article, we’ll look at how to add image to canvas with JavaScript.

How to add image to canvas with JavaScript?

To add image to canvas with JavaScript, we call the canvas context drawImage method.

For instance, we write

const canvas = document.getElementById("viewport");
const context = canvas.getContext("2d");

const baseImage = new Image();
baseImage.src = "img/base.png";
baseImage.onload = () => {
  context.drawImage(baseImage, 0, 0);
};

to select the canvas with getElementById.

And then we get its context with getContext.

Next, we create an Image object and load it by setting its src property to the image URL.

And then we set baseImage.onload to a function that runs when the image is loaded.

In it, we call context.drawImage with baseImage, 0, and 0 to draw the image into the canvas with the image placed at the upper left corner of the canvas.

Conclusion

To add image to canvas with JavaScript, we call the canvas context drawImage method.

Sometimes, we want to escape a JSON string to have it in a URL with JavaScript.

In this article, we’ll look at how to escape a JSON string to have it in a URL with JavaScript.

How to escape a JSON string to have it in a URL with JavaScript?

To escape a JSON string to have it in a URL with JavaScript, we can use the encodeURIComponent function.

For instance, we write

const str = encodeURIComponent(JSON.stringify(obj));

to convert the obj object to a JSON string with JSON.stringify.

Then we call encodeURIComponent with the JSON string to escape it to that it can be in a URL.

Conclusion

To escape a JSON string to have it in a URL with JavaScript, we can use the encodeURIComponent function.

Sometimes, we want to include JavaScript class definition from another file in Node.js.

In this article, we’ll look at how to include JavaScript class definition from another file in Node.js.

How to include JavaScript class definition from another file in Node.js?

To include JavaScript class definition from another file in Node.js, we can export the class and the import it in another module.

For instance, we write

user.js

export default class User {}

to export the User class as a default export.

Then we write

server.js

import User from "./user";

let user = new User();

to import the User class from user.js and then use it.

Conclusion

To include JavaScript class definition from another file in Node.js, we can export the class and the import it in another module.