Socio/demos/basic
2023-07-26 11:18:37 +03:00
..
client.js basic demo upgraded to socio v0.7.12 2023-04-06 12:54:58 +03:00
index.html basic demo upgraded to socio v0.7.12 2023-04-06 12:54:58 +03:00
package-lock.json basic demo upgraded to socio v0.7.12 2023-04-06 12:54:58 +03:00
package.json basic demo upgraded to socio v0.7.12 2023-04-06 12:54:58 +03:00
readme.md Update readme.md 2023-07-26 11:18:37 +03:00
server.js basic demo upgraded to socio v0.7.12 2023-04-06 12:54:58 +03:00

This is a super simple locally runnable demonstration of the Socio lib and how to use it.

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
  • npm run demo

This 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 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. 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 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

  • client.js file to see how the magic is done on the frontend - it's super simple ;)
  • server.js file to see how the magic is done on the backend. The Express.js http server and SocioServer is created here.