diff --git a/files/routes/chat.py b/files/routes/chat.py
index 041882fa79..8d164a00f9 100644
--- a/files/routes/chat.py
+++ b/files/routes/chat.py
@@ -1,6 +1,7 @@
 import sys
-if "load_chat" in sys.argv:
-	from files.helpers.const import SITE_FULL
+from files.helpers.const import SITE, SITE_FULL
+
+if "load_chat" in sys.argv or SITE == 'localhost':
 	import time
 	from files.helpers.wrappers import auth_required
 	from files.helpers.sanitize import sanitize
diff --git a/files/templates/chat.html b/files/templates/chat.html
index e84f6d052d..0c7f417486 100644
--- a/files/templates/chat.html
+++ b/files/templates/chat.html
@@ -76,159 +76,10 @@
 	</div>
 </div>
 
-<script data-cfasync="false" src="/assets/js/socketio.js?v=1"></script>
-
-<script data-cfasync="false">
-	let socket=io()
-	let chatline = document.getElementsByClassName('chat-line')[0]
-	let box = document.getElementById('chat-window')
-	let textbox = document.getElementById('input-text')
-	let icon = document.getElementById('favicon')
-	let notifs = 0;
-	let scrolled_down = true;
-	let focused = true;
-	let is_typing = false;
-	let alert=true;
-
-	box.scrollTo(0, box.scrollHeight)
-
-	function flash(){
-		let title = document.getElementsByTagName('title')[0]
-		if (notifs >= 1 && !focused){
-			title.innerHTML = `[+${notifs}] Chat`;
-			if (alert) {
-				icon.href = '/static/assets/images/{{SITE_NAME}}/alert.webp?v=1'
-				alert=false;
-			}
-			else {
-				icon.href = '/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012'
-				alert=true;
-			}
-			setTimeout(flash, 500)
-		}
-		else {
-			icon.href = '/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012'
-			notifs = 0
-			title.innerHTML = 'Chat';
-		}
-	}
-
-
-	socket.on('speak', function(json) {
-		let text = json['text']
-		let text_html = json['text_html']
-
-		if (text_html.includes('<a href="/id/{{v.id}}">')){
-			chatline.classList.add('chat-mention');
-		}
-		else {
-			chatline.classList.remove('chat-mention');
-		};
-
-		notifs = notifs + 1;
-		if (notifs == 1) {
-			setTimeout(flash, 500);
-		}
-
-		scrolled_down = (box.scrollHeight - box.scrollTop <= window.innerHeight-109)
-		document.getElementsByClassName('desktop-avatar')[0].src = json['avatar']
-		document.getElementsByClassName('mobile-avatar')[0].src = json['avatar']
-		document.getElementsByClassName('userlink')[0].href = '/@' + json['username']
-		document.getElementsByClassName('userlink')[0].innerHTML = json['username']
-		document.getElementsByClassName('userlink')[0].style.color = '#' + json['namecolor']
-		document.getElementsByClassName('text')[0].innerHTML = text
-		document.getElementsByClassName('chat-message')[0].innerHTML = text_html
-		document.getElementById('chat-text').append(document.getElementsByClassName('chat-line')[0].cloneNode(true))
-		if (scrolled_down) box.scrollTo(0, box.scrollHeight)
-	})
-
-
-	function send() {
-		text = textbox.value.trim()
-		if (text)
-		{
-			socket.emit('speak', text);
-			textbox.value = ''
-			textbox.style.height = '40px'
-			is_typing = false
-			socket.emit('typing', false);
-		}
-	}
-
-	function quote(text) {
-		textbox.style.height = '80px'
-		textbox.value = '> ' + text + '\n\n'
-		textbox.focus()
-	}
-
-	function quote2() {
-		textbox.style.height = '80px'
-		text = document.getElementsByClassName('text')[0].innerHTML
-		textbox.value = '> ' + text + '\n\n'
-		textbox.focus()
-	}
-
-	textbox.addEventListener("keyup", function(e) {
-		if (!e.shiftKey && e.key === 'Enter') {
-			e.preventDefault();
-			send()
-		}
-	})
-
-	socket.on('online', function(data){
-		document.getElementsByClassName('board-chat-count')[0].innerHTML = data.length
-		let online = ''
-		for (const u of data)
-			online += `<li><a href="/@${u}" class="text-lg">${u}</a></li>`
-		document.getElementById('online').innerHTML = online
-	})
-
-	window.addEventListener('blur', function(){
-		focused=false
-	})
-	window.addEventListener('focus', function(){
-		focused=true
-	})
-
-
-	textbox.addEventListener("input", function() {
-		text = textbox.value
-		if (!text && is_typing==true){
-			is_typing=false;
-			socket.emit('typing', false);
-		}
-		else if (text && is_typing==false) {
-			is_typing=true;
-			socket.emit('typing', true);
-		}
-	})
-
-
-	socket.on('typing', function (users){
-		if (users.length==0){
-			document.getElementById('typing-indicator').innerHTML = '';
-			document.getElementById('loading-indicator').classList.add('d-none');
-		}
-		else if (users.length==1){
-			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b> is typing...";
-			document.getElementById('loading-indicator').classList.remove('d-none');
-		}
-		else if (users.length==2){
-			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b> and <b>"+users[1]+"</b> are typing...";
-			document.getElementById('loading-indicator').classList.remove('d-none');
-		}
-		else if (users.length==3){
-			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b>, <b>"+users[1]+"</b>, and <b>"+users[2]+"</b> are typing...";
-			document.getElementById('loading-indicator').classList.remove('d-none');
-		}
-		else if (users.length>=4){
-			more=users.length-3
-			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b>, <b>"+users[1]+"</b>, <b>"+users[2]+"</b> and "+more.toString()+" more are typing...";
-			document.getElementById('loading-indicator').classList.remove('d-none');
-		}
-	})
-</script>
+<input id="vid" type="hidden" value="{{v.id}}">
+<input id="site_name" type="hidden" value="{{SITE_NAME}}">
 
+<script data-cfasync="false" src="/assets/js/chat.js?v=20"></script>
 
 <style>
 	#chat-window {