Also see: 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, message)
})
If required, you can install the mqtt library using
npm i --save mqtt
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.
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>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();
})();
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();
})();
Run these shell commands on your Ubuntu computer to install NodeJS 18.x:
sudo apt -y install curl curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt-get install -y nodejs
Instead of setup_18.x you can also choose other versions like setup_16.x. However, using this method, you can’t install multiple versions of NodeJS in parallel.
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
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
})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>word/document.xml is 88369 bytes long
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);
})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>
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);
})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>
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
})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>
You can get the size of an ArrayBuffer in Javascript using .byteLength:
var buf = new ArrayBuffer(8); buf.byteLength // == 8
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);
})<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>
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>
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]);<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>
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.
<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><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>
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:
When trying to run a command like ng build, e.g. in a CI setup, you see an error message like
sh: ng: not found
Only the machine where you’re running this command, you have not installed the ng command globally.
However, your node_modules folder will have a local installation of @angular/cli.
In order to use it, replace ng by ./node_modules/.bin/ng.
For example, a scripts section of your package.json
"scripts": {
"build": "ng build"
},would be replaced by
"scripts": {
"build": "./node_modules/.bin/ng build"
},Install ng globally on the machine running the command by using
sudo npm i -g @angular/cli
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.
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;
});
When automating workflows using TamperMonkey scripts, you often have a situation where you want to run some function, then set window.location.href and after that page has loaded, run another part of your code. However, since the browser physically reloads the page, the Tampermonkey script is also reloaded – hence, your original function will stop being executed.
Fixing this is easy once you grasp the concept:
window.location.hrefNote that in the TamperMonkey context, this is limited to pages that are included in the @match configuration of the script (otherwise, the script won’t be executed on the new page that is being loaded):
// ==UserScript==
// @name TamperMonkey continuation example
// @namespace http://tampermonkey.net/
// @version 0.1
// @author You
// @match https://techoverflow.net
// @grant none
// ==/UserScript==
(function() {
'use strict';
const continuationKey = "_my_script_continuation_key"; // This sessionstorage key
// Check continuation
const continuationActions = {
"printMsg": onPrintMsg
};
const _continuation = sessionStorage.getItem(continuationKey);
if(_continuation) {
sessionStorage.removeItem(continuationKey);
const action = continuationActions[_continuation]
if(action) {action();}
}
function onPrintMsg() {
console.log("This is run after reloading the page");
}
function onAltQ() {
console.log("Will now reload the page...");
sessionStorage.setItem(continuationKey, "printMsg");
window.location.href = window.location.origin + "/";
}
function onKeydown(evt) {
// Use https://keycode.info/ to get keys
if (evt.altKey && evt.keyCode == 81) {
onAltQ();
}
}
document.addEventListener('keydown', onKeydown, true);
})();