Javascript

Angular HTTPClient ReplaySubject example without query parameters

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { MyType } from './my-type';

@Injectable()
export class MyService {
  baseURL = "http://localhost:18674";

  // Replay subject: New subscribers will get previous values
  public nodes = new ReplaySubject<MyType>();

  constructor(private http: HttpClient) {
    // Currently only acquire nodes once
    this.http.get<MyType>(`${this.baseURL}/api/myapi`).subscribe(value => 
      this.values.next(value);
    });
  }
}

 

Posted by Uli Köhler in Angular, Javascript, Typescript

NodeJS MQTT minimal subscribe example with JSON messages

const mqtt = require('mqtt')
const client = mqtt.connect('mqtt://user:[email protected]')

client.on('connect', () => {
  client.subscribe('mytopic');
})

client.on('message', (topic, message) => {
  console.log(topic, JSON.parse(message))
})

If required, you can install the mqtt library using

npm i --save mqtt

 

Posted by Uli Köhler in Javascript, MQTT, NodeJS

How to compute SHA hash of local file in Javascript using SubtleCrypto API

The following example uses the SubtleCrypto API to compute the SHA-256 hash of a file that is selected in a file input. The checksum is computed entirely on the client side, the file does not need to be uploaded to a server at all.

This code has been verified to generate the same checksum as if running sha256sum on the command line.

Full example

You can download this file, save it as index.html and open it in the browser. Then select a file and check the develper

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />

    <script src="https://unpkg.com/[email protected]/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            var filename = fileInput.files[0].name;
            // var filesize = fileInput.files[0].size;
            var reader = new FileReader();
            reader.onload = function(ev) {
                console.log("File", filename, ":");
                // 
                crypto.subtle.digest('SHA-256', ev.target.result).then(hashBuffer => {
                    // Convert hex to hash, see https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
                    const hashArray = Array.from(new Uint8Array(hashBuffer));
                    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
                    console.log(hashHex);
                }).catch(ex => console.error(ex));
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>
Posted by Uli Köhler in Javascript

How to get page HTML source code in Puppeteer

In order to get the current page HTML source code (i.e. not the source code received from the server, but the currently loaded source code including Javascript modifications), use

await page.content()

Full example based on Puppeteer minimal example:

// Minimal puppeteer get page HTML source code example
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://techoverflow.net', {waitUntil: 'domcontentloaded'});
  // Wait for 5 seconds
  console.log(await page.content());
  // Take screenshot
  await browser.close();
})();

 

Posted by Uli Köhler in Javascript, NodeJS, Puppeteer

How to sleep for X seconds in Puppeteer

In order to sleep for 5 seconds, use

await page.waitForTimeout(5000);

Full example based on Puppeteer minimal example:

// Minimal puppeteer example
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://techoverflow.net', {waitUntil: 'domcontentloaded'});
  // Wait for 5 seconds
  await page.waitForTimeout(5000);
  // Take screenshot
  await page.screenshot({path: 'screenshot.png'});
  await browser.close();
})();

 

Posted by Uli Köhler in Javascript, NodeJS, Puppeteer

How to install NodeJS 16.x LTS on Ubuntu in 1 minute

Run these shell commands on your Ubuntu computer to install NodeJS 14.x:

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

Instead of setup_16.x you can also choose other versions like setup_14.x. However, using this method, you can’t install multiple versions of NodeJS in parallel.

Source: Official nodesource documentation

Posted by Uli Köhler in Linux, NodeJS

How to identify the latest npm package version

You can use

npm info [package name] version | head -n1

to print just the latest package version, for example:

npm info @angular/cli version | head -n1

The head -n1 part is neccessary to suppress unwanted npm info messages. Just running the command without head -n1 :

npm info @angular/cli version

prints the following output:

12.2.6
npm notice 
npm notice New minor version of npm available! 7.21.1 -> 7.24.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.24.0
npm notice Run npm install -g [email protected] to update!
npm notice

I typically use the node:latest docker container instead of a local npm to find the latest version of an npm package:

docker run -it --rm node:latest npm info meshcommander version | head -n1

At the time of writing this article, the command prints

0.9.0-d

 

Posted by Uli Köhler in NodeJS

How to get size of compressed file using JSZip

In JSZip, you can get the file size of a file compressed inside a ZIP archive by first decompressing it using zip.file(...).async(...) into an ArrayBuffer and then using .byteLength to get the size of the buffer.

zip.file("filename.txt").async("ArrayBuffer").then(function(data) {
    var fileSize = data.byteLength;
    // TODO Your code goes here
})

Full example

