Switched to postgres for session storage

- improved mobile layout (chat now visible) - fixed bingo button not visible in mobile layout - added postgres for session storage - added sql directory for sql query files
6 years ago · 2dff089ca0
parent fc0e6c23c1
commit 2dff089ca0
12 changed files with 295 additions and 82 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -6,8 +6,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+
 ### Added

 - CHANGELOG.md Changelog
 - content to the README.md
 - Chat to the bingo game (renderd with markdown-it)
+- Postgres session storage
+- sql-file directory `sql`
+
+
+## Changed
+
+- changed export of `app.js` to the asynchronous init function that returns the app object
+- `bin/www` now calls the init function of `app.js`
+
+### Removed
+
+- sqlite3 sesssion storage
+
+### Fixed
+
+- mobile layout
--- a/app.js
+++ b/app.js
@ -5,7 +5,8 @@ const createError = require('http-errors'),
      logger = require('morgan'),
      compileSass = require('express-compile-sass'),
      session = require('express-session'),
-      SQLiteStore = require('connect-sqlite3')(session),
+      pg = require('pg'),
+      pgSession = require('connect-pg-simple')(session),
      fsx = require('fs-extra'),
      yaml = require('js-yaml'),
      graphqlHTTP = require('express-graphql'),
@ -22,12 +23,24 @@ let settings = yaml.safeLoad(fsx.readFileSync('default-config.yaml'));
 if (fsx.existsSync('config.yaml'))
  Object.assign(settings, yaml.safeLoad(fsx.readFileSync('config.yaml')));

+async function init() {
+  // grapql default resolver
  let graphqlResolver = (request, response) => {
    return {
      time: Date.now(),
      bingo:  bingoRouter.graphqlResolver(request, response)
    }
  };
+  // database setup
+  let pgPool = new pg.Pool({
+    host: settings.postgres.host,
+    port: settings.postgres.port,
+    user: settings.postgres.user,
+    password: settings.postgres.password,
+    database: settings.postgres.database
+  });
+  await pgPool.query(fsx.readFileSync('./sql/createSessionTable.sql', 'utf-8'));
+
  let app = express();

  // view engine setup
@ -40,12 +53,15 @@ app.use(express.json());
  app.use(express.urlencoded({ extended: false }));
  app.use(cookieParser());
  app.use(session({
-  store: new SQLiteStore,
+    store: new pgSession({
+      pool: pgPool,
+      tableName: 'user_sessions'
+    }),
    secret: settings.sessions.secret,
    resave: false,
    saveUninitialized: true,
    cookie: {
-    expires: 10000000
+      maxAge: 30 * 24 * 60 * 60 * 1000  // maxAge 30 days
    }
  }));
  app.use('/sass', compileSass({
@ -84,7 +100,9 @@ app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error');
  });
+  return app;
+}

-module.exports = app;
+module.exports = init;

 //app.listen(settings.port);
--- a/bin/www
+++ b/bin/www
@ -4,7 +4,7 @@
 * Module dependencies.
 */

-const app = require('../app');
+const appInit = require('../app');
 const debug = require('debug')('whooshy:server');
 const http = require('http');
 const yaml = require('js-yaml');
@ -26,6 +26,8 @@ try {
 */

 let port = normalizePort(process.env.PORT || settings.port || '3000');
+
+appInit().then((app) => {
  app.set('port', port);

  /**
@ -39,12 +41,16 @@ let server = http.createServer(app);
   */

  server.listen(port);
-server.on('error', onError);
-server.on('listening', onListening);
+  server.on('error', (error) => onError(error, server));
+  server.on('listening', () => onListening(server));

  /**
   * Normalize a port into a number, string, or false.
   */
+}).catch((err) => {
+  console.error(err.message);
+  console.error(err.stack);
+});

 function normalizePort(val) {
  let port = parseInt(val, 10);
@ -66,7 +72,7 @@ function normalizePort(val) {
 * Event listener for HTTP server "error" event.
 */

-function onError(error) {
+function onError(error, server) {
  if (error.syscall !== 'listen') {
    throw error;
  }
@ -94,7 +100,7 @@ function onError(error) {
 * Event listener for HTTP server "listening" event.
 */

-function onListening() {
+function onListening(server) {
  let addr = server.address();
  let bind = typeof addr === 'string'
    ? 'pipe ' + addr
--- a/default-config.yaml
+++ b/default-config.yaml
@ -3,3 +3,10 @@ sessions:
  maxAge: 1000000

 port: 3000
+
+postgres:
+  host: localhost
+  port: 5432
+  user: whooshy
+  password: whooshypassword
+  database: whooshy
--- a/package-lock.json
+++ b/package-lock.json
@ -381,6 +381,11 @@
        }
      }
    },
+    "buffer-writer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-writer/-/buffer-writer-2.0.0.tgz",
+      "integrity": "sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw=="
+    },
    "bytes": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@ -572,6 +577,14 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
    },
+    "connect-pg-simple": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/connect-pg-simple/-/connect-pg-simple-5.0.0.tgz",
+      "integrity": "sha512-WZ7xkN+qe5bbDLgZ1L9GxnSbr155cJHmfNRzVR5hBvqio7Pg/vuH7Cf8lPUSFClQjtybYSejUqyO54sYt4cg+w==",
+      "requires": {
+        "pg": "^7.4.3"
+      }
+    },
    "connect-sqlite3": {
      "version": "0.9.11",
      "resolved": "https://registry.npmjs.org/connect-sqlite3/-/connect-sqlite3-0.9.11.tgz",
@ -2789,6 +2802,11 @@
        "os-tmpdir": "^1.0.0"
      }
    },
+    "packet-reader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/packet-reader/-/packet-reader-1.0.0.tgz",
+      "integrity": "sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ=="
+    },
    "parse-json": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
@ -2850,6 +2868,62 @@
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
    },
