0.1.7 Update Deps - created example folder and put in server and client (v1+ quasar) matched examples. Change scripts in package.json to run examples add @uci/websocket as a dev dep.

master
David Kebler 2019-08-13 09:12:46 -07:00
parent a5d8785ec0
commit cb2f4a613c
70 changed files with 764 additions and 527 deletions

4
.gitignore vendored
View File

@ -1,6 +1,2 @@
/node_modules/ /node_modules/
/coverage/
/syncd/
*.log
/temp/
/archive/ /archive/

View File

@ -2,5 +2,5 @@ tests/
test/ test/
*.test.js *.test.js
testing/ testing/
test-client
archive/ archive/
example/

View File

@ -0,0 +1,55 @@
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
'@vue/standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
globals: {
'ga': true, // Google Analytics
'cordova': true,
'__statics': true,
'process': true
},
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow paren-less arrow functions
'arrow-parens': 'off',
'one-var': 'off',
'import/first': 'off',
'import/named': 'error',
'import/namespace': 'error',
'import/default': 'error',
'import/export': 'error',
'import/extensions': 'off',
'import/no-unresolved': 'off',
'import/no-extraneous-dependencies': 'off',
'prefer-promise-reject-errors': 'off',
// allow console.log during development only
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}

View File

@ -3,6 +3,7 @@
.thumbs.db .thumbs.db
node_modules node_modules
/dist /dist
/src-cordova/node_modules
/src-cordova/platforms /src-cordova/platforms
/src-cordova/plugins /src-cordova/plugins
/src-cordova/www /src-cordova/www
@ -17,4 +18,3 @@ yarn-error.log*
*.ntvs* *.ntvs*
*.njsproj *.njsproj
*.sln *.sln
*.lock

26
example/client/README.md Normal file
View File

@ -0,0 +1,26 @@
# Quasar App (test-client-new)
a test websocket client for uci websocket server
## Install the dependencies
```bash
yarn
```
### Start the app in development mode (hot-code reloading, error reporting, etc.)
```bash
quasar dev
```
### Lint the files
```bash
yarn run lint
```
### Build the app for production
```bash
quasar build
```
### Customize the configuration
See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).

View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@quasar/babel-preset-app'
]
}

View File

@ -0,0 +1,34 @@
{
"name": "test-client-new",
"version": "0.0.1",
"description": "a test websocket client for uci websocket server",
"productName": "Quasar App",
"cordovaId": "org.cordova.quasar.app",
"author": "David Kebler <d@kebler.net>",
"private": true,
"scripts": {
"lint": "eslint --ext .js,.vue src",
"tc": "./node_modules/.bin/quasar dev",
"tc:nas": "WSS='ws://ws.kebler.net' npm run tc"
},
"dependencies": {
"@quasar/extras": "^1.2.0",
"quasar": "^1.0.0"
},
"devDependencies": {
"@quasar/app": "^1.0.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.10.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-vue": "^5.0.0"
},
"engines": {
"node": ">= 8.9.0",
"npm": ">= 5.6.0",
"yarn": ">= 1.6.0"
},
"browserslist": [
"last 1 version, not dead, ie >= 11"
]
}

View File

