mirror of
https://github.com/Rolands-Laucis/Socio.git
synced 2026-05-15 14:15:57 -06:00
basic demo upgraded to socio v0.7.12
This commit is contained in:
parent
bcc1199084
commit
78e288efd7
6 changed files with 122 additions and 84 deletions
|
|
@ -1,9 +1,9 @@
|
|||
import { SocioClient } from './core-client.js'
|
||||
import { SocioClient } from './socio/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!
|
||||
const sc = new SocioClient(`ws://localhost:3000`, { verbose: true }) //each instance is going to be its own "session" on the server, but you can spawn and destroy these where ever in your code
|
||||
await sc.ready()
|
||||
const sc = new SocioClient(`ws://localhost:3000`, { verbose: true }); //each instance is going to be its own "session" on the server, but you can spawn and destroy these where ever in your code
|
||||
await sc.ready();
|
||||
//and setup done :)
|
||||
|
||||
document.getElementById('ready').innerHTML = `Ready. <h3>client ID: ${sc.client_id}</h3>`
|
||||
|
|
@ -12,18 +12,18 @@ document.getElementById('ready').className += ' ready'
|
|||
// -------QUERY EXAMPLES-------
|
||||
|
||||
//some initial queries to be run once, that will not be reactive
|
||||
document.getElementById('1').innerText = (await sc.query("SELECT 42+69 AS RESULT;"))[0].RESULT
|
||||
document.getElementById('2').innerText = (await sc.query("SELECT COUNT(*) FROM users;"))[0]['COUNT(*)']
|
||||
document.getElementById('1').innerText = (await sc.Query("SELECT 42+69 AS RESULT;"))[0].RESULT
|
||||
document.getElementById('2').innerText = (await sc.Query("SELECT COUNT(*) FROM users;"))[0]['COUNT(*)']
|
||||
|
||||
//set up a button to send an insert sql query on click
|
||||
document.getElementById('insert').addEventListener('click', async (e) => {
|
||||
await sc.query("INSERT INTO users VALUES('Bob', 420);")
|
||||
await sc.Query("INSERT INTO users VALUES('Bob', 420);")
|
||||
})
|
||||
|
||||
|
||||
//queries with dynamic data - via params (optional):
|
||||
//subscribe to the changes of this query - whenever the table is altered on the backend. And run the callback with the new received data
|
||||
//this will also run the sql query to get the initial value, then indefinitely receive updates and rerun this callback.
|
||||
sc.subscribe({ sql: "SELECT COUNT(*) AS RESULT FROM users WHERE name = :name;", params: { name: 'Bob' } }, (res) => {
|
||||
sc.Subscribe({ sql: "SELECT COUNT(*) AS RESULT FROM users WHERE name = :name;", params: { name: 'Bob' } }, (res) => {
|
||||
document.getElementById('3').innerText = res[0].RESULT //res is whatever object your particular DB interface lib returns from a raw query
|
||||
})
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Socio demonstration - basic</title>
|
||||
|
||||
<!-- fake favicon -->
|
||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||||
|
||||
<!-- font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
|
@ -9,6 +11,18 @@
|
|||
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;400;700&family=Trispace:wght@100;200&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- to import base64.js from static, as ES modules import in socio/core-client -->
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"base64-js": "./base64-js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- i reall dont know why this error came up, but this script seems to fix it. Base64 doesnt export a default, but it does export 3 functions, which i import as "import * as b64 from 'base64-js';" and that gives browser error "exports is not defined". -->
|
||||
<script>var exports = {};</script>
|
||||
|
||||
<!-- get the actual client script from express static, which has all the socio client logic. -->
|
||||
<script src="./client.js" type="module"></script>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
138
demos/basic/package-lock.json
generated
138
demos/basic/package-lock.json
generated
|
|
@ -10,8 +10,9 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"express": "^4.18.2",
|
||||
"magic-string": "^0.30.0",
|
||||
"sequelize": "^6.25.3",
|
||||
"socio": "^0.4.13",
|
||||
"socio": "^0.7.12",
|
||||
"sqlite3": "^5.1.2"
|
||||
}
|
||||
},
|
||||
|
|
@ -35,6 +36,11 @@
|
|||
"integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.14",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
|
||||
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
|
||||
},
|
||||
"node_modules/@mapbox/node-pre-gyp": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz",
|
||||
|
|
@ -252,6 +258,25 @@
|
|||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
||||
},
|
||||
"node_modules/base64-js": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/body-parser": {
|
||||
"version": "1.20.1",
|
||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
|
||||
|
|
@ -897,11 +922,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.26.7",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
|
||||
"integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
|
||||
"version": "0.30.0",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
|
||||
"integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
|
||||
"dependencies": {
|
||||
"sourcemap-codec": "^1.4.8"
|
||||
"@jridgewell/sourcemap-codec": "^1.4.13"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
|
|
@ -1435,9 +1460,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/retry-as-promised": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/retry-as-promised/-/retry-as-promised-6.1.0.tgz",
|
||||
"integrity": "sha512-Hj/jY+wFC+SB9SDlIIFWiGOHnNG0swYbGYsOj2BJ8u2HKUaobNKab0OIC0zOLYzDy0mb7A4xA5BMo4LMz5YtEA=="
|
||||
"version": "7.0.4",
|
||||
"resolved": "https://registry.npmjs.org/retry-as-promised/-/retry-as-promised-7.0.4.tgz",
|
||||
"integrity": "sha512-XgmCoxKWkDofwH8WddD0w85ZfqYz+ZHlr5yo+3YUCfycWawU56T5ckWXsScsj5B8tqUcIG67DxXByo3VUgiAdA=="
|
||||
},
|
||||
"node_modules/rimraf": {
|
||||
"version": "3.0.2",
|
||||
|
|
@ -1520,9 +1545,9 @@
|
|||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/sequelize": {
|
||||
"version": "6.25.3",
|
||||
"resolved": "https://registry.npmjs.org/sequelize/-/sequelize-6.25.3.tgz",
|
||||
"integrity": "sha512-sbbvDGft6UfSRdIC0dcZvMxxJYi6g0+IgWvIpTuk6ccEoIyLcr7Sk6nXWwGfkdlDabGeunhhhI4yH8PleVMvtw==",
|
||||
"version": "6.30.0",
|
||||
"resolved": "https://registry.npmjs.org/sequelize/-/sequelize-6.30.0.tgz",
|
||||
"integrity": "sha512-VxQ3gB+isefL8Ic3GDUR6Y8Zwu1ctWNUlffcdSClsLkQ0mwgoLQv3cI3cDwSVn9wZJk0AEwMSm1TYFFRqmcR0A==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -1537,9 +1562,9 @@
|
|||
"inflection": "^1.13.2",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.1",
|
||||
"moment-timezone": "^0.5.34",
|
||||
"moment-timezone": "^0.5.35",
|
||||
"pg-connection-string": "^2.5.0",
|
||||
"retry-as-promised": "^6.1.0",
|
||||
"retry-as-promised": "^7.0.3",
|
||||
"semver": "^7.3.5",
|
||||
"sequelize-pool": "^7.1.0",
|
||||
"toposort-class": "^1.0.1",
|
||||
|
|
@ -1662,12 +1687,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/socio": {
|
||||
"version": "0.4.13",
|
||||
"resolved": "https://registry.npmjs.org/socio/-/socio-0.4.13.tgz",
|
||||
"integrity": "sha512-//Dvt2vEBjjy+l/y/OajEmDNLab1BsrX1o5Jms52OwF3WsEj874DCICTlUOzgfGet5k+Og9D+sJMuhPTovaejA==",
|
||||
"version": "0.7.12",
|
||||
"resolved": "https://registry.npmjs.org/socio/-/socio-0.7.12.tgz",
|
||||
"integrity": "sha512-Q4j/8865bV0c0jnKccoVpntwpjEBwFBaH4dFV7dyRoyPkpIa6jXrdAZGu+MQiS4caAYh06ffuw4G71UJ1H0PJQ==",
|
||||
"dependencies": {
|
||||
"@types/node": "^18.11.17",
|
||||
"magic-string": "^0.26.7",
|
||||
"base64-js": "^1.5.1",
|
||||
"ws": "^8.9.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -1722,16 +1746,10 @@
|
|||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/sourcemap-codec": {
|
||||
"version": "1.4.8",
|
||||
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
|
||||
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
|
||||
"deprecated": "Please use @jridgewell/sourcemap-codec instead"
|
||||
},
|
||||
"node_modules/sqlite3": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-5.1.2.tgz",
|
||||
"integrity": "sha512-D0Reg6pRWAFXFUnZKsszCI67tthFD8fGPewRddDCX6w4cYwz3MbvuwRICbL+YQjBAh9zbw+lJ/V9oC8nG5j6eg==",
|
||||
"version": "5.1.6",
|
||||
"resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-5.1.6.tgz",
|
||||
"integrity": "sha512-olYkWoKFVNSSSQNvxVUfjiVbz3YtBwTJj+mfV5zpHmqW3sELx2Cf4QCdirMelhM5Zh+KDVaKgQHqCxrqiWHybw==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@mapbox/node-pre-gyp": "^1.0.0",
|
||||
|
|
@ -1962,9 +1980,9 @@
|
|||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.12.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
|
||||
"integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
|
|
@ -1994,6 +2012,11 @@
|
|||
"integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
|
||||
"optional": true
|
||||
},
|
||||
"@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.14",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
|
||||
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
|
||||
},
|
||||
"@mapbox/node-pre-gyp": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz",
|
||||
|
|
@ -2169,6 +2192,11 @@
|
|||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
||||
},
|
||||
"base64-js": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
|
||||
},
|
||||
"body-parser": {
|
||||
"version": "1.20.1",
|
||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
|
||||
|
|
@ -2685,11 +2713,11 @@
|
|||
}
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.26.7",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
|
||||
"integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
|
||||
"version": "0.30.0",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
|
||||
"integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
|
||||
"requires": {
|
||||
"sourcemap-codec": "^1.4.8"
|
||||
"@jridgewell/sourcemap-codec": "^1.4.13"
|
||||
}
|
||||
},
|
||||
"make-dir": {
|
||||
|
|
@ -3076,9 +3104,9 @@
|
|||
"optional": true
|
||||
},
|
||||
"retry-as-promised": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/retry-as-promised/-/retry-as-promised-6.1.0.tgz",
|
||||
"integrity": "sha512-Hj/jY+wFC+SB9SDlIIFWiGOHnNG0swYbGYsOj2BJ8u2HKUaobNKab0OIC0zOLYzDy0mb7A4xA5BMo4LMz5YtEA=="
|
||||
"version": "7.0.4",
|
||||
"resolved": "https://registry.npmjs.org/retry-as-promised/-/retry-as-promised-7.0.4.tgz",
|
||||
"integrity": "sha512-XgmCoxKWkDofwH8WddD0w85ZfqYz+ZHlr5yo+3YUCfycWawU56T5ckWXsScsj5B8tqUcIG67DxXByo3VUgiAdA=="
|
||||
},
|
||||
"rimraf": {
|
||||
"version": "3.0.2",
|
||||
|
|
@ -3134,9 +3162,9 @@
|
|||
}
|
||||
},
|
||||
"sequelize": {
|
||||
"version": "6.25.3",
|
||||
"resolved": "https://registry.npmjs.org/sequelize/-/sequelize-6.25.3.tgz",
|
||||
"integrity": "sha512-sbbvDGft6UfSRdIC0dcZvMxxJYi6g0+IgWvIpTuk6ccEoIyLcr7Sk6nXWwGfkdlDabGeunhhhI4yH8PleVMvtw==",
|
||||
"version": "6.30.0",
|
||||
"resolved": "https://registry.npmjs.org/sequelize/-/sequelize-6.30.0.tgz",
|
||||
"integrity": "sha512-VxQ3gB+isefL8Ic3GDUR6Y8Zwu1ctWNUlffcdSClsLkQ0mwgoLQv3cI3cDwSVn9wZJk0AEwMSm1TYFFRqmcR0A==",
|
||||
"requires": {
|
||||
"@types/debug": "^4.1.7",
|
||||
"@types/validator": "^13.7.1",
|
||||
|
|
@ -3145,9 +3173,9 @@
|
|||
"inflection": "^1.13.2",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.1",
|
||||
"moment-timezone": "^0.5.34",
|
||||
"moment-timezone": "^0.5.35",
|
||||
"pg-connection-string": "^2.5.0",
|
||||
"retry-as-promised": "^6.1.0",
|
||||
"retry-as-promised": "^7.0.3",
|
||||
"semver": "^7.3.5",
|
||||
"sequelize-pool": "^7.1.0",
|
||||
"toposort-class": "^1.0.1",
|
||||
|
|
@ -3219,12 +3247,11 @@
|
|||
"optional": true
|
||||
},
|
||||
"socio": {
|
||||
"version": "0.4.13",
|
||||
"resolved": "https://registry.npmjs.org/socio/-/socio-0.4.13.tgz",
|
||||
"integrity": "sha512-//Dvt2vEBjjy+l/y/OajEmDNLab1BsrX1o5Jms52OwF3WsEj874DCICTlUOzgfGet5k+Og9D+sJMuhPTovaejA==",
|
||||
"version": "0.7.12",
|
||||
"resolved": "https://registry.npmjs.org/socio/-/socio-0.7.12.tgz",
|
||||
"integrity": "sha512-Q4j/8865bV0c0jnKccoVpntwpjEBwFBaH4dFV7dyRoyPkpIa6jXrdAZGu+MQiS4caAYh06ffuw4G71UJ1H0PJQ==",
|
||||
"requires": {
|
||||
"@types/node": "^18.11.17",
|
||||
"magic-string": "^0.26.7",
|
||||
"base64-js": "^1.5.1",
|
||||
"ws": "^8.9.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -3266,15 +3293,10 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"sourcemap-codec": {
|
||||
"version": "1.4.8",
|
||||
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
|
||||
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
|
||||
},
|
||||
"sqlite3": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-5.1.2.tgz",
|
||||
"integrity": "sha512-D0Reg6pRWAFXFUnZKsszCI67tthFD8fGPewRddDCX6w4cYwz3MbvuwRICbL+YQjBAh9zbw+lJ/V9oC8nG5j6eg==",
|
||||
"version": "5.1.6",
|
||||
"resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-5.1.6.tgz",
|
||||
"integrity": "sha512-olYkWoKFVNSSSQNvxVUfjiVbz3YtBwTJj+mfV5zpHmqW3sELx2Cf4QCdirMelhM5Zh+KDVaKgQHqCxrqiWHybw==",
|
||||
"requires": {
|
||||
"@mapbox/node-pre-gyp": "^1.0.0",
|
||||
"node-addon-api": "^4.2.0",
|
||||
|
|
@ -3452,9 +3474,9 @@
|
|||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
||||
},
|
||||
"ws": {
|
||||
"version": "8.12.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
|
||||
"integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"requires": {}
|
||||
},
|
||||
"yallist": {
|
||||
|
|
|
|||
|
|
@ -6,14 +6,16 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"dev": "node server.js"
|
||||
"dev": "node server.js",
|
||||
"demo": "node server.js"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"express": "^4.18.2",
|
||||
"magic-string": "^0.30.0",
|
||||
"sequelize": "^6.25.3",
|
||||
"socio": "^0.4.13",
|
||||
"socio": "^0.7.12",
|
||||
"sqlite3": "^5.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
# This is a super simple locally runnable demonstration of the Socio lib and how to use it.
|
||||
|
||||
#### Only depends on having Node installed.
|
||||
## Prerequisites
|
||||
* Node.js >= 16 LTS
|
||||
* NPM - comes with Node (because of how lib files are served from express and node_modules file structure. You can edit the paths for your package manager, like pnpm)
|
||||
|
||||
## Setup and run
|
||||
* Download or clone this repo
|
||||
* ```cd demos/basic```
|
||||
* ```npm i```
|
||||
|
|
@ -10,11 +13,11 @@
|
|||
Should start the express webserver and print out its url, that you can visit on your fav browser to begin the interactive demo.
|
||||
|
||||
* Visi the URL on one or multiple tabs or browser instances.
|
||||
* Then press the big INSERT button, which will insert a new row into the DB on that table.
|
||||
* Then press the big INSERT button, which will insert a new row into the DB on the users table.
|
||||
* Then you should see the subscribed queries update their values to whatever the queries returned.
|
||||
|
||||
As you will notice, all instances of the browsers and their tabs update their values. This is because the API isnt built with the REST method, but rather with WebSockets, which means the server can push its updates to the clients, if they have registered to receive them. Instead of the traditional way of pooling resquests.
|
||||
As you will notice, all instances of the browsers and their tabs update their values. This is because the API isnt built with the REST method, but rather with WebSockets, which means the server can push its updates to the clients. Instead of the traditional way of pooling GET resquests.
|
||||
|
||||
This is powerful because you nolonger need to write a REST API middle layer between front and back end and manually sync states and data, which in practice is often challenging and laborious. With Socio this is all done automatically for you. As well as no need to write DB query interfacing middle layers, since your SQL queries can just sit in one place - the front end - where their use sits.
|
||||
This is powerful because you nolonger need to write a REST API middle layer between front and back end and manually sync states and data, which in practice is often challenging and laborious. With Socio this is all done automagically for you. As well as no need to write DB query interfacing middle layers, since your SQL queries can just sit in one place - the front end - where their use sits.
|
||||
|
||||
## Next check out the ``client.js`` file to see how the magic is done on the frontend - its super simple ;)
|
||||
|
|
@ -11,30 +11,27 @@ const server_port = 5000, ws_port = 3000 //can be set up that the websockets run
|
|||
|
||||
//init local RAM DB with 1 table - "users" and 2 rows.
|
||||
const sequelize = new Sequelize('sqlite::memory:');
|
||||
await sequelize.query('CREATE TABLE Users(name varchar(50), num INTEGER NOT NULL DEFAULT 0);')
|
||||
await sequelize.query('INSERT INTO Users VALUES("Jane", 42);')
|
||||
await sequelize.query('INSERT INTO Users VALUES("John", 69);')
|
||||
await sequelize.query('CREATE TABLE Users(name varchar(50), num INTEGER NOT NULL DEFAULT 0);', { logging: false })
|
||||
await sequelize.query('INSERT INTO Users VALUES("Jane", 42);', { logging: false })
|
||||
await sequelize.query('INSERT INTO Users VALUES("John", 69);', { logging: false })
|
||||
|
||||
//set up the WebSocket SocioServer and give it the DB querying function that comes from whatever your DB interface lib provides.
|
||||
//it needs the raw sql string, which can contain formatting parameters - insert dynamic data into the string.
|
||||
//Either you in a wrapper function or your DB interface lib should do the sql validation and sanitization, as this lib does not!
|
||||
async function QueryWrap({ id = 0, sql = '', params = {} } = {}) {
|
||||
async function QueryWrap(client, id, sql = '', params = null) {
|
||||
return (await sequelize.query(sql, { logging: false, raw: true, replacements: params }))[0]
|
||||
}
|
||||
|
||||
const socserv = new SocioServer({ port: ws_port }, { DB_query_function: QueryWrap, verbose:true} )
|
||||
done(`Created SocioServer on port`, ws_port)
|
||||
|
||||
//init
|
||||
// const sec = Secure({})
|
||||
const socserv = new SocioServer({ port: ws_port }, { DB_query_function: QueryWrap, verbose:true} );
|
||||
|
||||
//express js serve static files like html page and the client.js which does the magic
|
||||
import { dirname } from 'path';
|
||||
import { dirname, join } from 'path';
|
||||
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\\dist"));
|
||||
app.use("/", express.static(__dirname));
|
||||
app.use("/socio", express.static(join(__dirname, "node_modules/socio/dist/")));
|
||||
app.use("/base64-js", express.static(join(__dirname, "node_modules/base64-js/index.js")));
|
||||
|
||||
app.listen(server_port, () => {
|
||||
done(`Express webserver listening on port`, server_port, `http://localhost:${server_port}/`)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue