fix: socket io connection

frontend/src/main.js

@@ -1,13 +1,13 @@
-import { frappeRequest, initSocket, setConfig } from 'frappe-ui'
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { frappeRequest, setConfig } from 'frappe-ui'
+import { GridItem, GridLayout } from 'grid-layout-plus'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
-import { GridLayout, GridItem } from 'grid-layout-plus'
-import { socketio_port } from '../../../../sites/common_site_config.json'
 import App from './App.vue'
 import './index.css'
 import router from './router'
+import { initSocket } from './socket'
 import { createToast } from './utils/toasts'
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 
 import { registerControllers, registerGlobalComponents } from './globals'
 
@@ -33,12 +33,7 @@ app.use(router)
 app.use(autoAnimatePlugin)
 app.component('grid-layout', GridLayout)
 app.component('grid-item', GridItem)
-app.provide(
-	'$socket',
-	initSocket({
-		port: socketio_port,
-	})
-)
+app.provide('$socket', initSocket())
 
 registerGlobalComponents(app)
 registerControllers(app)

frontend/src/socket.js

@@ -0,0 +1,16 @@
+import { io } from 'socket.io-client'
+import { socketio_port } from '../../../../sites/common_site_config.json'
+
+export function initSocket() {
+	let host = window.location.hostname
+	let siteName = window.site_name
+	let port = window.location.port ? `:${socketio_port}` : ''
+	let protocol = port ? 'http' : 'https'
+	let url = `${protocol}://${host}${port}/${siteName}`
+
+	let socket = io(url, {
+		withCredentials: true,
+		reconnectionAttempts: 5,
+	})
+	return socket
+}