@ -0,0 +1,182 @@
// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
module.exports = function (ctx) {
return {
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// boot used to be plugins
boot: ['socket'], // uci-consumer-client websocket
css: [
'app.styl'
],
extras: [
// 'ionicons-v4',
// 'mdi-v3',
// 'fontawesome-v5',
// 'eva-icons',
// 'themify',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
// 'roboto-font', // optional, you are not bound to it
'material-icons' // optional, you are not bound to it
],
framework: {
// iconSet: 'ionicons-v4',
// lang: 'de', // Quasar language
// all: true, // --- includes everything; for dev only!
components: [
'QLayout',
'QHeader',
'QDrawer',
'QPageContainer',
'QPage',
'QToolbar',
'QToolbarTitle',
'QBtn',
'QIcon',
'QList',
'QItem',
'QItemSection',
'QItemLabel',
'QInput',
'QSelect',
'QField',
'QFooter',
'QTooltip'
],
directives: [
'Ripple'
],
// Quasar plugins
plugins: [
'Notify'
]
},
supportIE: false,
build: {
// added to support communication with websocket and backend database
env: ctx.dev
// pass environment variable to browser client
? { // so on dev we'll have
DBURL: JSON.stringify(process.env.DBURL || 'ws://localhost:3030'),
WSS: JSON.stringify(process.env.WSS || 'ws://localhost:8090')
}
: { // and on build (production):
DBURL: JSON.stringify(process.env.DBURL || 'ws://switches.kebler.net:3030'),
WSS: JSON.stringify(process.env.WSS || 'ws://relays.kebler.net:8090')
},
scopeHoisting: true,
vueRouterMode: 'history',
// vueCompiler: true,
// gzip: true,
// analyze: true,
// extractCSS: false,
extendWebpack (cfg) {
cfg.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
options: {
formatter: require('eslint').CLIEngine.getFormatter('stylish')
}
})
}
},
devServer: {
// https: true,
// port: 8080,
open: true // opens browser window automatically
},
// animations: 'all', // --- includes all animations
animations: [],
ssr: {
pwa: false
},
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {}, // only for NON InjectManifest
manifest: {
// name: 'Quasar App',
// short_name: 'Quasar App',
// description: 'a test websocket client for uci websocket server',
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3',
icons: [
{
'src': 'statics/icons/icon-128x128.png',
'sizes': '128x128',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-192x192.png',
'sizes': '192x192',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-256x256.png',
'sizes': '256x256',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-384x384.png',
'sizes': '384x384',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-512x512.png',
'sizes': '512x512',
'type': 'image/png'
}
]
}
},
cordova: {
// id: 'org.cordova.quasar.app',
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
electron: {
// bundler: 'builder', // or 'packager'
extendWebpack (cfg) {
// do something with Electron main process Webpack cfg
// chainWebpack also available besides this extendWebpack
},
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
// appId: 'test-client-new'
}
}
}
}

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -1,5 +1,5 @@
// import WebSocket from '@uci/websocket-client' // import WebSocket from '@uci/websocket-client'
import WebSocket from '../../../src' import WebSocket from '../../../../src'
const ws = new WebSocket(process.env.WSS || 'ws://0.0.0.0:8090') const ws = new WebSocket(process.env.WSS || 'ws://0.0.0.0:8090')

View File

@ -0,0 +1,22 @@
// app global css
.q-page-container
background $accent
display: flex;
justify-content: center;
.q-page
width 80%
.q-field
padding 0
.q-input
.q-select
background white
padding 0 .2em
margin .2em
.response
.q-textarea
.q-input
background $secondary
padding 0 1em
.q-item
padding 0
margin 0

View File

@ -0,0 +1,21 @@
// Quasar Stylus Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Stylus variables found in Quasar's source Stylus files.
// Check documentation for full list of Quasar variables
// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
// https://quasar.dev/style/theme-builder
$primary = #006cd6
$secondary = #26A69A
$accent = #278eb0
$positive = #21BA45
$negative = #C10015
$info = #31CCEC
$warning = #F2C037

View File

@ -1,25 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<title><%= htmlWebpackPlugin.options.productName %></title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>"> <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
<title><%= htmlWebpackPlugin.options.productName %></title>
<link rel="icon" href="statics/quasar-logo.png" type="image/x-icon"> <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
<link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
<link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
</head> </head>
<body> <body>
<noscript> <!-- DO NOT touch the following DIV -->
This is your fallback content in case JavaScript fails to load.
</noscript>
<!-- DO NOT touch the following <div> -->
<div id="q-app"></div> <div id="q-app"></div>
<!-- built files will be auto injected here -->
</body> </body>
</html> </html>

View File

