Frontend

Enhanced Use Case for single-node Node.js to Cluster Module

Improving single-node performance in Node.js is a common challenge developers face, as Node.js’s single-threaded nature can limit its ability to handle high concurrency or heavy load in some applications. To enhance performance, you can consider a variety of solutions and techniques. Below are some common methods:

Using Multi-process or Multi-threading Techniques

(1) Node.js Cluster Module: The cluster module in Node.js allows for multi-process applications, enabling each CPU core to run a separate Node.js process. This can significantly improve the application’s concurrency performance.

(2) Worker Threads: The built-in Worker Threads in Node.js help you take advantage of multi-core CPUs for parallel computation. You can use Worker Threads to handle long-running computational tasks without blocking the main thread, thereby enhancing concurrency handling.

(3) PM2 for Monitoring and Multi-process Management: Using PM2 to configure multi-process mode for starting and managing Node.js processes can improve the application’s stability and resilience. PM2 automatically handles process restarts, load balancing, and other settings, making it easier to manage Node.js applications in production.

In this article, we will focus on introducing the Cluster module.

Continue Reading

Introduction to Grafana K6: Efficient Load Testing Tool Use Cases

Introduction

Grafana K6 is a highly efficient load testing tool built with JavaScript (with a Golang core) that maximizes the load capabilities of a single machine. According to the official documentation, a single K6 process can effectively utilize all CPU cores, and under ideal conditions, it can simulate 30,000–40,000 virtual users (VUs). This is typically sufficient to handle 100,000–300,000 requests per second (RPS), translating to 6–12 million requests per minute. It enables more efficient load testing without requiring additional hardware resources.

Continue Reading

深入理解 Websocket 協議,常見攻擊手法及防護策略

深入理解 Websocket 協議,常見攻擊手法及防護策略

Websocket 是主流的即時通訊協定,在這裡將針對過去的一些經驗,介紹關於 Websocket 的一些內部網路技術原理,以及如何防禦攻擊的做法進行說明。

Continue Reading

如何透過 SRI 驗證避免 CDN 劫持

SRI (Subresource Integrity) 是一個透過瀏覽器驗證引用的第三方資源,確保內容沒有被串改。

例如,我們常會引用第三方的 CDN 來源,以加快請求的時間。但由於 CDN 來源分散,難以進行定位,若其中一個來源節點受到劫持,可能會發生隨機的劫持,並且難以重複呈現,用戶刷新頁面後,就無法再重現。

Continue Reading

即時通訊架構-心跳檢測原理說明

這裡針對即時通訊架構,即時連線心跳檢測原理是什麼?各種配置機制的好與壞?以及如何提供穩定的連線品質,針對過去一些經驗進行分享~

Continue Reading

RESTful API 介紹及經驗分享

RESTful API 介紹及經驗分享

在現在系統開發,RESTful 無疑是 API 溝通的主流之一,在這裏,主要針對我個人對於 RESTful API 使用狀態及理解做一個分享。

REST 是一個設計風格,全名為 Representational State Transfer (表現層狀態轉換)是在 2000 年,由 Roy Thomas Fielding 所提出來的一種軟體架構風格,用於定義資源及管理資源。

RESTful 則是基於 REST 的一種設計風格,而不是原則!

一般API呼叫方式,主要可有兩部分:通訊協議及序列化

Continue Reading

Vue - VSCode 基本配置 ESLine & Prettier 代碼自動風格化

Vue - VSCode 基本配置 ESLine & Prettier 代碼自動風格化

這裡記錄 Vue 初始設定會用到的一些基本設定

包括語法亮潔以及代碼自動風格化設定.

另外會提到如何在 VSCode settings.json 設定儲存自動將語法進行整理,風格化

Continue Reading

NodeJs 在正式環境運行的對應方式

在這裡要探討關於 node 到底適不適合在正式環境運行,在一開場首先說明我**“過去”**對於這個問題的看法,答案是:不適合。

原因在於,過去有見過幾個專案是由 node 開發,最終都因為穩定性不佳造成極大的損失的案例

當然,這經驗確實是我常建議團隊不要輕易決定使用 node 的原因。

事實上,為什麼 node 不適合在正式環境運行。針對這個問題其實真的探討過的人很少。

這裡參考 Burke Holland 所彙整的一些方法,進行來聊聊這個議題:

首先,關於造成 node 不適合的一些狀況進行探討:

如果透過 Express server 直接運行主機環境

Continue Reading

CSS 限制內容字數寬度或行數,超過顯示刪節號...

CSS 限制內容字數寬度或行數,超過顯示刪節號…