+    "pg": {
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-7.11.0.tgz",
+      "integrity": "sha512-YO4V7vCmEMGoF390LJaFaohWNKaA2ayoQOEZmiHVcAUF+YsRThpf/TaKCgSvsSE7cDm37Q/Cy3Gz41xiX/XjTw==",
+      "requires": {
+        "buffer-writer": "2.0.0",
+        "packet-reader": "1.0.0",
+        "pg-connection-string": "0.1.3",
+        "pg-pool": "^2.0.4",
+        "pg-types": "~2.0.0",
+        "pgpass": "1.x",
+        "semver": "4.3.2"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.2.tgz",
+          "integrity": "sha1-x6BxWKgL7dBSNVt3DYLWZA+AO+c="
+        }
+      }
+    },
+    "pg-connection-string": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-0.1.3.tgz",
+      "integrity": "sha1-2hhHsglA5C7hSSvq9l1J2RskXfc="
+    },
+    "pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw=="
+    },
+    "pg-pool": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-2.0.6.tgz",
+      "integrity": "sha512-hod2zYQxM8Gt482q+qONGTYcg/qVcV32VHVPtktbBJs0us3Dj7xibISw0BAAXVMCzt8A/jhfJvpZaxUlqtqs0g=="
+    },
+    "pg-types": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.0.1.tgz",
+      "integrity": "sha512-b7y6QM1VF5nOeX9ukMQ0h8a9z89mojrBHXfJeSug4mhL0YpxNBm83ot2TROyoAmX/ZOX3UbwVO4EbH7i1ZZNiw==",
+      "requires": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      }
+    },
+    "pgpass": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.2.tgz",
+      "integrity": "sha1-Knu0G2BltnkH6R2hsHwYR8h3swY=",
+      "requires": {
+        "split": "^1.0.0"
+      }
+    },
    "pify": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@ -2873,6 +2947,29 @@
      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
    },
+    "postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA=="
+    },
+    "postgres-bytea": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz",
+      "integrity": "sha1-AntTPAqokOJtFy1Hz5zOzFIazTU="
+    },
+    "postgres-date": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.4.tgz",
+      "integrity": "sha512-bESRvKVuTrjoBluEcpv2346+6kgB7UlnqWZsnbnCccTNq/pqfj1j6oBaN5+b/NrDXepYUT/HKadqv3iS9lJuVA=="
+    },
+    "postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "requires": {
+        "xtend": "^4.0.0"
+      }
+    },
    "process-nextick-args": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
@ -3528,6 +3625,14 @@
      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz",
      "integrity": "sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA=="
    },
+    "split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "requires": {
+        "through": "2"
+      }
+    },
    "split-string": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@ -3696,6 +3801,11 @@
        "inherits": "2"
      }
    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
    "to-fast-properties": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
    "start": "node ./bin/www"
  },
  "dependencies": {
-    "connect-sqlite3": "^0.9.11",
+    "connect-pg-simple": "^5.0.0",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
@ -22,6 +22,7 @@
    "markdown-it-emoji": "^1.4.0",
    "morgan": "~1.9.1",
    "node-sass": "^4.12.0",
+    "pg": "^7.11.0",
    "pug": "2.0.0-beta11"
  }
 }
--- a/public/javascripts/bingo-web.js
+++ b/public/javascripts/bingo-web.js
@ -330,6 +330,17 @@ function submitOnEnter(event, func) {
        func();
 }

