Merge pull request #24 from ids93216/Release

edit: WebSocket disconnect handle fix and change map color

README.md

@@ -2,16 +2,6 @@
 > **Note**    
 > 2.0.0 版本修正新版 API（需進一步測試）
 
-> **Note**    
-> 1.9.0 及後續版本加入 `P2P(中繼) 備援伺服器` `EEW 備援伺服器`
-> - `p2p-1.exptech.com.tw:1015`
-> - `p2p-2.exptech.com.tw:1015`
-> - `p2p-3.exptech.com.tw:1015`
-> - `p2p-4.exptech.com.tw:1015`
-
-> **Note**    
-> 1.4.0 及後續版本加入 P2P 功能
-
 <img alt="Logo" src="https://upload.cc/i1/2022/08/11/DOqzZM.png" width="128px" height="128px" align="left"/>
 
 

src/core/index/action.js

@@ -34,4 +34,23 @@ location_button.onclick = () => {
 		TREM.Maps.main.setView([23.6, 120.4], 7.8);
 		refresh_report_list();
 	}
+};
+
+const webscoket_button = document.getElementById("webscoket_button");
+if(storage.getItem("key")){
+	webscoket_button.style.color = "grey";
+	webscoket_button.style.border = "1px solid red";
+} else {
+	webscoket_button.style.display = "none";
+	document.getElementsByClassName("version_text")[0].style.right = "432px";
+}
+webscoket_button.onclick = () => {
+	if (ws == null) {
+		reconnect(true);
+	} else {
+		add_info("fa-solid fa-network-wired fa-2x info_icon", "#00AA00", "已關閉 WebSocket 連線", "#00BB00", "正在使用 HTTP 連線", 5000);
+		ws_auth = false;
+		ws.close();
+		ws = null;
+	}
 };

src/core/index/api.js