簡單記錄透過 CSS 來限制字數寬度或行數做法,可以將長篇的文章進行截斷,並且結尾以點點點方式呈現

在版面需要對其實,是相當好用的方式。

Continue Reading

Electron forge 啟動安裝

Electron forge 啟動安裝

Electron 可以用來將 HTML, CSS, Javascript 建構成桌面應用軟體

並且可以支援不同的平台,像是 windows, Mac, Linux….

在運行過程,主要透過 Chromium 及 NodeJS 來讓 HTML, CSS, JS 運作

如果,是透過原生的 Electron ,想要結合目前流行的前端框架,像是 Vue, React, Angular

Continue Reading

Json Hijacking 簡介

Json Hijacking 簡介

Json Hijacking 是一項已經存在多年的安全漏洞,目前各大主流瀏覽器都已經修補

這裡進行說明,什麼是 Json Hijacking 以及防範方式:

Continue Reading

前端 vue 開發準則

前端 vue 開發準則

為了讓其他開發者也能理解你每一行程式碼的涵義及作用 在建構程式時,盡力打造清晰直觀的架構,讓程式更容易維護及重構 有關傳遞相關的參數,應該避免過度複雜,避免我們無法直覺看出它的功能

Continue Reading

更新 nodeJS 至最新版

方法一、更新 nodejs 至最新版

更新方式

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Continue Reading

Javascript - 手機瀏覽器開啟APP ,或者導向App Store or Google Play下載

手機瀏覽器開啟APP ,或者導向App Store or Google Play下載

若使用者有安裝APP,則自動啟用,若無安裝,則導向下載頁面。

在 iOS 之前,如果要從各種瀏覽器啟動APP,都必須透過 URI Scheme

在 iOS9 之後的版本,只要你的應用程式支援 Universal Links(通用連結),就可以直接透過HTTP來啟動APP (在此不討論Universal Links)

下表格分別比較幾種瀏覽器啟動APP的方式:

Universal Link Android App Link URI Scheme Chrome Intent
系統版本 >= iOS 9 >= Android 6 Chrome1 < 25, iOS Chrome1 >= 25
未安裝APP 開啟 Web 開啟 Web 錯誤警示 開啟 Web
能否不發生跳轉 不能 不能
前往下載地址 不能
iFrame觸發 不能 不能 Chrome1 <= 18, iOS < 9 不能
連結組成 正常的 URL 正常的 URL 自定義 URL 格式 自定義 intent URL

(來源: http://harttle.land)

Continue Reading

Javascript detect mobile device and iOS Version

Best way

Use mobile-detect.js to check iOS, device… is recommended.

But, if you wanna a easy way to detect mobile and iOS, you can start with :

Detect Mobile Device

Continue Reading

Javascript 判斷移動裝置,以及iPhone, iPad手機 ios 板本

推薦的方式

判斷移動裝置或版本的最佳方式,還是建議使用完整的 Library

mobile-detect.js

若你需要一個快速可以套用在現成專案的作法,則可以參考下方:

判斷移動裝置

雖然這個判斷無法完全涵蓋所有移動裝置,仍適用於各主流的裝置

Continue Reading

Highcharts Error #15 原因-處理方式

Highcharts Error #15 原因 發生這個錯誤的原因是因為 Highcharts 預期資料應該已排序過 若輸入的資料中, x 軸沒有進行由小到大(asc)排序 就會出現Error #15 解決方式 (1) 若 Highcharts 需要倒序顯示 Highcharts 倒序 order desc 的方式顯示資料 在 xAxis 或 yAxis 只要加上 reversed: true 就可以倒序顯示

Continue Reading

How to output Object Data from Chrome console.log

var myObject = Data.toJSON(); console.log(myObject); If we just right click and save console object, something will wrong as fellowing script.js:393 (64805) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …] Just stringify your object, console and save again

Continue Reading

Chrome Enable Logging chrome.exe --enable-logging --v=1

Browsing the Chrome Application Location Change directory to Chrome and Press Enter cd c:\Program Files (x86)\Google\Chrome\Application Enable logging Type in the following and Press Enter This will open a new browser page, and open your site to create console.

Continue Reading

Ionic Error: connect ETIMEDOUT xxxxx at at Object._errnoException ... at _exceptionWithHostPort ... at TCPConnectWrap.afterConnect

Whem Ionic error happened: Error: connect ETIMEDOUT 34.196.18.91:443 at Object._errnoException (util.js:1022:11) at _exceptionWithHostPort (util.js:1044:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1198:14) Try Fellowing solution: PROXY=http://proxy.yourcompany.com:8080 ionic start Whem running command, will auto detect some package should be installed

Continue Reading