+/**
+ * Toggles the displayChat class on the content container to switch between chat-view and grid view
+ */
+function toggleChatView() {
+    let contentContainer = document.querySelector('#content-container');
+    if (contentContainer.getAttribute('class') === 'displayChat')
+        contentContainer.setAttribute('class', '');
+    else
+        contentContainer.setAttribute('class', 'displayChat')
+}
+
 window.addEventListener("unhandledrejection", function(promiseRejectionEvent) {
    promiseRejectionEvent.promise.catch(err => console.log(err));
    showError('Connection problems... Is the server down?');
--- a/public/stylesheets/sass/bingo/style.sass
+++ b/public/stylesheets/sass/bingo/style.sass
@ -21,12 +21,26 @@ textarea
    height: 80%
  #content-container
    grid-template-columns: 0 100% !important
-    grid-template-rows: 10% 80% 10% !important
+    grid-template-rows: 10% 40% 40% 10% !important

    #players-container, #chat-container
      display: none !important
      padding: 0

+    .errorDiv
+      grid-column-start: 1 !important
+      grid-column-end: 4 !important
+
+  #content-container.displayChat
+    grid-template-columns: 100% 0 !important
+    grid-template-rows: 0 25% 65% 10% !important
+
+    #players-container, #chat-container
+      display: block !important
+
+    #words-container
+      display: none !important
+
  #username-form
    width: calc(100% - 2rem) !important
    left: 0 !important
@ -38,6 +52,23 @@ textarea
    width: calc(100% - 2rem) !important
    left: 0 !important

+  #button-container
+    grid-column-start: 2 !important
+    grid-column-end: 3 !important
+
+  #chat-button-container
+    display: inline-block
+    grid-row-start: 4
+    grid-row-end: 4
+    grid-column-start: 1
+    grid-column-end: 4
+    overflow: hidden
+    margin: 0 0.5rem
+
+    button
+      width: 100%
+      margin: 0.5rem 0
+
@media(min-device-width: 641px)
  textarea
    height: 80%
@ -45,6 +76,8 @@ textarea
  #words-container
    width: 100%
    height: 100%
+  #chat-button-container
+    display: none

 .number-input
  width: 4rem
@ -179,7 +212,7 @@ textarea
    word-break: break-word

    #chat-content
-      height: calc(100% - 3.5rem)
+      height: calc(100% - 2.5rem)
      background-color: $primary
      overflow: auto

@ -199,7 +232,7 @@ textarea

    #chat-input
      width: 100%
-      margin: 1rem 0 0 0
+      margin: 0 0 0 0
      height: 2.5rem
      border-radius: 0

--- a/public/stylesheets/sass/mixins.sass
+++ b/public/stylesheets/sass/mixins.sass
@ -4,5 +4,4 @@
  background: lighten($primary, 10%)
  color: $primarySurface
  border: 2px solid $primarySurface
-  border-radius: $borderRadius
  transition-duration: 0.2s
--- a/public/stylesheets/sass/style.sass
+++ b/public/stylesheets/sass/style.sass
@ -12,11 +12,11 @@

@media (min-device-width: 641px)
  html
-    font-size: 4vw
+    font-size: 2.5vw

@media (min-device-width: 961px)
  html
-    font-size: 3vw
+    font-size: 2.2vw

@media (min-device-width: 1025px)
  html
@ -63,8 +63,10 @@ a

 ::-webkit-scrollbar-thumb
  background: darken($secondary, 5)
-  border-radius: 10px
+  transition-duration: 0.2s
+
+::-webkit-scrollbar-thumb:hover
+  background: $secondary

 ::-webkit-scrollbar-track
  background: lighten($primary, 5)
-  border-radius: 10px
--- a/sql/createSessionTable.sql
+++ b/sql/createSessionTable.sql
@ -0,0 +1,7 @@
+CREATE TABLE IF NOT EXISTS "user_sessions" (
+    "sid" varchar NOT NULL COLLATE "default",
+    "sess" json NOT NULL,
+	"expire" timestamp(6) NOT NULL,
+	PRIMARY KEY ("sid") NOT DEFERRABLE INITIALLY IMMEDIATE
+)
+WITH (OIDS=FALSE);
--- a/views/bingo/bingo-game.pug
+++ b/views/bingo/bingo-game.pug
@ -23,4 +23,6 @@ block content
                        div(class='bingo-word-panel', onclick=`submitWord('${field.base64Word}')`, b-word=field.base64Word, b-sub=`${field.submitted}`)
                            span= field.word
        div(id='button-container')
-            button(id='bingo-button' onclick='submitBingo()', class='hidden') Bingo!
+            button(id='bingo-button', onclick='submitBingo()', class='hidden') Bingo!
+        div(id='chat-button-container')
+            button(id='chat-toggle-button', onclick='toggleChatView()') toggle Chat