github-starred/Socio
2
0
Fork 0
mirror of https://github.com/Rolands-Laucis/Socio.git synced 2026-05-15 14:15:57 -06:00
Code Issues Projects Packages Wiki Activity Actions

comments

Browse source
This commit is contained in:
Rolands 2022-10-29 10:53:19 +03:00
parent c5c59e3439
commit 56b007f05e
2 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
demos/basic/client.js
View file

@ -3,7 +3,7 @@
import { WSClient } from '/core-client.js'
//instantiate the WS client from lib on the expected websocket port and wait for it to connect
//NB! use wss secure socket protocol in PROD!
//NB! use wss secure socket protocol and use the ./core/Secure class to encrypt these queries in PROD!
const ws = new WSClient(`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 ws.ready()
//and setup done :)
@ -25,7 +25,7 @@ document.getElementById('insert').addEventListener('click', async (e) => {
//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 and indefinitely receive updates.
//this will also run the sql query to get the initial value, then indefinitely receive updates and rerun this callback.
ws.subscribe({ sql: 'SELECT COUNT(*) FROM users WHERE name = :name;', params: { name: 'Bob' } }, (res) => {
document.getElementById('3').innerText = res[0]['COUNT(*)'] //res is whatever object your particular DB interface lib returns from a raw query
})

8
demos/basic/readme.md
View file

@ -11,18 +11,18 @@ You might need to link the core lib to the demo manually, since it is not yet pu
```bash
cd core
npm link
cd ../demo
npm link ../core
cd ../demos/basic
npm link ../../core
```
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 white 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 that 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.
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. 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. With frontend frameworks this client.js code becomes even simpler.
## Next check out the ``demo/client.js`` file to see how the magic is done - its super simple ;)
## Next check out the ``client.js`` file to see how the magic is done on the frontend - its super simple ;)