+
+
+
+
+ `,
+
+ data: function(){
+ return {
+ reply: null
+ }
+ },
+ methods:{
+
+
+ send(){
+ this.$socket.send('some data');
+ }
+ },
+ mounted: function(){
+ //this.$connect();
+ this.$options.sockets.onmessage = (data) => this.reply=data;
+ }
+
+}
+ );
+
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/xqdoc/xqdoc.vue
const Xqdoc2=Vue.extend({template:`
@@ -6009,7 +6068,8 @@ const router = new VueRouter({
{ path: 'jobs', name:"jobs", component: Jobs, meta:{title:"Jobs running"} },
{ path: 'jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
- { path: 'ping', component: Ping,meta:{title:"Ping"} }
+ { path: 'ping', component: Ping,meta:{title:"Ping"} },
+ { path: 'websocket', component: Websocket,meta:{title:"Web socket"} }
]
},
@@ -6055,7 +6115,7 @@ router.beforeEach((to, from, next) => {
// this route requires auth, check if logged in
// if not, redirect to login page.
console.log("matched: ",Auth)
- if ("admin"!=Auth.permission) {
+ if ("admin"!=Auth.role) {
next({
path: '/login',
query: { redirect: to.fullPath }
@@ -6221,6 +6281,7 @@ const Vuepoc=Vue.extend({template:`
{href: '/server/logs',text: 'Server logs',icon: 'dns'},
{href: '/server/users',text: 'Users',icon: 'supervisor_account'},
{href: '/server/repo',text: 'Server code repository',icon: 'local_library'},
+ {href: '/server/websocket',text: 'Web socket',icon: 'swap_calls'},
{href: '/server/ping',text: 'Ping',icon: 'update'}
]},
{
@@ -6524,6 +6585,9 @@ function install (Vue) {
Vue.component('vue-form-json-schema', VueFormJsonSchema);
};
Vue.use({ install: install });
+var sockhost=('https:'==window.location.protocol?'wss:':'ws:')+'//'+ window.location.host +'/ws';
+Vue.use(VueNativeSock.default, sockhost);
+console.log("SOCK UP",VueNativeSock,sockhost);
//leaflet
//Vue.component('v-map', Vue2Leaflet.Map);
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index 270e52e..86ee8e2 100644
--- a/src/vue-poc/static/app.html
+++ b/src/vue-poc/static/app.html
@@ -11,7 +11,7 @@
-
+
@@ -38,10 +38,10 @@
-
-
-
-
+
+
+
+
@@ -56,7 +56,7 @@
-
+
diff --git a/src/vue-poc/static/serviceworker.js b/src/vue-poc/static/serviceworker.js
index 74a4433..253dd76 100644
--- a/src/vue-poc/static/serviceworker.js
+++ b/src/vue-poc/static/serviceworker.js
@@ -1,204 +1,36 @@
"use strict";
-importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js');
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
if (workbox) {
console.log(`Yay! Workbox is loaded 🎉`);
+
+ workbox.setConfig({
+ debug: false
+ });
+
+//Shows logs, warnings and errors.
+ workbox.core.setLogLevel(workbox.core.LOG_LEVELS.log);
+
+ workbox.core.setCacheNameDetails({
+ prefix: 'vue-poc',
+ suffix: 'v1',
+ precache: 'install-time',
+ runtime: 'run-time',
+ googleAnalytics: 'ga',
+ });
+
+ workbox.routing.registerRoute(
+ new RegExp('/vue-poc/api/'),
+ workbox.strategies.networkOnly()
+ );
+
+ workbox.routing.registerRoute(
+ new RegExp('.*'),
+ workbox.strategies.staleWhileRevalidate()
+ );
+
} else {
console.log(`Boo! Workbox didn't load 😬`);
};
-console.log('WORKER: executing.');
-/* A version number is useful when updating the worker logic,
- allowing you to remove outdated cache entries during the update.
-*/
-var version = 'v0:4:';
-/* These resources will be downloaded and cached by the service worker
- during the installation process. If any resource fails to be downloaded,
- then the service worker won't be installed either.
-*/
-var offlineFundamentals = [
- 'prof-stat.js',
- '//cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js'
-];
-
-/* The install event fires when the service worker is first installed.
- You can use this event to prepare the service worker to be able to serve
- files while visitors are offline.
-*/
-self.addEventListener("install", function(event) {
- console.log('WORKER: install event in progress.');
- /* Using event.waitUntil(p) blocks the installation process on the provided
- promise. If the promise is rejected, the service worker won't be installed.
- */
- event.waitUntil(
- /* The caches built-in is a promise-based API that helps you cache responses,
- as well as finding and deleting them.
- */
- caches
- /* You can open a cache by name, and this method returns a promise. We use
- a versioned cache name here so that we can remove old cache entries in
- one fell swoop later, when phasing out an older service worker.
- */
- .open(version + 'fundamentals')
- .then(function(cache) {
- /* After the cache is opened, we can fill it with the offline fundamentals.
- The method below will add all resources in `offlineFundamentals` to the
- cache, after making requests for them.
- */
- return cache.addAll(offlineFundamentals);
- })
- .then(function() {
- console.log('WORKER: install completed');
- })
- );
-});
-
-/* The fetch event fires whenever a page controlled by this service worker requests
- a resource. This isn't limited to `fetch` or even XMLHttpRequest. Instead, it
- comprehends even the request for the HTML page on first load, as well as JS and
- CSS resources, fonts, any images, etc.
-*/
-self.addEventListener("fetch", function(event) {
- console.log('WORKER: fetch event in progress.');
-
- /* We should only cache GET requests, and deal with the rest of method in the
- client-side, by handling failed POST,PUT,PATCH,etc. requests.
- */
- if (event.request.method !== 'GET') {
- /* If we don't block the event as shown below, then the request will go to
- the network as usual.
- */
- console.log('WORKER: fetch event ignored.', event.request.method, event.request.url);
- return;
- }
- /* Similar to event.waitUntil in that it blocks the fetch event on a promise.
- Fulfillment result will be used as the response, and rejection will end in a
- HTTP response indicating failure.
- */
- event.respondWith(
- caches
- /* This method returns a promise that resolves to a cache entry matching
- the request. Once the promise is settled, we can then provide a response
- to the fetch request.
- */
- .match(event.request)
- .then(function(cached) {
- /* Even if the response is in our cache, we go to the network as well.
- This pattern is known for producing "eventually fresh" responses,
- where we return cached responses immediately, and meanwhile pull
- a network response and store that in the cache.
-
- Read more:
- https://ponyfoo.com/articles/progressive-networking-serviceworker
- */
- var networked = fetch(event.request)
- // We handle the network request with success and failure scenarios.
- .then(fetchedFromNetwork, unableToResolve)
- // We should catch errors on the fetchedFromNetwork handler as well.
- .catch(unableToResolve);
-
- /* We return the cached response immediately if there is one, and fall
- back to waiting on the network as usual.
- */
- console.log('WORKER: fetch event', cached ? '(cached)' : '(network)', event.request.url);
- return cached || networked;
-
- function fetchedFromNetwork(response) {
- /* We copy the response before replying to the network request.
- This is the response that will be stored on the ServiceWorker cache.
- */
- var cacheCopy = response.clone();
-
- console.log('WORKER: fetch response from network.', event.request.url);
-
- caches
- // We open a cache to store the response for this request.
- .open(version + 'pages')
- .then(function add(cache) {
- /* We store the response for this request. It'll later become
- available to caches.match(event.request) calls, when looking
- for cached responses.
- */
- return cache.put(event.request, cacheCopy);
- })
- .then(function() {
- console.log('WORKER: fetch response stored in cache.', event.request.url);
- });
-
- // Return the response so that the promise is settled in fulfillment.
- return response;
- }
-
- /* When this method is called, it means we were unable to produce a response
- from either the cache or the network. This is our opportunity to produce
- a meaningful response even when all else fails. It's the last chance, so
- you probably want to display a "Service Unavailable" view or a generic
- error response.
- */
- function unableToResolve () {
- /* There's a couple of things we can do here.
- - Test the Accept header and then return one of the `offlineFundamentals`
- e.g: `return caches.match('/some/cached/image.png')`
- - You should also consider the origin. It's easier to decide what
- "unavailable" means for requests against your origins than for requests
- against a third party, such as an ad provider.
- - Generate a Response programmaticaly, as shown below, and return that.
- */
-
- console.log('WORKER: fetch request failed in both cache and network.');
-
- /* Here we're creating a response programmatically. The first parameter is the
- response body, and the second one defines the options for the response.
- */
- return new Response('
Service Unavailable
', {
- status: 503,
- statusText: 'Service Unavailable',
- headers: new Headers({
- 'Content-Type': 'text/html'
- })
- });
- }
- })
- );
-});
-
-/* The activate event fires after a service worker has been successfully installed.
- It is most useful when phasing out an older version of a service worker, as at
- this point you know that the new worker was installed correctly. In this example,
- we delete old caches that don't match the version in the worker we just finished
- installing.
-*/
-self.addEventListener("activate", function(event) {
- /* Just like with the install event, event.waitUntil blocks activate on a promise.
- Activation will fail unless the promise is fulfilled.
- */
- console.log('WORKER: activate event in progress.');
-
- event.waitUntil(
- caches
- /* This method returns a promise which will resolve to an array of available
- cache keys.
- */
- .keys()
- .then(function (keys) {
- // We return a promise that settles when all outdated caches are deleted.
- return Promise.all(
- keys
- .filter(function (key) {
- // Filter by keys that don't start with the latest version prefix.
- return !key.startsWith(version);
- })
- .map(function (key) {
- /* Return a promise that's fulfilled
- when each outdated cache is deleted.
- */
- return caches.delete(key);
- })
- );
- })
- .then(function() {
- console.log('WORKER: activate completed.');
- })
- );
-});