mirror of
https://github.com/Rolands-Laucis/Socio.git
synced 2026-05-15 14:15:57 -06:00
update demos
This commit is contained in:
Rolands
parent
cb7ac2428b
commit
aa7d41db2d
9 changed files with 88 additions and 86 deletions
|
|
@ -1,11 +1,4 @@
|
|||
//Errare humanum est, perseverare diabolicum. - To err is human; to persist in it - diabolial. /Lucius Annaeus Seneca/
|
||||
|
||||
//import the socio lib. NB! here i am doing it as a dynamic import, bcs i also develop the lib here and its automatic this way and demo always works. You should do a regular import at the top level like other imports.
|
||||
try {
|
||||
const { SocioClient } = await import("../../core/core-client")
|
||||
} catch (e) {
|
||||
const { SocioClient } = await import('/core-client.js')
|
||||
}
|
||||
import { SocioClient } from './core-client.js'
|
||||
|
||||
//instantiate the Socio Client from lib on the expected websocket port and wait for it to connect
|
||||
//NB! use wss secure socket protocol and use the ./core/Secure class to encrypt these queries in PROD!
|
||||
|
|
|
|||
68
demos/basic/package-lock.json
generated
68
demos/basic/package-lock.json
generated
|
|
@ -1,19 +1,35 @@
|
|||
{
|
||||
"name": "basic",
|
||||
"name": "Socio demo - Basic",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "basic",
|
||||
"name": "Socio demo - Basic",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@rolands/log": "^1.1.0",
|
||||
"@rolands/log": "^1.1.1",
|
||||
"express": "^4.18.2",
|
||||
"sequelize": "^6.25.3",
|
||||
"socio": "^0.0.1",
|
||||
"sqlite3": "^5.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"socio": "file:../../core"
|
||||
}
|
||||
},
|
||||
"../../core": {
|
||||
"version": "0.3.13",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@rolands/log": "^1.1.1",
|
||||
"@types/node": "^18.11.17",
|
||||
"magic-string": "^0.26.7",
|
||||
"ws": "^8.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/ws": "^8.5.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@gar/promisify": {
|
||||
|
|
@ -1643,13 +1659,8 @@
|
|||
}
|
||||
},
|
||||
"node_modules/socio": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/socio/-/socio-0.0.1.tgz",
|
||||
"integrity": "sha512-YjOk596DV092CL1mIsS3moKUQ0W7Ge4RM5L2NT/PbimcuuWYQy3ZcjIlaAIMIcxlwA7Dm9nwyXD26wadKvNrWA==",
|
||||
"dependencies": {
|
||||
"@rolands/log": "^1.0.1",
|
||||
"ws": "^8.9.0"
|
||||
}
|
||||
"resolved": "../../core",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/socks": {
|
||||
"version": "2.7.1",
|
||||
|
|
@ -1935,26 +1946,6 @@
|
|||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.10.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.10.0.tgz",
|
||||
"integrity": "sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": "^5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/yallist": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
||||
|
|
@ -3190,11 +3181,12 @@
|
|||
"optional": true
|
||||
},
|
||||
"socio": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/socio/-/socio-0.0.1.tgz",
|
||||
"integrity": "sha512-YjOk596DV092CL1mIsS3moKUQ0W7Ge4RM5L2NT/PbimcuuWYQy3ZcjIlaAIMIcxlwA7Dm9nwyXD26wadKvNrWA==",
|
||||
"version": "file:../../core",
|
||||
"requires": {
|
||||
"@rolands/log": "^1.0.1",
|
||||
"@rolands/log": "^1.1.1",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/ws": "^8.5.3",
|
||||
"magic-string": "^0.26.7",
|
||||
"ws": "^8.9.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -3416,12 +3408,6 @@
|
|||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
||||
},
|
||||
"ws": {
|
||||
"version": "8.10.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.10.0.tgz",
|
||||
"integrity": "sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==",
|
||||
"requires": {}
|
||||
},
|
||||
"yallist": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@
|
|||
"@rolands/log": "^1.1.1",
|
||||
"express": "^4.18.2",
|
||||
"sequelize": "^6.25.3",
|
||||
"socio": "^0.0.1",
|
||||
"sqlite3": "^5.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"socio": "file:../../core"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// import {SocioServer} from '../../core/core.js' //i use this locally
|
||||
import { SocioServer } from 'socio/core.js' //for using the lib as a download from npm
|
||||
import { SocioServer } from 'socio/dist/core.js' //for using the lib as a download from npm
|
||||
|
||||
import express from 'express'
|
||||
import { Sequelize } from 'sequelize';
|
||||
import { log, done, setPrefix, setShowTime } from '@rolands/log'; setPrefix('EXPRESS'); setShowTime(false);
|
||||
import { log, done, setPrefix, setShowTime } from '@rolands/log'; setPrefix('Express'); setShowTime(false);
|
||||
|
||||
//constants
|
||||
const server_port = 5000, ws_port = 3000 //can be set up that the websockets run on the same port as the http server
|
||||
|
|
@ -33,7 +33,7 @@ import { fileURLToPath } from 'url';
|
|||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const app = express()
|
||||
app.use("", express.static(__dirname));
|
||||
app.use("/", express.static(__dirname + "\\..\\..\\core"));
|
||||
app.use("/", express.static(__dirname + "\\..\\..\\core\\dist"));
|
||||
|
||||
app.listen(server_port, () => {
|
||||
done(`Express webserver listening on port`, server_port, `http://localhost:${server_port}/`)
|
||||
|
|
|
|||
|
|
@ -35,4 +35,13 @@ h2,.h2{font-size: 46.88px;}
|
|||
h3,.h3{font-size: 30px;}
|
||||
h4, .h4,a{font-size: 24px;}
|
||||
h5,.h5{font-size: 19.2px;}
|
||||
h6,.h6{font-size: 15.36px; font-weight: 400;}
|
||||
h6,.h6{font-size: 15.36px; font-weight: 400;}
|
||||
|
||||
a {
|
||||
color: $acc2;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<script>
|
||||
export let style='', tb=true;
|
||||
export let style='';
|
||||
</script>
|
||||
|
||||
<div {style} class="bloom_wrap" class:tb>
|
||||
<div {style} class="bloom_wrap">
|
||||
<slot></slot>
|
||||
<div class="bloom">
|
||||
<slot></slot>
|
||||
|
|
@ -11,11 +11,22 @@
|
|||
|
||||
<style lang="scss">
|
||||
.bloom_wrap{
|
||||
--b: #{$bloom};
|
||||
--b: #{$bloom_thin};
|
||||
--b_h: #{$bloom_thin};
|
||||
--s: 0.3;
|
||||
--s_h: 0.3;
|
||||
--c: 1.2;
|
||||
--c_h: 1.2;
|
||||
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
&:hover{
|
||||
--b: var(--b_h) !important;
|
||||
--s: var(--s_h) !important;
|
||||
--c: var(--c_h) !important;
|
||||
}
|
||||
}
|
||||
.tb{--b:#{$bloom_thin};}
|
||||
.bloom{
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
|
|
@ -23,6 +34,9 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
filter: brightness(0.3) blur(var(--b));
|
||||
|
||||
transition: $trans;
|
||||
|
||||
filter: brightness(var(--s)) contrast(var(--c)) blur(var(--b));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,10 @@
|
|||
<script lang="ts">
|
||||
import Bloom from "./bloom.svelte";
|
||||
|
||||
export let style:string='';
|
||||
</script>
|
||||
|
||||
<Bloom>
|
||||
<button on:click {style}>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</Bloom>
|
||||
<button on:click {style}>
|
||||
<slot></slot>
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
button{
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
<nav>
|
||||
<h1>Socio</h1>
|
||||
<Bloom style="--b:6px;"><a href="https://github.com/Rolands-Laucis/Socio" target="_blank">github</a></Bloom>
|
||||
<Bloom style="--b:6px;"><a href="https://www.npmjs.com/package/socio" target="_blank">npm</a></Bloom>
|
||||
<Bloom style="--b_h:6px; --s_h:0.6;"><a href="https://github.com/Rolands-Laucis/Socio" target="_blank">github</a></Bloom>
|
||||
<Bloom style="--b_h:6px; --s_h:0.6;"><a href="https://www.npmjs.com/package/socio" target="_blank">npm</a></Bloom>
|
||||
</nav>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -14,13 +14,4 @@
|
|||
align-items:baseline;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
a{
|
||||
color: $acc2;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover{
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -36,7 +36,15 @@
|
|||
<Nav></Nav>
|
||||
<section>
|
||||
{#if ready}
|
||||
<h6 class="darker_text">client ID: {sc.client_id}</h6>
|
||||
<div class="horiz">
|
||||
<h4 class="horiz" style="gap:6px;">
|
||||
<Bloom style="--b_h:6px; --s_h:0.6;"><a href="https://kit.svelte.dev/" target="_blank" class="acc2 norm">SvelteKit</a></Bloom>
|
||||
+
|
||||
<Bloom style="--b_h:6px; --s_h:0.6;"><a href="https://vitejs.dev/" target="_blank" class="acc1 norm">Vite</a></Bloom>
|
||||
demo.
|
||||
</h4>
|
||||
<h6 class="darker_text">client ID: {sc.client_id}</h6>
|
||||
</div>
|
||||
<div class="horiz">
|
||||
<h6 class="darker_text bold">single sql query:</h6>
|
||||
<h4>SELECT 42+69 AS RESULT; = </h4>
|
||||
|
|
@ -60,12 +68,14 @@
|
|||
</div>
|
||||
|
||||
<div class="insert">
|
||||
<Button style="width:100%;" on:click={async () => await sc.query("INSERT INTO users (name, num) VALUES(:name, :num);--socio", insert_fields)}>
|
||||
INSERT INTO users (name, num) VALUES("<span class="acc1 bold">{insert_fields.name}</span>", <span class="acc1 bold">{insert_fields.num || 0}</span>);
|
||||
</Button>
|
||||
<Bloom style="--s_h:0.8;--b_h:8px;--c_h:1;">
|
||||
<Button style="width:100%;" on:click={async () => await sc.query("INSERT INTO users (name, num) VALUES(:name, :num);--socio", insert_fields)}>
|
||||
INSERT INTO users (name, num) VALUES("<span class="acc1 norm">{insert_fields.name}</span>", <span class="acc1 norm">{insert_fields.num || 0}</span>);
|
||||
</Button>
|
||||
</Bloom>
|
||||
<div class="inputs">
|
||||
<input type="text" bind:value={insert_fields.name}>
|
||||
<input type="number" min="0" bind:value={insert_fields.num}>
|
||||
<Bloom style="--b:0px;--b_h:6px;--s:0;--s_h:0.4;"><input type="text" bind:value={insert_fields.name}></Bloom>
|
||||
<Bloom style="--b:0px;--b_h:6px;--s:0;--s_h:0.4;"><input type="number" min="0" bind:value={insert_fields.num}></Bloom>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -83,10 +93,10 @@
|
|||
|
||||
<div class="color">
|
||||
<h6 class="darker_text bold">subscribed server prop:</h6>
|
||||
<Bloom>
|
||||
<Bloom style="--s_h:0.8;--b_h:8px;--c_h:1;">
|
||||
<Button on:click={async () => await sc.setProp('color',color_prop)}>SET</Button>
|
||||
</Bloom>
|
||||
<input type="text" maxlength="7" bind:value={color_prop}>
|
||||
<Bloom style="--b:0px;--b_h:6px;--s:0;--s_h:0.4;"><input type="text" maxlength="7" bind:value={color_prop}></Bloom>
|
||||
<Bloom>
|
||||
<div class="color_box" style="--c:{color_prop};">
|
||||
<h4>{color_prop}</h4>
|
||||
|
|
@ -109,6 +119,7 @@
|
|||
.darker_text{color: $gray3;}
|
||||
.darker_text{color: $gray2;}
|
||||
.bold{font-weight: 700;}
|
||||
.norm{font-weight: 400;}
|
||||
.thin{font-weight: 300;}
|
||||
|
||||
.horiz{
|
||||
|
|
@ -143,7 +154,7 @@
|
|||
min-width: 0px;
|
||||
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-weight: 200;
|
||||
background: transparent;
|
||||
color: $acc1;
|
||||
border: 1px solid $acc1;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue