fix catchups and allow polling fallback

gulp/res/js/live.js

@@ -15,35 +15,17 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 	}
 
 	let lastPostId;
-	const jsonPath = window.location.pathname.replace(/\.html$/, '.json');
-	const jsonCatchup = async () => {
-		console.log('catching up after reconnect');
-		updateLive('Checking for missed posts...', 'yellow');
-		let json;
-		try {
-			json = await fetch(jsonPath).then(res => res.json());
-		} catch (e) {
-			console.error(e);
-		}
-		if (json && json.replies && json.replies.length > 0) {
-			const newPosts = json.replies.filter(r => r.postId > lastPostId); //filter to only newer posts
-			if (newPosts.length > 0) {
-				for (let i = 0; i < newPosts.length; i++) {
-					newPost(newPosts[i]);
-				}
-			}
-		}
-		setTimeout(() => {
-			updateLive('Connected for live posts', '#0de600');
-		}, 1000);
-	}
-
-	const startLive = () => {
 	const anchors = document.getElementsByClassName('anchor');
 	if (anchors.length === 0) {
 		return; //url matches, but on a 404 page so dont bother with the rest
 	}
+
+	let liveEnabled = localStorage.getItem('live') == 'true';
+	let notificationsEnabled = localStorage.getItem('notifications') == 'true';
+	let scrollEnabled = localStorage.getItem('scroll') == 'true';
+
 	lastPostId = anchors[anchors.length - 1].id;
+	const thread = document.querySelector('.thread');
 	const newPost = (data) => {
 		console.log('got new post');
 		lastPostId = data.postId;
@@ -99,10 +81,35 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 		//dispatch the event so quote click handlers, image expand, etc can be added in separate scripts by listening to the event
 		window.dispatchEvent(newPostEvent);
 	}
+
+
+	const jsonPath = window.location.pathname.replace(/\.html$/, '.json');
+	const jsonCatchup = async () => {
+		console.log('catching up after reconnect');
+		updateLive('Checking for missed posts...', 'yellow');
+		let json;
+		try {
+			json = await fetch(jsonPath).then(res => res.json());
+		} catch (e) {
+			console.error(e);
+		}
+		if (json && json.replies && json.replies.length > 0) {
+			const newPosts = json.replies.filter(r => r.postId > lastPostId); //filter to only newer posts
+			if (newPosts.length > 0) {
+				for (let i = 0; i < newPosts.length; i++) {
+					newPost(newPosts[i]);
+				}
+			}
+		}
+		setTimeout(() => {
+			updateLive('Connected for live posts', '#0de600');
+		}, 1000);
+	}
+
+	const startLive = () => {
 		const roomParts = window.location.pathname.replace(/\.html$/, '').split('/');
 		const room = `${roomParts[1]}-${roomParts[3]}`;
-		const thread = document.querySelector('.thread');
-		socket = io({ transports: ['websocket'] }); //no polling
+		socket = io({ transports: ['websocket', 'polling'] });
 		socket.on('connect', () => {
 			console.log('joined room', room);
 			updateLive('Connected for live posts', '#0de600');
@@ -130,10 +137,6 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 		socket.on('newPost', newPost);
 	}
 
-	let liveEnabled = localStorage.getItem('live') == 'true';
-	let notificationsEnabled = localStorage.getItem('notifications') == 'true';
-	let scrollEnabled = localStorage.getItem('scroll') == 'true';
-
 	const liveSetting = document.getElementById('live-setting');
 	const notificationSetting = document.getElementById('notification-setting');
 	const scrollSetting = document.getElementById('scroll-setting');