week 4 - Xaoh Socket.io Library (presentation)

Eric Weinstein said recently in a podcast that there is a part of us that is dying to be seduced and sold something, an illusion. Our team got really interested this week in these and how we might do something similar with our presentation, given the expectation of a live video broadcast. There are other examples that we see in our daily lives that we don’t really think twice or complain about. So we sought to explore that and spark a conversation in class.

But is he really there?

But is he really there?

week 3 - Interactive Chords

Let’s play a song!!


I made an interactive musical web page where users can build chords by placing their mouse over the designated notes. I thought it would be fun for multiple users to login and play the chords together. And in doing this, I began to understand the limits of synchronous programming.

So I started with this p5 sketch and met with Shawn to help port it over to work with my socket server. The end result works ok on it’s own - try it out!!!

The problem is that as soon as new users login, it gets a bit squirrelly trying to get through the draw loop. So I sat down with Cassie and she showed me some ways to create this sketch again using a for loop of <div>’s with class ID’s for hovering events and such. Here is what she showed me. This will work much better when more users are on.

Week 2 - Chat Server

I modified the chat server example Shawn gave us here. I started with an animated “Loading…” message which is obviously superfluous, but I dug it in a 90’s kind of way. This builds anticipation and gives the impression that something significant is happening/has happened. It’s based on a number of <code>setInterval()</code> loops and end with a <code>clearInterval();</code>command after a certain number of loops and a callback function to trigger a “Welcome” message.

The “Welcome” message is a short line and a fun bit of Beavis and Butthead ASCII art. I loaded this <code>.txt</code> from the server using the <code>ajax.js</code> example that Shawn provided and had to use the <code><pre> </pre></code> tag from this Stackoverflow disucssion around the ASCII art in the text file to get the format right.

I also wanted to track user names, which I was able to do based on the <code>socket.id</code> value in the <code>server.js</code> file. Cassie was able to help me troubleshoot my issues with sending the <code>socket.id</code>. I did not realize that I needed to kill to server process on my droplet in order to upload a new <code>server.js</code> file. I was under the impression that it acted the same as uploading a new <code>index.html</code> file. So I would see the changes on the front end, but nothing would change on the back end. Cassie showed me the <code>ps -aux</code> bash command which lists all the running processes on my server. From there we used <code>ps -aux | grep “node server.js”</code> to get the process ID of the running server and then killed it with <code>kill -9 "<process id>”</code>. This was very helpful as I had been making changes and not seeing any results!!

So now when a new user sends a message, their <code>socket.id</code> is prepended to it. I would like to give users a way to enter a user name and have it be stored to their unique <code>socket.id</code>, but I didn’t have enough time before class. Cassie suggested creating a <code>const userList = { };</code> object and having the user input their own username and store the value in a key/value pair as <code>userList[socket.id] = “<username">”</code>.

Week 1 - Self Portrait

A self-portrait can be many things. Indeed we are many things. I myself wear a number of different hats in any one day, and my identity is an amalgamation of many sub-personas that I have worked to integrate throughout my life. Some of these personas I loathe and some I cherish. They are all here nonetheless.

I had a bit of fun with this. I was able to get some interactive elements with video, changing on click and showing and hiding different videos. Although I wasn’t able to get the exact interaction I wanted, I like the cacophony that ensues as the videos fail to pause and play as intended. You can view the “piece” here - https://billythemusical.github.io/live-web/week-1-self-portrait/


Live Online Platform - As far as a live web platform to check out, I really like Twitch. It’s a place where people go to watch other people, called streamers, play video games live. It is an incredibly robust platform with hundreds of games to choose from like World of Warcraft, Fortnite, PUBG, League of Legends, Call of Duty, and NBA2K. There many thousands of streamers, all playing live at any time of day. Some of the biggest streamers have upwards of a hundred thousand viewers each time they go online.

Follower-ship is balanced on a sliding scale between skill and showmanship. One of my favorite streamers is DrDisrespect - an uber-macho RPG player who sports a real mullet, Oakley-style sunglasses, and a thick mustache. He explodes with loud grunts and profanities when he gets a win and talks tons of crap, even when playing alongside very young competitors (I think the site is limited to those over age 13). When “Doc,” as he’s affectionately known amongst his followers, goes online, there are thousands pouring in to the chat stream, which runs live with each broadcast.

Since streamers can garner so many followers, there’s a large sponsorship and advertisement network attached, and it is estimated that the top 10 gamers garner over $20 million/year between them (source). While logging on to Doc’s stream today, I saw an ad beforehand which had the caption “This Ad Goes To Support DrDisrespect” which I thought was interesting. These streamers are basically afforded their own broadcast network. And the professional gaming industry is fast-growing industry, not only in an online context, but in actual live events where attendees can watch their favorite players and teams compete in the flesh.

The site’s tag line is “Don’t just watch, join in”:

Welcome to Twitch. We are a global community of millions who come together each day to create their own entertainment: unique, live, unpredictable, never-to-be repeated experiences created by the magical interactions of the many. With chat built into every stream, you don’t just watch on Twitch, you’re a part of the show.