This is based on our post on How to uncompress file inside ZIP archive using HTML5 & JSZip which reads a local file using a HTML5 file input. This example prints the file size of every file inside the ZIP archive:

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />

    <script src="https://unpkg.com/[email protected]/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            var filename = fileInput.files[0].name;
            var reader = new FileReader();
            reader.onload = function(ev) {
                JSZip.loadAsync(ev.target.result).then(function(zip) {
                    zip.file("word/document.xml").async("ArrayBuffer").then(function(data) {
                        console.log("word/document.xml is", data.byteLength, "bytes long");
                    })
                }).catch(function(err) {
                    console.error("Failed to open", filename, " as ZIP file:", err);
                })
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>

Example output

word/document.xml is 88369 bytes long

 

Posted by Uli Köhler in Javascript

How to list files inside a ZIP archive using JSZip

In JSZip, you can list files inside a ZIP archive using zip.fileswhich is an Object with key = filename and value = file metadata object.

JSZip.loadAsync(fileContent).then(function(zip) {
    for(let [filename, file] of Object.entries(zip.files)) {
        // TODO Your code goes here
        console.log(filename);
    }
}).catch(function(err) {
    console.error("Failed to open", filename, " as ZIP file:", err);
})

Full example

This is based on our post on How to read local ZIP in HTML5/Javascript using JSZip

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />

    <script src="https://unpkg.com/[email protected]/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            var filename = fileInput.files[0].name;
            // var filesize = fileInput.files[0].size;
            var reader = new FileReader();
            reader.onload = function(ev) {
                JSZip.loadAsync(ev.target.result).then(function(zip) {
                    console.log(zip)
                }).catch(function(err) {
                    console.error("Failed to open", filename, " as ZIP file");
                })
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>

 

 

Posted by Uli Köhler in Javascript

How to read a file inside a ZIP archive as string using JSZip

Want to read as an ArrayBuffer instead? Read How to read a file inside a ZIP archive as ArrayBuffer using JSZip

In JSZip, you can read a compressed file as JavaScript string using

zip.file("filename.txt").async("string").then(function(data) {
    // data is a string
    // TODO your code goes here, this is just an example
    console.log(data);
})

Full example

This is based on our post on How to uncompress file inside ZIP archive using HTML5 & JSZip which reads a local file using a HTML5 file input. You can upload any .docx file for testing:

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />

    <script src="https://unpkg.com/[email protected]/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            var filename = fileInput.files[0].name;
            var reader = new FileReader();
            reader.onload = function(ev) {
                JSZip.loadAsync(ev.target.result).then(function(zip) {
                    zip.file("word/document.xml").async("string").then(function(data) {
                        // data is a string
                        // TODO Your code goes here!
                        console.log(data)
                    })
                }).catch(function(err) {
                    console.error("Failed to open", filename, " as ZIP file:", err);
                })
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>

 

Posted by Uli Köhler in Javascript

How to read a file inside a ZIP archive as ArrayBuffer using JSZip

Want to read as a string instead? Read How to read a file inside a ZIP archive as string using JSZip

In JSZip, you can read a compressed file as ArrayBuffer using

zip.file("filename.txt").async("ArrayBuffer").then(function(data) {
    // data is an ArrayBuffer
    // TODO your code goes here
})

Full example

This is based on our post on How to uncompress file inside ZIP archive using HTML5 & JSZip which reads a local file using a HTML5 file input:

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />

    <script src="https://unpkg.com/[email protected]/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            var filename = fileInput.files[0].name;
            var reader = new FileReader();
            reader.onload = function(ev) {
                JSZip.loadAsync(ev.target.result).then(function(zip) {
                    zip.file("word/document.xml").async("ArrayBuffer").then(function(data) {
                        // data is an ArrayBuffer
                        // TODO Your code goes here!
                    })
                }).catch(function(err) {
                    console.error("Failed to open", filename, " as ZIP file:", err);
                })
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>

 

Posted by Uli Köhler in Javascript

How to uncompress file inside ZIP archive using HTML5 & JSZip

In our previous post How to read local ZIP in HTML5/Javascript using JSZip we provided an example of how to use JSZip to list files inside a local ZIP archive using HTML5.

This post will expand upon this in order to read the content of a file compressed inside a local ZIP archive file.

In this example, we’ll read a local ZIP file using HTML5 <input type="file"> and uncompress its content. We’ll read the word/document.xml file, so you can upload any .docx file to test that.

JSZip.loadAsync(ev.target.result).then(function(zip) {
    zip.file("word/document.xml").async("ArrayBuffer").then(function(data) {
        // data is an ArrayBuffer
        // TODO Your code goes here!
    })
}).catch(function(err) {
    console.error("Failed to open", filename, " as ZIP file:", err);
})

Full example

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />

    <script src="https://unpkg.com/[email protected]/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            var filename = fileInput.files[0].name;
            var reader = new FileReader();
            reader.onload = function(ev) {
                JSZip.loadAsync(ev.target.result).then(function(zip) {
                    zip.file("word/document.xml").async("ArrayBuffer").then(function(data) {
                        // data is an ArrayBuffer
                        // TODO Your code goes here!
                    })
                }).catch(function(err) {
                    console.error("Failed to open", filename, " as ZIP file:", err);
                })
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>

 

 

Posted by Uli Köhler in HTML, Javascript

How to include JSZip in the browser

The JSZip documentation doesn’t make it entirely clear how to include it in the browser, i.e. which <script> tag you need to use in order to load JSZip.

Here’s the appropriate <script> tag:

<script src="https://unpkg.com/[email protected]/dist/jszip.min.js" type="text/javascript"></script>

You can also use the non-minified version which does not have minified class and object names:

<script src="https://unpkg.com/[email protected]/dist/jszip.js" type="text/javascript"></script>

 

Posted by Uli Köhler in HTML, Javascript

How to read local ZIP in HTML5/Javascript using JSZip

In our previous post How to load local file in Javascript using HTML5 FileReader we showed how to read a local file using the HTML5 FileReader.

Based on this, it’s pretty easy to use JSZip to read a local ZIP file:

var reader = new FileReader();
reader.onload = function(ev) {
    JSZip.loadAsync(ev.target.result).then(function(zip) {
        // TODO Your code goes here. This is just an example.
        console.log(zip)
    }).catch(function(err) {
        console.error("Failed to open", filename, " as ZIP file:", err);
    })
};
reader.onerror = function(err) {
    console.error("Failed to read file", err);
}
reader.readAsArrayBuffer(fileInput.files[0]);

One example of what you can do using the JSZip object is to list the filenames inside the ZIP file:

var filename = fileInput.files[0].name;
var reader = new FileReader();
reader.onload = function(ev) {
    JSZip.loadAsync(ev.target.result).then(function(zip) {
        for(let [filename, file] of Object.entries(zip.files)) {
            console.log(filename);
        }
    }).catch(function(err) {
        console.error("Failed to open", filename, " as ZIP file:", err);
    })
};
reader.onerror = function(err) {
    console.error("Failed to read file", err);
}
reader.readAsArrayBuffer(fileInput.files[0]);

Full example

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />

    <script src="https://unpkg.com/[email protected]/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            var filename = fileInput.files[0].name;
            // var filesize = fileInput.files[0].size;
            var reader = new FileReader();
            reader.onload = function(ev) {
                JSZip.loadAsync(ev.target.result).then(function(zip) {
                    console.log(zip)
                }).catch(function(err) {
                    console.error("Failed to open", filename, " as ZIP file");
                })
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>

 

Posted by Uli Köhler in HTML, Javascript

How to load local file in Javascript using HTML5 FileReader

In HTML5, you can not only upload a file to a server but also process it directly in the browser using Javascript.

This post provides minimal examples of how to use FileReader to do that.

How to read a text file

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            // Example of what information you can read
            // var filename = fileInput.files[0].name;
            // var filesize = fileInput.files[0].size;
            var reader = new FileReader();
            reader.onload = function(ev) {
                var content = ev.target.result; // content is a string
                console.log("Successfully read file");
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsText(fileInput.files[0]);
        }
    </script>
</body>
</html>

How to read a binary file as ArrayBuffer

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            // Example of what information you can read
            // var filename = fileInput.files[0].name;
            // var filesize = fileInput.files[0].size;
            var reader = new FileReader();
            reader.onload = function(ev) {
                var content = ev.target.result; // content is an ArrayBuffer object
                console.log("Successfully read file");
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>

 

Posted by Uli Köhler in HTML, Javascript

Minimal leaflet.js example with Stamen terrain tiles

This minimal self-contained HTML example can serve as a good starting point for your own leaflet application. Using Stamen Terrain tiles not only provides a nice view of the physical geography but has the added advantage of not requiring any API key.

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
        <script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script>
        <style>
            #mymap { height: 100%; }
        </style>
    </head>
    <body>
        <div id="mymap"></div>
        <script type="text/javascript">
            var layer = new L.StamenTileLayer("terrain");
            var map = new L.Map("mymap", {
                /* Center: Munich, Germany */
                center: new L.LatLng(48.1, 11.5),
                /* Show most of western Europe */
                zoom: 6
            });
            map.addLayer(layer);
        </script>
    </body>
</html>

Look and feel of the example:

Posted by Uli Köhler in HTML, Javascript, Leaflet

Best practice Angular 11 production build command

This is the command I use to make production builds of Angular 11+ webapps:
ng build --prod --aot --build-optimizer --common-chunk --vendor-chunk --named-chunks

 

While it will consume quite some CPU and RAM during the build, it will produce a highly efficient compiled output.

Posted by Uli Köhler in Angular, Javascript

How to use child_process.exec in Koa (async/await)

First install the child-process-promise library

npm i --save child-process-promise

Then you can use it like this:

const router = require('koa-router')();
const {exec} = require('child-process-promise');

router.get('/test', async ctx => {
  const [stdout, stderr] = await exec('python myscript.py')
  const ipv6 = stdout.toString();
  ctx.body = ipv6;
});

 

Posted by Uli Köhler in Javascript