@ -0,0 +1,110 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn
flat
dense
round
@click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
>
<q-icon name="menu" />
</q-btn>
<q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer
v-model="leftDrawerOpen"
bordered
content-class="bg-grey-2"
>
<q-list>
<q-item-label header>Essential Links</q-item-label>
<q-item clickable tag="a" target="_blank" href="https://quasar.dev">
<q-item-section avatar>
<q-icon name="school" />
</q-item-section>
<q-item-section>
<q-item-label>Docs</q-item-label>
<q-item-label caption>quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://github.quasar.dev">
<q-item-section avatar>
<q-icon name="code" />
</q-item-section>
<q-item-section>
<q-item-label>Github</q-item-label>
<q-item-label caption>github.com/quasarframework</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev">
<q-item-section avatar>
<q-icon name="chat" />
</q-item-section>
<q-item-section>
<q-item-label>Discord Chat Channel</q-item-label>
<q-item-label caption>chat.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
<q-item-section avatar>
<q-icon name="record_voice_over" />
</q-item-section>
<q-item-section>
<q-item-label>Forum</q-item-label>
<q-item-label caption>forum.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://twitter.quasar.dev">
<q-item-section avatar>
<q-icon name="rss_feed" />
</q-item-section>
<q-item-section>
<q-item-label>Twitter</q-item-label>
<q-item-label caption>@quasarframework</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://facebook.quasar.dev">
<q-item-section avatar>
<q-icon name="public" />
</q-item-section>
<q-item-section>
<q-item-label>Facebook</q-item-label>
<q-item-label caption>@QuasarFramework</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import { openURL } from 'quasar'
export default {
name: 'MyLayout',
data () {
return {
leftDrawerOpen: this.$q.platform.is.desktop
}
},
methods: {
openURL
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,38 @@
<template>
<q-layout view="hHh lpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<q-toolbar-title>
Title
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-page-container>
<router-view />
</q-page-container>
<q-footer elevated class="bg-grey-8 text-white">
<q-toolbar>
<q-toolbar-title>
Title
</q-toolbar-title>
</q-toolbar>
</q-footer>
</q-layout>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lang="stylus">
</style>

View File

@ -14,3 +14,9 @@
>Go back</q-btn> >Go back</q-btn>
</div> </div>
</template> </template>
<script>
export default {
name: 'Error404'
}
</script>

View File

@ -0,0 +1,148 @@
<template>
<q-page padding class="" >
<q-list class="">
<q-item class="">
<q-item-section side>
<q-btn color="secondary" round @click="send" icon="send">
<q-tooltip>
Click to send this command and payload to the sever
</q-tooltip>
</q-btn>
</q-item-section>
<q-item-section >
<q-item-label>Command</q-item-label>
<!-- <q-input label="Enter a . delimited command to send to server" v-model="cmd" />
-->
<q-select
v-model="cmd"
:options="commands"
label="Choose An Available Command to Send"
emit-value
></q-select>
</q-item-section>
</q-item>
<q-item><div class="col">Property</div>:<div class="col">Value</div></q-item>
<q-item><q-input class="col" readonly v-model="key[0]" />:<q-input dense class="col" v-model="value[0]" /></q-item>
<q-item><q-input class="col" readonly v-model="key[1]" />:<q-input class="col" v-model="value[1]" /></q-item>
<q-item><q-input class="col" label="a custom property in payload" v-model="key[2]" />:<q-input class="col" v-model="value[2]" /></q-item>
</q-list>
<!-- <q-btn :class="switches[0]" @click="toggle(1)">Switch 1</q-btn>
<q-btn :class="switches[1]" @click="toggle(2)">Switch 2</q-btn>
<q-btn :class="switches[2]" @click="toggle(3)">Switch 3</q-btn>
<q-btn :class="switches[3]" @click="toggle(4)">Switch 4</q-btn> -->
<q-list class="response">
<q-input v-model="packet" readonly label="Sending Packet:" />
<q-input v-model="resMsg" readonly label="Socket/Server Response Message:" />
<q-input v-model="resPayload" readonly label="Socket/Server Response Payload:" />
<q-input v-model="pushed" readonly type="textarea" label="Pushed from Socket/Server:" />
</q-list>
</q-page>
</template>
<script>
import btc from 'better-try-catch'
// import socket from '../socket.js'
export default {
data () {
return {
cmd: 'on',
commands: [
{
label: 'echo',
value: 'echo',
description: 'echo',
icon: 'no'
},
{
label: 'on',
value: 'on',
description: 'turn on something',
icon: 'mdi:lightbulb'
},
{
label: 'off',
value: 'off',
description: 'turn off something',
icon: 'lightbulb-off'
},
{
label: 'bogus',
value: 'bogus',
description: 'turn off something',
icon: 'no'
}
],
packet: '',
resMsg: '',
resPayload: '',
key: ['id', 'brightness'],
value: ['not set', 0],
pushed: '',
switches: ['off', 'off', 'off', 'off']
}
},
methods: {
async send () {
this.clear()
let packet = {
cmd: this.cmd,
[this.key[0]]: this.value[0],
[this.key[1]]: this.value[1],
[this.key[2]]: this.value[2]
}
this.packet = JSON.stringify(packet)
let [err, res] = await btc(this.$socket.send)(packet)
if (err) {
console.log('error ', err)
this.$q.notify({
color: 'negative',
message: 'Error in repsonse of packet send'
})
} else {
delete res._header
this.resMsg = res.msg
this.resPayload = JSON.stringify(res.payload)
}
},
clear () {
this.pushed = ''
this.resMsg = ''
this.resPayload = ''
this.packet = ''
}
},
async mounted () {
this.$q.notify({
color: 'info',
message: `Client connecting to', ${this.$socket.url}`
})
let [err] = await btc(this.$socket.connect)()
if (err) {
this.$q.notify({
color: 'negative',
message: 'Websocket Server Not Available'
})
} else {
this.$q.notify({ color: 'positive', message: 'Ready' })
this.$socket.listen()
this.clear()
}
this.$socket.on('pushed', packet => {
delete packet._header
this.pushed = JSON.stringify(packet)
})
}
}
</script>
<style lang="stylus">
.on
background $positive
.off
background grey
</style>

View File

@ -0,0 +1,14 @@
<template>
<q-page class="flex flex-center">
<img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
</q-page>
</template>
<style>
</style>
<script>
export default {
name: 'PageIndex'
}
</script>

View File

@ -0,0 +1,26 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
/*
* If not building with SSR mode, you can
* directly export the Router instantiation
*/
export default function (/* { store, ssrContext } */) {
const Router = new VueRouter({
scrollBehavior: () => ({ x: 0, y: 0 }),
routes,
// Leave these as is and change from quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE
})
return Router
}

View File

@ -0,0 +1,20 @@
const routes = [
{
path: '/',
component: () => import('layouts/default.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue') }
]
}
]
// Always leave this as last one
if (process.env.MODE !== 'ssr') {
routes.push({
path: '*',
component: () => import('pages/Error404.vue')
})
}
export default routes

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 700 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1240" height="1240"><path d="M585.5 119.157c-24.392 1.775-55.454 6.582-80.743 12.495l-10.743 2.512-.257 65.522-.257 65.523-12.5 4.911c-24.453 9.608-54.301 25.574-75.692 40.488-14.402 10.041-29.52 22.393-29.025 23.713.243.648 1.692 5.443 3.22 10.655 11.868 40.48 32.267 84.639 55.173 119.442l8.503 12.917 6.683-12.417c23.502-43.672 46.807-74.722 84.066-112.002 25.738-25.754 47.825-44.173 78.072-65.109 33.386-23.108 77-46.934 117.761-64.332l16.261-6.94-.261-40.974-.261-40.973-4.5-1.319c-8.958-2.625-43.862-9.169-59.5-11.155-31.749-4.032-66.513-5.102-96-2.957M734.906 277.25c-22.472 24.627-42.334 51.05-58.443 77.75-5.099 8.45-21.464 39.014-21.462 40.083 0 .229 14.287.445 31.75.479 33.627.065 45.612 1.017 75.303 5.978 85.759 14.331 172.63 53.33 254.813 114.394l15.221 11.31 25.706-14.808c14.138-8.144 30.112-17.312 35.497-20.372l9.79-5.564-.61-3.5c-1.096-6.29-14.149-44.185-19.977-58-17.139-40.622-35.248-72.077-61.599-107-11.686-15.488-30.818-37.844-39.039-45.62l-4.356-4.119-55 31.858c-30.25 17.522-55.747 32.106-56.66 32.408-1.079.358-4.75-1.93-10.5-6.543-20.084-16.116-40.545-29.274-64.607-41.547C777.601 277.739 748.585 265 746.461 265c-.207 0-5.407 5.512-11.555 12.25m-483.911 2.889c-52.729 57.452-89.592 121.745-111.254 194.044l-3.501 11.683 56.707 32.735 56.706 32.734-1.326 7.583c-4.069 23.272-5.894 57.248-4.381 81.582.926 14.898 4.591 46.254 5.526 47.28.898.986 34.289 8.122 48.028 10.264 28.958 4.515 64.488 6.499 90.867 5.074 10.377-.56 19.07-1.222 19.319-1.471.248-.248-2.035-4.306-5.074-9.017-37.96-58.843-62.879-131.564-72.005-210.13-3.219-27.711-3.869-43.866-3.307-82.149.534-36.338 1.631-53.441 5.12-79.832.798-6.039 1.368-11.04 1.266-11.112-.102-.073-15.261-8.815-33.686-19.427-18.425-10.613-34.464-19.919-35.642-20.682-2.027-1.312-2.739-.735-13.363 10.841M606.5 522.653c-25.669 4.073-49.712 18.357-64.437 38.283-12.956 17.531-18.769 33.768-19.713 55.064-1.087 24.502 5.901 45.6 21.676 65.452 13.091 16.473 32.315 28.634 53.974 34.141 10.222 2.599 34.507 2.629 44 .054 24.469-6.637 42.328-18.418 56.253-37.107 8.576-11.511 13.261-21.347 17.403-36.54 2.782-10.202 2.502-34.762-.523-46-4.654-17.286-13.403-32.422-26.057-45.076-18.639-18.639-40.322-27.911-66.576-28.47-7.15-.152-14.35-.062-16 .199m243.676 14.396c-9.529.421-17.487.928-17.685 1.126-.198.198 3.43 6.427 8.061 13.843 9.872 15.805 25.076 45.255 32.515 62.982 17.89 42.628 30.726 92.267 36.33 140.5 5.776 49.707 5.41 110.661-.955 158.936-.793 6.015-1.442 12.144-1.442 13.62 0 2.476 2.712 4.248 35.027 22.888 19.264 11.113 35.44 20.059 35.946 19.88.506-.178 5.205-4.957 10.444-10.619 40.968-44.285 71.417-91.321 94.113-145.385 7.518-17.906 21.003-57.989 20.208-60.062-.302-.785-25.229-15.681-55.393-33.103-30.165-17.421-55.37-32.011-56.011-32.422-.843-.54-.908-2.132-.233-5.74 6.158-32.924 6.854-78.418 1.771-115.688l-2.141-15.695-10.616-2.49c-29.261-6.862-56.983-10.974-81.615-12.105-25.026-1.149-31.483-1.212-48.324-.466M173.193 732.877c-18.869 10.91-34.771 20.301-35.338 20.868-.708.708.416 5.685 3.59 15.893 22.372 71.955 57.534 133.26 108.468 189.112 6.144 6.737 11.715 12.235 12.379 12.217.665-.019 26.402-14.607 57.195-32.419l55.987-32.386 5.013 4.231c28.719 24.239 69.849 48.122 106.705 61.961l6.691 2.512 11.972-13.183c14.282-15.727 20.74-23.512 31.675-38.183 15.78-21.171 34.174-51.134 42.972-70l4.197-9-32.6-.072c-33.662-.073-44.236-.877-72.599-5.517-52.086-8.52-104.017-26.026-157-52.926-34.47-17.5-69.941-39.589-100.682-62.699-7.525-5.657-13.825-10.277-14-10.266-.175.011-15.756 8.946-34.625 19.857M791.52 772.25c-22.058 42.207-48.977 78.371-85.449 114.795-38.124 38.072-77.236 67.416-127.546 95.69-17.969 10.099-51.743 26.686-70.775 34.76l-13.75 5.834v82.327l13.75 3.194c23.233 5.395 43.059 8.689 68.25 11.336 16.09 1.691 73.361 1.705 89 .021 25.772-2.774 47.439-6.375 68.25-11.344l12.75-3.045V974.95l2.75-1.001c20.982-7.643 52.157-22.755 69.847-33.859 18.882-11.852 45.274-31.559 45.357-33.868.102-2.831-15.119-46.644-20.841-59.99-7.171-16.726-16.651-35.878-24.655-49.808-6.712-11.68-20.708-33.401-21.531-33.415-.315-.005-2.748 4.154-5.407 9.241" fill="#42a5f5" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

