live web – the meme chat room

The 2058 meme chat room interface screenshot

Find the code of the project on my github.

This prototype was made in collaboration with Esther. We were intended to create a speculative chat room imagining a future where people would have the true ability to develop a conversation only using memes.

The main technical challenge for the code was turning the original example by Shawn, in which you would send text messages, into an image-based chat. In the final result, people can copy the “Image Address” of a web-based meme, paste it to the text box of the chat, click send, and the meme will appear above it under the last meme that was sent.

user-interaction example recording
Work-flow and technologies used

In the back-end of the code, we are running a Node.js server hosted in a Virtual Private Server (VPS) provided by Digital Ocean. Node.js “is an open-source server environment designed to build scalable network applications.” It is “perfect for data-intensive real-time applications that run across distributed devices”. Thus, Node allows supporting WebSockets with our own servers and handles the protocols necessary to make a socket event-style programming work.

A WebSocket is “a persistent connection between the client and server” meaning that it “enables real-time, bi-directional communication between web clients and servers”. To code WebSockets in Javascript we are using a library for realtime web applications called Socket.IO. It has two parts: a client-side library that runs in the browser, and a server-side library for Node.js.

We are also running Express which is a Node module for building HTTP (Hypertext Transfer Protocol) servers. In order for it to work in the way we are coding it, all the public content of the website (HTML, CSS, images, videos etc that are part of the interface of the webpage) needs to be inside a folder called public in the same directory of the file server.js.

As part of the workflow we are using Fetch to be able to upload our files to our VPS. Fetch allows to connect via SSH (Secure Shell) to the server to transfer the files.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: