Server setup
JavaScript
Install dependencies. Node and Postgres are assumed to be already installed at this point.
npm init
npm i prostgles-server socket.io express
Add the start script in package.json
{
...
"scripts": {
"start": "node index.js"
},
...
}
Set up a minimal express app in index.js
const express = require('express');
const app = express();
const path = require('path');
const { join } = require('path');
var http = require('http').createServer(app);
var io = require('socket.io')(http);
http.listen(3001);
const prostgles = require('prostgles-server');
prostgles({
dbConnection: {
host: "localhost",
port: "5432",
user: "postgres",
password: "your_password"
},
// Optional sql file to be run on each reload
sqlFilePath: path.join(__dirname+'/init.sql'),
publish: (socket, dbo) => "*",
io,
onReady: async (db, _db) => {
},
});
Optionally you can add an SQL file to initialise the database on every restart init.sql
-- DROP TABLE IF EXISTS items CASCADE;
CREATE TABLE IF NOT EXISTS items (
id SERIAL PRIMARY KEY,
name TEXT
);
Finally - start server
npm start
Typescript
Install dependencies. Node and Postgres are assumed to be already installed at this point.
npm init
npm i prostgles-server express socket.io @types/socket.io
npm install -g typescript
Add the start script in package.json
{
...
"scripts": {
"start": "tsc && node index.js"
},
...
}
Set up a minimal express app in index.ts
import path from 'path';
import express from 'express';
const prostgles = require("prostgles-server");
const app = express();
const http = require('http').createServer(app);
const io = require("socket.io")(http);
http.listen(3001);
prostgles({
dbConnection: {
host: "localhost",
port: 5432,
database: "postgres",
user: "postgres",
password: process.env.PRGL_PWD
},
sqlFilePath: path.join(__dirname+'/init.sql'),
io,
tsGeneratedTypesDir: path.join(__dirname + '/'),
publish: (socket, dbo ) => "*",
onReady: async (dbo, db) => {
},
});
Optionally you can add an SQL file to initialise the database on every restart init.sql
-- DROP TABLE IF EXISTS items CASCADE;
CREATE TABLE IF NOT EXISTS items (
id SERIAL PRIMARY KEY,
name TEXT
);
Set up the TypeScript config tsconfig.json
{
"files": ["./index.ts"],
"compilerOptions": {
"target": "es2019",
"lib": [ "es2019" ],
"esModuleInterop" : true,
"module": "commonjs",
"sourceMap": true,
"rootDir": ".",
"declaration": true,
"declarationMap": true
},
"exclude": [
"dist",
"DBoGenerated.ts"
]
}
Finally - start server
npm start
Client setup
Javascript
Basic html template index.html:
<!DOCTYPE html>
<html>
<head>
<title> Prostgles </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/socket.io-client@latest/dist/socket.io.slim.js" type="text/javascript"></script>
<script src="https://unpkg.com/prostgles-client@latest/dist/index.js" type="text/javascript"></script>
</head>
<body>
<script>
prostgles({
socket: io("http://localhost:3001/"), // or simply io()
onReady: async (db, methods) => {
db.items.subscribe({}, {}, items => {
document.body.innerText = JSON.stringify(items)
})
}
});
</script>
</body>
</html>
React
Set up a basic create-react-app and then install prostgles-client and its dependencies
npx create-react-app my-app
cd my-app
npm i prostgles-client socket.io-client
Initialise prostgles in App.js, assuming you have published the "items" table
import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
/* prostgles */
import io from "socket.io-client";
import prostgles from "prostgles-client";
function App() {
const [items, setItems] = useState([]);
const [db, setDB] = useState(null);
useEffect(() => {
prostgles({
socket: io("http://localhost:3001/"),
onReady: async (db) => {
db.items.subscribe({},{}, items => {
setItems(items);
});
setDB(db)
},
});
}, []);
if(!db) return null;
return (
<div>
<div>{JSON.stringify(items)}</div>
<button
onClick={e => {
db.items.insert({ comment: Date.now() })
}}
>
ADD
</button>
</div>
);
}
export default App;
React Typescript
Set up a basic create-react-app and then install prostgles-client and its dependencies
npx create-react-app my-app --template typescript
cd my-app
npm i prostgles-client socket.io-client @types/socket.io-client
Initialise prostgles in App.tsx, assuming you have published the "items" table
import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
/* prostgles */
import io from "socket.io-client";
import prostgles from "prostgles-client";
function App() {
const [items, setItems] = useState([]);
const [db, setDB] = useState<any>(null);
useEffect(() => {
prostgles({
socket: io("http://localhost:3001/"),
onReady: async (db: any) => {
db.items.subscribe({},{}, items => {
setItems(items);
});
setDB(db)
},
});
}, []);
if(!db) return null;
return (
<div>
<div>{JSON.stringify(items)}</div>
<button
onClick={e => {
db.items.insert({ comment: Date.now() })
}}
>
ADD
</button>
</div>
);
}
export default App;