36
example/server.js Normal file
View File

@ -0,0 +1,36 @@
import Socket from '@uci/websocket'
// ws server to example ws client
async function packetProcess (packet) {
return new Promise(resolve => {
let res = {}
switch (packet.cmd) {
case 'echo':
res.msg = 'Echoing Back any payload propery'
res.payload = packet.payload
this.push({msg:'pushing echo to to any clients also', res:res})
break
case 'on':
case 'off':
res.msg = `Command turn ${packet.cmd} was sent for light id: ${packet.id ||'none!'} of brightness: ${packet.brightness || 0}`
res.payload = {switch:packet.cmd}
this.push(res)
break
default:
res.msg = `command ${packet.cmd} was unknown at server echo payload back`
res.payload = {}
}
resolve(res)
})
}
// let test = new Test()
let test = new Socket({ port: 8090, clientTracking: true })
test.registerPacketProcessor(packetProcess)
;(async () => {
console.log(await test.create())
})().catch(err => {
console.error('FATAL: UNABLE TO START SYSTEM!\n', err)
})

View File

@ -1,10 +1,11 @@
{ {
"name": "@uci/websocket-client", "name": "@uci/websocket-client",
"version": "0.1.6", "version": "0.1.7",
"description": "JSON packet browser client over web socket", "description": "JSON packet browser client over web socket",
"main": "src", "main": "src",
"scripts": { "scripts": {
"cd": "cd test-client && quasar dev" "example": "cd ./example/client && npm run tc",
"example:server": "node -r esm ./example/server.js"
}, },
"author": "David Kebler", "author": "David Kebler",
"license": "MIT", "license": "MIT",
@ -26,11 +27,14 @@
"url": "https://github.com/uCOMmandIt/websocket-client/issues" "url": "https://github.com/uCOMmandIt/websocket-client/issues"
}, },
"homepage": "https://github.com/uCOMmandIt/websocket-client#readme", "homepage": "https://github.com/uCOMmandIt/websocket-client#readme",
"devDependencies": {}, "devDependencies": {
"@uci/websocket": "^0.3.7",
"esm": "^3.2.25"
},
"dependencies": { "dependencies": {
"auto-bind": "^2.0.0", "auto-bind": "^2.1.0",
"await-to-js": "^2.1.1", "await-to-js": "^2.1.1",
"better-try-catch": "^0.6.2", "better-try-catch": "^0.6.2",
"eventemitter3": "^3.1.0" "eventemitter3": "^4.0.0"
} }
} }

