index.html

<!-- Web Worker – Algorithm Integral Complicated 01 -->
<!DOCTYPE html>
<Html>

<Head>
	<meta charset="UTF-8">
	<title> Sew Code Javascript - Can Bac 2 </title>
</Head>

<Body>
	<div>
		Nhập số lượng Socket:
		<input type="number" id="SocketInput" placeholder="Nhập số lượng Socket">
		<br>
		Nhập Bậc M:
		<input type="number" id="BacCanThucInput" placeholder="Nhập Bậc M">
		<br>
		Nhập Số Lượng Integral:
		<input type="number" id="NumberCanThucInput" placeholder="Nhập Số Lượng Integral">
		<br>
		<button id="submitButton"> Lấy giá trị </button>
		<br>
		<div id="result"></div>
		<br> <br>

		<select id="Select01" onChange="ChangeSocketIO(this.value)">
		</select>
		<br>

		<span id="pChangeSocketIO"> </span>
		<br>

		<button id="ClearButton"> Clear Reload Count </button>
		<br>

		Reload Count: <span id="ReloadCountID"> </span>
		<br>

		<p id="pCountDown"> </p>
		<br>
		<span id="countdown"> CountDown </span>
		<br>
		Message: <span id="message"> </span>
		<br>
	</div>

	<!-- <script id="worker02" type="text/javascript"> -->
	<script id="worker02" type="text/javascript">
		function sleep(ms) {
			return new Promise(resolve => setTimeout(resolve, ms));
		}

		/* Thiết lập thời gian chờ 3 phút x 60 giây x 1000 mili giây */
		var timeout = 3 * 60 * 1000;
		/* Chuyển đổi thời gian chờ sang giây */
		var timeLeft = timeout / 1000;

		/* Tạo một hàm để cập nhật thời gian còn lại */
		async function updateCountdown(callback) {
			timeLeft -= 1;
			var result01 = "Thời gian đến lần reload tiếp theo: " + timeLeft + " giây";
			callback({ timeLeft: timeLeft, message: result01 });
		}

		self.addEventListener("message", async function (event) {
			var LoopNumber = 9000000;
			for (var i02 = 0; i02 < LoopNumber; i02++) {
				await updateCountdown(
					function (response) {
						var timeLeft = response.timeLeft;
						var message = response.message;
						var encodedString =
							new TextEncoder('utf-8').encode(message);
						var decodedString =
							new TextDecoder('utf-8').decode(encodedString);
						self.postMessage(decodedString);
						if (timeLeft <= 0) {
							self.postMessage('reload');
						}
					});
				await sleep(1000);
			}
		});
	</script>

	<!-- <script id="worker03" type="text/javascript"> -->
	<script id="worker03" type="text/javascript">
		const worker01Code =
			`
		var BacM = 2;
		var NumberIntegral = 1;

		function sleep(ms) {
			return new Promise(resolve => setTimeout(resolve, ms));
		}

		function getRandomInteger(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}

		function safePow(base, exponent) {
			if (base <= 0 && exponent < 0) {
				/* Tránh trường hợp không xác định */
				return NaN;
			}
			return Math.pow(base, exponent);
		}

		class Integral {
			constructor(BacM) {
				this.BacM = BacM;
			}
			updateBacM(newValue) {
				this.BacM = newValue;
			}

			async CountNumberTo100(callback) {
				const step = 0.01; /* Bước nhỏ để tính tích phân */
				const limit = 10000; /* Giới hạn tích phân */

				for (var i = 1; i < 100; i++) {
					var BacSinX = getRandomInteger(1, 20);
					var result = 0.0;

					/* Tính tích phân bằng vòng lặp for */
					for (let x = step; x < limit; x += step) {
						let exponent = Math.pow( BacSinX, this.BacM ) 
							* Math.pow( Math.sin(x), this.BacM );

						let term =
							safePow( x, exponent ) *
							Math.exp( - this.BacM*100*BacSinX * Math.pow(x, this.BacM) );

						if (!isNaN(term)) {
							result += term * step;
						}
					}

					var result02 =
						" Loop i = " +
						i +
						";  n = " + BacSinX +
						";  m = " + this.BacM +
						";  Kết Quả tích phân x^( " +
						Math.pow( BacSinX, this.BacM ) +
						" * Sin(x)^" + this.BacM + 
						" ) * e^( -" +
						this.BacM*100*BacSinX +
						" * x^3 ) = " +
						result +
						" <br> <br> ";
					callback(result02);
					await sleep(100);
				}
			}

			async startCounting() {
				const LoopNumber = 9000000;
				let result = "";
				for (let i02 = 0; i02 < LoopNumber; i02++) {
					await this.CountNumberTo100((responseText) => {
						result += responseText;
						self.postMessage(result);
					});
					result = " Loop i02 = " + i02 + "<br>";
					await sleep(100);
				}
			}
		}

		class Integral02 {
			constructor(NumberIntegral) {
				this.IntegralArray = [];
				this.NumberIntegral = NumberIntegral;
				for (var i = 1; i <= this.NumberIntegral; i++) {
					this.IntegralArray[i] = new Integral(BacM);
				}
			}
		}
		var IntegralObj;
		self.onmessage = function (event) {
			const { BacCanThuc: newBacCanThuc, 
				NumberCanThuc: newNumberCanThuc } = event.data;
			BacM = newBacCanThuc; 
			NumberIntegral = newNumberCanThuc; 
			IntegralObj = new Integral02(NumberIntegral);
			IntegralObj.IntegralArray.forEach(canThuc => {
				canThuc.updateBacM(BacM);
			});
		};
		self.addEventListener("message", async (event) => {
			if (IntegralObj) {
				await IntegralObj.IntegralArray[1].startCounting();
			}
		});
`
			;

		/* class DownloadWeb */
		class DownloadWeb {
			constructor(ObjectName) {
				this.ObjectName = ObjectName;
				this.worker = new Worker(
					URL.createObjectURL(
						new Blob([worker01Code],
							{ type: 'application/javascript' })));
			}
		}

		class DownloadWeb02 {
			constructor(BacCanThuc, NumberCanThuc, NumberSocket) {
				this.BacCanThuc = BacCanThuc;
				this.NumberCanThuc = NumberCanThuc;
				this.NumberSocket = NumberSocket;
				this.DownloadWeb = [];
			}
			start(BacCanThuc, NumberCanThuc) {
				var stringSocket = "";
				for (var i = 1; i <= this.NumberSocket; i++) {
					stringSocket = (i < 10) ? "Socket0" + i : "Socket" + i;
					this.DownloadWeb[i] = new DownloadWeb(stringSocket);
					this.DownloadWeb[i].worker.postMessage(
						{
							BacCanThuc: this.BacCanThuc,
							NumberCanThuc: this.NumberCanThuc
						});
				}
			}

		}

		function sleep(ms) {
			return new Promise(resolve => setTimeout(resolve, ms));
		}
	</script>

	<script type="text/javascript">
		var messageElement = document.getElementById('message');
		var obj02;
		/* const initDropDownMenu = async () => */
		const initDropDownMenu = async () => {
			try {
				var stringSocket = "";
				var ListItem = [];
				for (var i = 1; i <= NumberSocket; i++) {
					if (i < 10) {
						stringSocket = "Socket0" + i;
					} else {
						stringSocket = "Socket" + i;
					}
					ListItem.push(stringSocket);
				}
				var select = document.getElementById("Select01");
				/* Sử dụng vòng lặp để thêm các option vào select */
				for (var i = 0; i < ListItem.length; i++) {
					var option = document.createElement("option");
					option.text = ListItem[i];
					select.add(option);
				}
			} catch (err) {
				console.log(err);
				return err;
			}
		};

		/* async function ChangeSocketIO(value02) */
		async function ChangeSocketIO(value02) {
			document.getElementById('pChangeSocketIO').
				innerHTML = " Object Name: " + value02;
			/* Gỡ bỏ sự kiện message của các giá trị cũ */
			for (var i = 1; i <= NumberSocket; i++) {
				if (obj02.DownloadWeb[i].ObjectName !== value02) {
					obj02.DownloadWeb[i].
						worker.removeEventListener(
							'message', obj02.DownloadWeb[i].messageHandler);
				}
			}

			/* Lặp qua mảng obj để so sánh giá trị ObjectName với value02 */
			for (var i = 1; i <= NumberSocket; i++) {
				if (obj02.DownloadWeb[i].ObjectName === value02) {
					messageElement.innerHTML = "";
					obj02.DownloadWeb[i].messageHandler = function (event) {
						/* Nhận tin nhắn từ Web Worker và hiển thị trong div */
						messageElement.innerHTML
							= obj02.DownloadWeb[i].ObjectName
							+ " - " + event.data;
					};
					await obj02.DownloadWeb[i].worker.addEventListener(
						'message', obj02.DownloadWeb[i].messageHandler);
					break;
				}
			}
		}
		function GetNumberSocket() {
			var number;
			if (localStorage.getItem("NumberSocket")) {
				number = parseInt(localStorage.getItem("NumberSocket"));

			} else {
				number = 10;
			}
			return number;
		}

		function GetBacCanThuc() {
			var result;
			if (localStorage.getItem("BacCanThuc")) {
				result = parseInt(localStorage.getItem("BacCanThuc"));

			} else {
				result = 2;
			}
			return result;
		}

		function GetNumberCanThuc() {
			var result;
			if (localStorage.getItem("NumberCanThuc")) {
				result = parseInt(localStorage.getItem("NumberCanThuc"));

			} else {
				result = 1;
			}
			return result;
		}
		var reloadElement = document.getElementById('ReloadCountID');
		var countdownElement = document.getElementById('countdown');

		/* document.getElementById('submitButton').onclick = function () */
		document.getElementById('submitButton').onclick = function () {
			var SocketInput = document.getElementById(
				'SocketInput').value;
			var BacCanThucInput = document.getElementById(
				'BacCanThucInput').value;
			var NumberCanThucInput = document.getElementById(
				'NumberCanThucInput').value;
			if (SocketInput !== '' && BacCanThucInput !== '') {
				var Socket = parseInt(SocketInput);
				document.getElementById('result').innerText =
					'Giá trị bạn nhập là: ' + Socket;
				localStorage.setItem("NumberSocket", Socket);
				var BacCanThuc = parseInt(BacCanThucInput);
				localStorage.setItem("BacCanThuc", BacCanThuc);
				var NumberCanThuc = parseInt(NumberCanThucInput);
				localStorage.setItem("NumberCanThuc", NumberCanThuc);
				localStorage.setItem("reloadCountSCJ", 0);
				reloadElement.innerHTML
					= localStorage.getItem("reloadCountSCJ");
				location.reload();
			} else {
				var Socket = 2;
				document.getElementById('result').innerText =
					'Giá trị bạn nhập là: ' + Socket;
				localStorage.setItem("NumberSocket", Socket);
				var BacCanThuc = 2;
				localStorage.setItem("BacCanThuc", BacCanThuc);
				var NumberCanThuc = 1;
				localStorage.setItem("NumberCanThuc", NumberCanThuc);
				localStorage.setItem("reloadCountSCJ", 0);
				reloadElement.innerHTML
					= localStorage.getItem("reloadCountSCJ");
				location.reload();
			}
		};

		var NumberSocket;
		document.addEventListener('DOMContentLoaded', async function () {
			NumberSocket = GetNumberSocket();
			var BacCanThuc = GetBacCanThuc();
			var NumberCanThuc = GetNumberCanThuc();
			console.log("BacCanThuc = " + BacCanThuc);
			document.getElementById('result').innerHTML =
				'Số lượng Socket là: ' + localStorage.getItem("NumberSocket")
				+ "<br>" + 'Bậc Căn Thức là: ' + localStorage.getItem(
					"BacCanThuc")
				+ "<br>" + 'Số Lượng Căn Thức là: ' + localStorage.getItem(
					"NumberCanThuc");

			await initDropDownMenu();
			obj02 = new DownloadWeb02(
				BacCanThuc, NumberCanThuc, NumberSocket);
			obj02.start(BacCanThuc, NumberCanThuc);
		});
	</script>
</Body>

</Html>