CI Lab, Week 12 – Data Storage and Real Time Interactions
Using Glitch, we’ll take a look at a few examples that will enable you to add persistent storage to your website and interact with other users in real time.
So far this semester all of the websites we’ve created have been static, or limited to your own browser – any interactions you make on the website are limited to that user’s browser only. In order to enable a website to share data between different users, we need a way to store that information in a central place. In this example, we can store data in a local JSON file. Users can enter messages via an <input> field, which gets sent to the server.js file, then saved into the local data.json file.
If you wanted to enable users of your website to post message to your website and display them in an interesting way, you can remix this project and you’ll only need to make minor adjustments to the JavaScript to enable that.
Websockets are a newer web protocol that allow real time, two-way communication between a website and a server. This means the server can tell the website when a change happens in real time, and the website can respond to that change. A common use-case for websockets is in the creation of real-time chat applications. When one user posts a message, the server sends a notification to all other users, and they see that message displayed at the same time.
Check out how large companies like Spotify and Slack are using Glitch. They make it easy to remix their projects and explore the Spotify API. You could use this to create a prototype Spotify player within your own website, or look up metadata for a particular song.
Interaction with People – Input/Output
Persistent Data Storage
Real Time Interaction with Websockets
Other Notes