@@ -42,7 +42,7 @@ function fetch_eew() {
 			const _now = Now().getTime();
 			last_get_eew_time = _now;
 			type_list.time = now_time();
-			type_list.http = _now;
+			type_list.http = now_time();
 			if (ans.length == 0) return;
 			const eew = ans[ans.length - 1];
 			if (eew.id === eew_last) {
@@ -68,7 +68,7 @@ function fetch_rts() {
 	if(rts_replay_time) return;
 	const controller = new AbortController();
 	setTimeout(() => controller.abort(), 2500);
-	fetch(`https://${api_domain}/api/v1/trem/rts/`, { signal: controller.signal })
+	fetch(`https://${api_domain}/api/v1/trem/rts`, { signal: controller.signal })
 		.then(async (ans) => {
 			ans = await ans.json();
 			on_rts_data(ans);

src/core/index/loop.js

@@ -83,8 +83,8 @@ fetch_rts();
 setInterval(() => {
 	if(WS) return;
 	fetch_eew();
-	if(sleep_state || parseInt(Date.now()/1000)%5!=0) return;
-	fetch_rts(); /* 每五秒抓一次RTS (CDN有快取時間) */
+	if(sleep_state || parseInt(Date.now()/1000)%2!=0) return;
+	fetch_rts(); /* 每2秒抓一次RTS (CDN有快取時間) */
 }, 1_000);
 
 setInterval(() => {
@@ -258,7 +258,7 @@ setInterval(() => {
 					}
 					const _now = Now().getTime();
 					type_list.time = now_time();
-					type_list.http = _now;
+					type_list.http = now_time();
 					for (const eew of ans_eew) {
 						// if (eew.type == "trem-eew") {
 						// 	eew.time = eew_list[eew.number - 1].time;

src/core/index/main.js

@@ -100,10 +100,9 @@ for (let i = 0; i < map_list.length; i++) {
 		buffer          : 256,
 		debug           : 0,
 		style           : {
-			weight      : 0.6,
-			color       : (map_list[i] == "tw.json") ? "white" : "gray",
-			fillColor   : "#3F4045",
-			fillOpacity : 0.5,
+			weight      : 1.6,
+			color       : (map_list[i] == "tw.json") ? "#585858" : "gray",
+			fillColor   : "#818181",
 		},
 	}, TREM.Maps.main);
 }

src/core/index/server.js

@@ -2,7 +2,8 @@
 let WS = false;
 let ws;
 let ServerT = 0;
-let Reconnect = 0;
+let Reconnect = now_time();
+let ws_auth = false;
 let disconnect_info = 0;
 let init_ = false;
 let sleep_state = false;
@@ -30,7 +31,10 @@ function close() {
 	WS = false;
 }
 
-function reconnect() {
+function reconnect(force = false) {
+	if (!ws_auth && !force) {
+		return;
+	}
 	if (now_time() - Reconnect < 5000) {
 		return;
 	}
@@ -86,13 +90,17 @@ function sleep(_state = null) {
 
 function initEventHandle() {
 	ws.onclose = () => {
-		if (storage.getItem("key")) add_info("fa-solid fa-satellite-dish fa-2x info_icon", "#FF0000", "連線錯誤", "#00BB00", "WebSocket 已斷線<br>正在使用 HTTP 連線", 5000);
+		webscoket_button.style.color = "grey";
+		webscoket_button.style.border = "1px solid red";
+		if (storage.getItem("key") && ws_auth) add_info("fa-solid fa-satellite-dish fa-2x info_icon", "#FF0000", "連線失敗", "#00BB00", "WebSocket 已斷線<br>正在使用 HTTP 連線", 5000);
+		WS = false;
 		void 0;
 	};
 	ws.onerror = () => {
 		void 0;
 	};
 	ws.onopen = () => {
+		ws_auth = false;
 		const config = {
 			type : "start",
 			service : ["trem.rts", "trem.eew", "websocket.eew", "websocket.report"],
@@ -108,10 +116,15 @@ function initEventHandle() {
 		WS = true;
 		ServerT = now_time();
 		const json = JSON.parse(evt.data);
-		if (json.type == "info" && json.data.code != 200) {
-			add_info("fa-solid fa-satellite-dish fa-2x info_icon", "#FF0000", "連線錯誤", "#00BB00", "無法註冊 WebSocket 服務<br>請檢查 apiKey 是否正確", 5000);
+		if (json.type == "info" && json.data.code != 200 && !ws_auth) {
+			if (json.data.message == "This key already in used!") {
+				add_info("fa-solid fa-satellite-dish fa-2x info_icon", "#FF0000", "連線錯誤", "#00BB00", "無法註冊 WebSocket 服務<br>此 apiKey 已在使用中，請稍候再試", 5000);
+			} else {
+				add_info("fa-solid fa-satellite-dish fa-2x info_icon", "#FF0000", "連線錯誤", "#00BB00", "無法註冊 WebSocket 服務<br>請檢查授權狀態", 5000);
+			}
 			log(`Websocket reg NG: ${json.data.message}`, 3, "log", "~");
-			close();
+			ws.close();
+			ws = null;
 			return;
 		}
 		// if (json.type != "data" && json.type != "ntp") {
@@ -125,6 +138,9 @@ function initEventHandle() {
 			};
 			ws.send(JSON.stringify(config));
 		} else if (json.type == "info" && json.data.code == 200) {
+			ws_auth = true;
+			webscoket_button.style.color = "white";
+			webscoket_button.style.border = "1px solid white";
 			add_info("fa-solid fa-network-wired fa-2x info_icon", "#00AA00", "連線成功", "#00BB00", "已連線並註冊 WebSocket 伺服器", 5000);
 			log("Websocket reg OK", 1, "log", "~");
 		} else if (json.type == "data" && json.data.type == "rts") {
@@ -168,13 +184,13 @@ function Now() {
 }
 
 setInterval(() => {
-	if(!WS) return;
+	if(!storage.getItem("key")) return;
 	if (now_time() - ServerT > 120_000) {
 		plugin.emit("trem.core.websocket-disconnect");
+		reconnect();
 		WS = false;
 		time.style.color = "red";
 		log("Websocket long time no got msg, timeout", 1, "log", "~");
-		reconnect();
 		if (now_time() - disconnect_info > 60_000) {
 			disconnect_info = now_time();
 			add_info("fa-solid fa-satellite-dish fa-2x info_icon", "#FF0000", "網路異常", "#00BB00", "WebSocket 伺服器沒有回應<br>請檢查網路狀態或稍後重試", 5000);

src/core/setting/setting.js

@@ -195,14 +195,14 @@ function login_display(){
 
 async function login() {
 	try {
-		const client_name = localStorage.UUID.substr(0, 4);
+		const client_name = localStorage.UUID.split(":")[0];
 		const client_ver = app.getVersion();
 		const email = user_email.value;
 		const pass = user_pass.value;
 		const resp = await fetch("https://api.exptech.com.tw/api/v3/et/login", {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ email: email, pass: pass, name: `TREM-Lite Client [${client_name}]/TREM-Lite/${client_ver}/0.0.0` }),
+			body: JSON.stringify({ email: email, pass: pass, name: `Client [${client_name}]/TREM-Lite/${client_ver}/0.0.0` }),
 		});
 		const ans = await resp.text();
 		if (!resp.ok){

src/css/main.css

@@ -282,7 +282,7 @@ body {
 .version_text {
   position: absolute;
   bottom: 0px;
-  right: 432px;
+  right: 472px;
   color: white;
   font-size: 12px;
 }
@@ -436,6 +436,18 @@ body {
   box-sizing: border-box;
 }
 
+.websocket_button {
+  position: absolute;
+  bottom: 7.2px;
+  right: 432px;
+  margin: 2px;
+  padding: 5px;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  z-index: 9999;
+}
+
 .location_button {
   position: absolute;
   bottom: 7.2px;

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trem_lite",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Taiwan Real-time Earthquake Monitoring ( 臺灣即時地震監測 )",
   "homepage": "https://exptech.com.tw/",
   "main": "main.js",

src/view/index.html

@@ -134,6 +134,7 @@
     </div>
     <div class="time surface" id="time">---- / -- / -- -- : -- : --</div>
     <div id="report_list" class="report_list scrollbar"></div>
+    <i id="webscoket_button" class="fa fa-plug websocket_button"></i>
     <i id="location_button" class="fa fa-location-crosshairs location_button"></i>
     <i id="refresh_button" class="fa-solid fa-arrows-rotate refresh_button"></i>
     <i id="setting_button" class="fa fa-gear setting_button"></i>