diff --git a/deploy/nginx-ws-proxy.conf b/deploy/nginx-ws-proxy.conf new file mode 100644 index 0000000..7b55d7c --- /dev/null +++ b/deploy/nginx-ws-proxy.conf @@ -0,0 +1,27 @@ +http { + map $http_upgrade $connection_upgrade { + default upgrade; + '' close; + } + + upstream websocket { + server staging.c3lf.de:443; + } + + server { + listen 8082; + access_log /home/jedi/Projects/c3lf-system-3/deploy/foo.log; + location / { + proxy_pass https://websocket; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection $connection_upgrade; + proxy_set_header Origin "https://staging.c3lf.de/"; + proxy_set_header Host $host; + } + } +} + +events {} + +pid /home/jedi/Projects/c3lf-system-3/deploy/nginx.pid; \ No newline at end of file diff --git a/web/package.json b/web/package.json index 627effc..917743e 100644 --- a/web/package.json +++ b/web/package.json @@ -8,14 +8,14 @@ "lint": "vue-cli-service lint" }, "dependencies": { - "axios": "^1.6.2", - "base-64": "^0.1.0", + "axios": "^1.6.5", + "base-64": "^1.0.0", "bootstrap": "^4.3.1", - "core-js": "^3.3.2", + "core-js": "^3.35.1", "jquery": "^3.4.1", "lodash": "^4.17.15", "luxon": "^1.21.3", - "popper.js": "^1.16.0", + "popper.js": "^1.16.1", "ramda": "^0.26.1", "sass": "^1.19.0", "sass-loader": "^10.4.1", @@ -31,8 +31,10 @@ "@vue/cli-plugin-babel": "^5.0.8", "@vue/cli-service": "~5.0.8", "express-basic-auth": "^1.2.1", + "http-proxy-middleware": "^2.0.6", "vue-template-compiler": "^2.6.10", - "webpack": "^5" + "webpack": "^5", + "webpack-dev-server": "^4.15.1" }, "eslintConfig": { "root": true, diff --git a/web/public/js/worker.js b/web/public/js/worker.js deleted file mode 100644 index 19f4203..0000000 --- a/web/public/js/worker.js +++ /dev/null @@ -1,50 +0,0 @@ -let state = 0; -let ports = []; -let notify_socket; - -function tryConnect(){ - if(self.WebSocket === undefined){ - console.log("no websocket support"); - return; - } - if (!notify_socket || notify_socket.readyState !== WebSocket.OPEN) { - const scheme = location.protocol === "https:" ? "wss" : "ws"; - notify_socket = new WebSocket(scheme + '://' + location.host + '/ws/2/notify/'); - notify_socket.onopen = (e) => { - console.log("open", JSON.stringify(e)); - }; - notify_socket.onclose = (e) => { - console.log("close", JSON.stringify(e)); - setTimeout(() => { - tryConnect(); - }, 1000); - }; - notify_socket.onerror = (e) => { - console.log("error", JSON.stringify(e)); - setTimeout(() => { - tryConnect(); - }, 1000); - }; - notify_socket.onmessage = (e) => { - let data = JSON.parse(e.data); - console.log("message", data); - //this.loadEventItems() - //this.loadTickets() - } - } -} - -onconnect = function (e) { - const port = e.ports[0]; - ports.push(port); - port.onmessage = function (e) { - state = state + 1; - for (let i = 0; i < ports.length; i++) { - ports[i].postMessage({d: e.data, s: state, n: ports.length}); - } - } - port.start(); - console.log("worker connected", JSON.stringify(e)); - tryConnect(); -} - diff --git a/web/src/shared-state-plugin/index.js b/web/src/shared-state-plugin/index.js index cba4729..65dc91b 100644 --- a/web/src/shared-state-plugin/index.js +++ b/web/src/shared-state-plugin/index.js @@ -1,28 +1,99 @@ -export default (config) => (store) => ({ - onInit: () => { - console.log('onInit'); - store.dispatch('init'); - }, - onMutation: (mutation, state) => { - console.log('onMutation', mutation.type); - if (mutation.type === 'updateLastEvent') { - console.log('update last event', mutation.payload); - store.dispatch('updateLastEvent', mutation.payload); +export default (config) => { + console.log('plugin created'); + const worker_fun = function (self, ctx) { + let state = 0; + let ports = []; + let notify_socket; + + function tryConnect() { + if (self.WebSocket === undefined) { + console.log("no websocket support"); + return; + } + if (!notify_socket || notify_socket.readyState !== WebSocket.OPEN) { + // global location is not useful in worker loaded from data url + const scheme = ctx.location.protocol === "https:" ? "wss" : "ws"; + console.log("connecting to", scheme + '://' + ctx.location.host + '/ws/2/notify/'); + notify_socket = new WebSocket(scheme + '://' + ctx.location.host + '/ws/2/notify/'); + notify_socket.onopen = (e) => { + console.log("open", JSON.stringify(e)); + }; + notify_socket.onclose = (e) => { + console.log("close", JSON.stringify(e)); + setTimeout(() => { + tryConnect(); + }, 1000); + }; + notify_socket.onerror = (e) => { + console.log("error", JSON.stringify(e)); + setTimeout(() => { + tryConnect(); + }, 1000); + }; + notify_socket.onmessage = (e) => { + let data = JSON.parse(e.data); + console.log("message", data); + //this.loadEventItems() + //this.loadTickets() + } + } } - }, - onAction: (action, state) => { - console.log('onAction', action.type); - if (action.type === 'updateLastEvent') { - console.log('update last event', action.payload); - store.dispatch('updateLastEvent', action.payload); + + onconnect = function (e) { + const port = e.ports[0]; + ports.push(port); + port.onmessage = function (e) { + state = state + 1; + for (let i = 0; i < ports.length; i++) { + ports[i].postMessage({d: e.data, s: state, n: ports.length}); + } + } + port.start(); + console.log("worker connected", JSON.stringify(e)); + tryConnect(); } - }, - onSubscription: (mutation, state) => { - console.log('onSubscription', mutation.type); - if (mutation.type === 'updateLastEvent') { - console.log('update last event', mutation.payload); - store.dispatch('updateLastEvent', mutation.payload); + + console.log("worker loaded"); + } + + const worker_context = { + location: { ...location }, + } + const worker_code = '(' + worker_fun.toString() + ')(self,' + JSON.stringify(worker_context) + ')'; + const worker_url = 'data:application/javascript;base64,' + btoa(worker_code); + + const worker = new SharedWorker(worker_url, 'vuex-shared-state-plugin'); + worker.port.start(); + worker.port.onmessage = function (e) { + console.log('worker result', e.data); + }; + worker.port.postMessage([2, 3]); + console.log('worker started'); + + return (store) => { + console.log('plugin started'); + if ('mutations' in config) { + store.subscribe((mutation, state) => { + if (mutation.type in config.mutations) { + console.log(mutation.type, mutation.payload); + console.log(state); + } + }); } - }, - // other hooks... -}); \ No newline at end of file + if ('actions' in config) { + store.subscribeAction((action, state) => { + if (action.type in config.actions) { + console.log(action.type, action.payload); + console.log(state); + } + }); + } + if ('state' in config) { + config.state.forEach((member) => { + store.watch((state, getters) => state[member], (newValue, oldValue) => { + console.log('watch', member, newValue, oldValue); + }); + }); + } + }; +} \ No newline at end of file diff --git a/web/src/store.js b/web/src/store.js index 9234d7a..a3ab313 100644 --- a/web/src/store.js +++ b/web/src/store.js @@ -18,13 +18,7 @@ import sharedStatePlugin from "@/shared-state-plugin"; //Vue.use(worker); -const worker = new SharedWorker('/js/worker.js'); -worker.port.start(); -worker.port.onmessage = function (e) { - console.log('worker result', e.data); -}; -worker.port.postMessage([2, 3]); -console.log('worker started'); + const axios = AxiosBootstrap.create({ @@ -244,7 +238,10 @@ const store = createStore({ localStorage.removeItem('token_expiry'); if (router.currentRoute.name !== 'login') router.push('/login'); - } + }, + setTest(state, test) { + state.test = test; + }, }, actions: { async login({commit, dispatch, state}, {username, password, remember}) { diff --git a/web/src/views/admin/Debug.vue b/web/src/views/admin/Debug.vue index bc00c6c..dc8be3f 100644 --- a/web/src/views/admin/Debug.vue +++ b/web/src/views/admin/Debug.vue @@ -1,5 +1,16 @@