View File

@ -1,28 +0,0 @@
{
"presets": [
[
"@babel/preset-env", {
"modules": false,
"loose": false,
"useBuiltIns": "usage"
}
],
[
"@babel/preset-stage-2", {
"modules": false,
"loose": false,
"useBuiltIns": true,
"decoratorsLegacy": true
}
]
],
"plugins": [
[
"@babel/transform-runtime", {
"polyfill": false,
"regenerator": false
}
]
],
"comments": false
}

View File

@ -1,44 +0,0 @@
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: ['vue'],
globals: {
ga: true, // Google Analytics
cordova: true,
__statics: true
},
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
'space-before-function-paren': ['error', 'always'],
// allow paren-less arrow functions
'arrow-parens': 0,
'one-var': 0,
'import/first': 0,
'import/named': 2,
'import/namespace': 2,
'import/default': 2,
'import/export': 2,
'import/extensions': 0,
'import/no-unresolved': 0,
'import/no-extraneous-dependencies': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}

View File

@ -1,3 +0,0 @@
# Quasar App
> WIP

View File

@ -1,42 +0,0 @@
{
"name": "client",
"version": "1.0.0",
"description": "simple web socket client tester",
"productName": "client",
"cordovaId": "org.cordova.quasar.app",
"author": "David Kebler <d@kebler.net>",
"private": true,
"scripts": {
"lint": "eslint --ext .js,.vue src",
"tcw": "WSS='ws://pine64.kebler.net:8090' quasar dev",
"tc": "quasar dev"
},
"dependencies": {
"@uci/websocket-client": "^0.1.4",
"axios": "^0.18.0",
"better-try-catch": "^0.6.2"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"eslint": "^4.18.2",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.3.0",
"quasar-cli": "^0.17.22",
"strip-ansi": "=3.0.1"
},
"engines": {
"node": ">= 8.9.0",
"npm": ">= 5.6.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}

View File

@ -1,139 +0,0 @@
// Configuration for your app
module.exports = function (ctx) {
return {
// app plugins (/src/plugins)
plugins: ['socket'],
css: ['app.styl'],
extras: [
ctx.theme.mat ? 'roboto-font' : null,
'material-icons',
ctx.theme.ios ? 'ionicons' : null
// 'mdi',
// 'fontawesome'
],
supportIE: false,
build: {
env: ctx.dev
// pass environment variable to browser client
? { // so on dev we'll have
DBURL: JSON.stringify(process.env.DBURL),
// DBURL: JSON.stringify('ws://192.168.0.231:3030'),
WSS: JSON.stringify(process.env.WSS)
}
: { // and on build (production):
DBURL: JSON.stringify('ws://192.168.0.231:3030'),
WSS: JSON.stringify('ws://relays2.kebler.net:8090')
},
scopeHoisting: true,
vueRouterMode: 'history',
// vueCompiler: true,
// gzip: true,
// analyze: true,
// extractCSS: false,
extendWebpack (cfg) {
cfg.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules|quasar)/
})
}
},
devServer: {
// https: true,
// port: 8080,
open: true // opens browser window automatically
},
// framework: 'all' --- includes everything; for dev only!
framework: {
components: [
'QLayout',
'QLayoutHeader',
'QLayoutDrawer',
'QPageContainer',
'QPage',
'QToolbar',
'QToolbarTitle',
'QBtn',
'QIcon',
'QList',
'QListHeader',
'QItem',
'QItemMain',
'QItemSide',
'QInput',
'QField'
],
directives: ['Ripple'],
// Quasar plugins
plugins: ['Notify'],
iconSet: ctx.theme.mat ? 'material-icons' : 'ionicons'
},
// animations: 'all' --- includes all animations
animations: [],
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {},
manifest: {
// name: 'Quasar App',
// short_name: 'Quasar-PWA',
// description: 'Best PWA App in town!',
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3',
icons: [
{
src: 'statics/icons/icon-128x128.png',
sizes: '128x128',
type: 'image/png'
},
{
src: 'statics/icons/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'statics/icons/icon-256x256.png',
sizes: '256x256',
type: 'image/png'
},
{
src: 'statics/icons/icon-384x384.png',
sizes: '384x384',
type: 'image/png'
},
{
src: 'statics/icons/icon-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
}
},
cordova: {
// id: 'org.cordova.quasar.app'
},
electron: {
// bundler: 'builder', // or 'packager'
extendWebpack (cfg) {
// do something with Electron process Webpack cfg
},
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Window only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
// appId: 'quasar-app'
}
}
}
}

