Giter Club home page Giter Club logo

eventpresent's Introduction

eventPresent

A simple (?) audience interactivity solution intended for custom-developed overlays to full-screen presentations. This is an evolution of something I've been doing in my own presentations for a long time, but more flexible and stable than what I'd built previously.

The Components

  • The big screen presentation at web/big/. One of my goals here was to have zero UI dependencies, and I achieved that pretty easily. All the frontends use the Paho MQTT client (32K), loaded via CDN.

  • The audience app at web/. This app prompts users with questions. Also zero UI dependencies. The index.html gets generated via index-src.html using Parcel.

  • The speaker app at web/admin/. It controls everything else as an authenticated admin user.

  • An nginx web server for static assets, and reverse proxy for WebSocket/MQTT.

  • Node-RED, which contain all the (minimal) backend logic for messages and message routing.

  • A Mosquitto server, which connects all clients and NODE-RED.

Setup

To get things running, you need to install nginx, Mosquitto, yarn, NodeJS, and Node-RED. Do an npm install in the server dir. And really, that's all. Update the start.sh script and nginx.conf with your local paths and (un)comment the appropriate Linux/Mac config to get rolling.

The admin app prompts for a password, which needs to match the adminapp Mosquitto password, which you need to set using mosquitto_passwd. You also need to make sure the passwords match for the adminred user โ€” setting it via the Mosquitto pwfile and also in the node-red flows. When deploying, change the password in Node-RED (the config is shared between nodes) and then via mosquitto_passwd servers/mosquitto.pwfile USERNAME for adminred, adminapp, and big; then match the passwords to web/admin/index.js and web/big/index.html.

There are a bunch of tests at web/admin/test.html. Also, all vanilla JS.

From that point, everything is driven via the presentation "script" in web/admin/script.js. The admin app sends events over WebSocket to Mosquitto, and from there they get routed to audience and big screen.

Build

Each .html file has a toggle for ssl. Use yarn parcel src/index.html to serve a build, and:

yarn parcel build --dist-dir web/ src/index.html

to build to web/index.html. The other apps (big/ and admin/) aren't built, and don't need to be.

Tips

It's easier to troubleshoot with MQTT if you listen for events:

`% mosquitto_sub -u adminred -P PASSWORD -t "user/in"`
`% mosquitto_sub -u adminred -P PASSWORD -t "user/out/+"`
`% mosquitto_sub -t "\$SYS/broker/clients/connected"`
`% mosquitto_sub -u adminred -P PASSWORD -t "admin/state"`

Caveats

  • Mosquitto is configured to limit to a single connection per authenticated (or identified) users. You can't have the admin app open on multiple devices without creating a tug of war of disconnects and reconnects. Be aware, since the app reconnects automatically!

  • You need high file limits set on a Linux server to scale to thousands of users via mosquitto. Most systems I've encountered limit at 1024 by default.

  • There is little enforcement here; any user can delete their ID from localStorage and have a new session. This is intentional, to allow for broad anonymous access. This obviously wouldn't be accepetable for anything long-lived, and there is bound to be hack potential.

  • I'm not entirely clear how Node-RED stores the MQTT server credentials, but I've found it periodically necessary to resupply Node-RED the mosquitto credentials after a restart. If things aren't working, re-login using one of the MQTT nodes in the flow.

eventpresent's People

Contributors

dannybrian avatar netgio avatar

Stargazers

Mohamad Al Solh avatar Diego Molina avatar  avatar  avatar Piotr avatar Kyle Davis avatar Scott Wiersdorf avatar Ed Morris avatar Bob Schnable avatar Joan Lopez avatar

Watchers

 avatar  avatar

eventpresent's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.