October 2020 Summaries

Dolphin has built a realtime quiz framework using NodeJS and VueJS, powered by Ably's realtime infrastructure which primarily operates on WebSockets. The framework is designed for developers building EdTech applications to quickly get started with scalable realtime messaging and focus on their app logic. It also implements Node JS worker threads to simulate multiple 'quiz rooms', allowing different groups of people to simultaneously participate in live quizzes organized by dedicated hosts. This open-source framework is fully customizable for specific use-cases and scenarios, making it a useful starting point for building an EdTech tool of any kind.

In celebration of Halloween, the Ably team developed Ouijably, a digital recreation of a spirit board, leveraging the Ably peer-to-peer game framework to enable users to seemingly communicate with spirits online. This web application simulates the traditional Ouija board experience by utilizing the ideomotor phenomenon, where participants subconsciously move a planchette to spell out messages. The app, built with HTML, CSS, and TypeScript, uses realtime messaging to synchronize mouse or gyroscopic movements across users, allowing the planchette to move on a digital board and reveal letters through collision detection with SVG polygons. The Ouijably code is open-source and available on GitHub, requiring an Ably account and other technical tools for setup, and it is designed to emulate the intriguing experience of a physical spirit board in a digital format.

In October 2020, the author decided to create a multiplayer game using Ably's pub/sub real-time messaging infrastructure. The game, called Depict-It, is based on a peer-to-peer architecture where players send and receive messages directly without an intermediary server. This makes it easier to manage state changes in the game and allows for seamless synchronization between players' browsers. The game consists of several phases: dealing, drawing, captioning, and voting. Each phase has a completion condition that triggers the next phase when met. Messages are sent on an Ably channel with both a "kind" and a "value", allowing the code to process them differently based on their content. The game's user interface is built using Vue.js, which enables the author to split different game phases into separate components and handle events such as click handlers. The UI also checks each game phase in the state and shows the correct UI elements accordingly. There are many potential improvements and extensions for the game, including adding more features or splitting players into separate games if there are too many. The author encourages others to contribute to the project by making a pull request or forking it to create their own version.