View File

@ -1 +0,0 @@
// app global css

View File

@ -1,25 +0,0 @@
// App Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Stylus variables found in Quasar's source Stylus files. Setting
// variables before Quasar's Stylus will use these variables rather than
// Quasar's default Stylus variable values. Stylus variables specific
// to the themes belong in either the variables.ios.styl or variables.mat.styl files.
// Check documentation for full list of Quasar variables
// App Shared Color Variables
// --------------------------------------------------
// It's highly recommended to change the default colors
// to match your app's branding.
$primary = #027be3
$secondary = #26A69A
$tertiary = #555
$neutral = #E0E1E2
$positive = #21BA45
$negative = #DB2828
$info = #31CCEC
$warning = #F2C037

View File

@ -1,7 +0,0 @@
// App Shared Variables
// --------------------------------------------------
// Shared Stylus variables go in the common.variables.styl file
@import 'common.variables'
// iOS only Quasar variables overwrites
// -----------------------------------------

View File

@ -1,7 +0,0 @@
// App Shared Variables
// --------------------------------------------------
// Shared Stylus variables go in the common.variables.styl file
@import 'common.variables'
// Material only Quasar variables overwrites
// -----------------------------------------

View File

@ -1,38 +0,0 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-layout-header>
<q-toolbar
color="primary"
:glossy="$q.theme === 'mat'"
:inverted="$q.theme === 'ios'"
>
<q-toolbar-title>
UCI Web Socket
<div slot="subtitle">web socket tester</div>
</q-toolbar-title>
</q-toolbar>
</q-layout-header>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import { openURL } from 'quasar'
export default {
name: 'LayoutDefault',
data () {
return {
leftDrawerOpen: this.$q.platform.is.desktop
}
},
methods: {
openURL
}
}
</script>
<style>
</style>

View File

@ -1,125 +0,0 @@
<template>
<q-page padding class="" >
<q-list class="">
<q-field
label="Command"
orientation="vertical"
>
<q-item><q-input inverted color="secondary" v-model="cmd" /><q-btn class="row" color="green-8" round @click="send" icon="send" /></q-item>
</q-field>
<q-field class=""
label="Payload"
orientation="vertical"
>
<q-item><div class="col">Key</div>:<div class="col">Value</div></q-item>
<q-item><q-input class="col" inverted color="secondary" v-model="key[0]" />:<q-input class="col" inverted color="secondary" v-model="value[0]" /></q-item>
<q-item><q-input class="col" inverted color="secondary" v-model="key[1]" />:<q-input class="col" inverted color="secondary" v-model="value[1]" /></q-item>
<q-item><q-input class="col" inverted color="secondary" v-model="key[2]" />:<q-input class="col" inverted color="secondary" v-model="value[2]" /></q-item>
</q-field>
</q-list>
<q-btn :class="switches[0]" @click="toggle(1)">Switch 1</q-btn>
<q-btn :class="switches[1]" @click="toggle(2)">Switch 2</q-btn>
<q-btn :class="switches[2]" @click="toggle(3)">Switch 3</q-btn>
<q-btn :class="switches[3]" @click="toggle(4)">Switch 4</q-btn>
<q-input class="row" rows="2" v-model="packet" readonly inverted type="textarea" float-label="Sending Packet:" />
<q-input class="row" rows="2" v-model="response" readonly inverted color="secondary" type="textarea" float-label="Socket/Server Response:" />
<q-input class="row" rows="2" v-model="respayload" readonly inverted color="secondary" type="textarea" float-label="Socket/Server Response Payload:" />
<q-input class="row" rows="2" v-model="pushed" readonly inverted color="tertiary" type="textarea" float-label="Pushed from Socket/Server:" />
</q-page>
</template>
<script>
import btc from 'better-try-catch'
// import socket from '../socket.js'
export default {
data () {
return {
cmd: '',
packet: '',
response: '',
respayload: {},
key: [],
value: [],
pushed: '',
switches: ['off', 'off', 'off', 'off']
}
},
methods: {
async send () {
let packet = {
cmd: this.cmd,
[this.key[0]]: this.value[0],
[this.key[1]]: this.value[1],
[this.key[2]]: this.value[2]
}
this.packet = JSON.stringify(packet)
let [err, res] = await btc(this.$socket.send)(packet)
if (err) console.log('error ', err)
else {
delete res._header
this.response = res.log
delete res.Response
this.packet_process(res)
this.respayload = JSON.stringify(res)
}
},
setcolor (id) {
return this.switches[id]
},
packet_process (packet) {
if (packet.cmd === 'switch/status') {
this.switches[packet.id - 1] = packet.status
this.pushed = ''
}
},
async toggle (id) {
let packet = {
cmd: 'switch/toggle',
id: id,
status: this.switches[id - 1]
}
this.packet = JSON.stringify(packet)
let [err, res] = await btc(this.$socket.send)(packet)
if (err) console.log('error ', err)
else {
delete res._header
this.response = JSON.stringify(res)
}
}
},
async mounted () {
console.log('mounting')
this.$q.notify({
type: 'info',
message: `Client connecting to', ${this.$socket.url}`
})
let [err] = await btc(this.$socket.connect)()
if (err) {
this.$q.notify({
type: 'negative',
message: 'Websocket Server Not Available'
})
} else {
this.$q.notify({ type: 'positive', message: 'Ready' })
this.$socket.listen()
}
this.$socket.on('pushed', packet => {
delete packet._header
this.packet_process(packet)
this.pushed = JSON.stringify(packet)
})
}
}
</script>
<style lang="stylus">
@import '~variables'
.on
background $positive
.off
background grey
</style>

View File

@ -1,24 +0,0 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
const Router = new VueRouter({
/*
* NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode
*
* When going with "history" mode, please also make sure "build.publicPath"
* is set to something other than an empty string.
* Example: '/' instead of ''
*/
// Leave as is and change from quasar.conf.js instead!
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE,
scrollBehavior: () => ({ y: 0 }),
routes
})
export default Router

View File

@ -1,15 +0,0 @@
export default [
{
path: '/',
component: () => import('layouts/default'),
children: [
{ path: '', component: () => import('pages/index') }
]
},
{ // Always leave this as last one
path: '*',
component: () => import('pages/404')
}
]

View File

@ -1,6 +0,0 @@
// import WebSocket from '@uci/websocket-client'
import WebSocket from '../../browser-client'
const ws = new WebSocket(process.env.WSS || 'ws://0.0.0.0:8090')
export default ws

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB