The beginning few weeks of this class were extraordinarily challenging, and I was fairly unmotivated to document my homework as I really wasn't progressing in any way that I was comfortable sharing. I began a weekly office hours routine with Shawn, which hopefully expressed what work was churning under the surface as I tried to get up to speed on the coding chops necessary for the class. So full disclosure, this documentation is coming in way post-facto. Sorry.
Triathlon Training
Last spring I overexerted myself by trying to grasp too many technical languages at once, so I designed my schedule this semester so all of my technical focus would be on locking down live web material. I'd spent a semester away from front-end focused development (I moved toward Python for generative text and Max MSP for live image processing), which put me at a disadvantage from the outset. Much of my beginning weeks were spent studying inline javascript just so I could actually attempt the assignments. I definitely thought I got in way over my head throwing web sockets into the mix when I barely had a grasp on the logic necessary for basic presentable front-end interactivity—the story ends well (so far), but at the time I was feeling fairly... well, fucked. I tried to reframe it as the pain of training for a physical event, like a triathlon, that my body was unaccustomed to; the first few weeks will be painful and it is a decision to continue beyond that which makes one an athlete.
The first challenge—to create the most basic chat module using socket.io—was so beyond my skill level and I ended up taking office hours with Shawn, Joey, and Alden that week to try to get the weakest grasp of the material. I ended up working through the issues with Alden and was able to take the in-class example and shape it into a semblance of a chat space. Functionality and presentation was incredibly simple: you could type a message in an input box and it would broadcast to anyone on that webpage. I was able to differentiate messages sent and messages received (I differentiated by labeling the message data as being sent by "Oryx" or "Crake" — a Margaret Atwood reference but basically "Me" and "You" respectively), but it was somewhat of a falsehood because anyone as sender would always be "Oryx" and they would only receive messages from "Crake" regardless of how many "Crakes" there were using the chat. Still, I was able to build on the in-class example to have the appearance of a functional chat with each message appearing on a new line as such:
Oryx: How's it going?
Crake: Pretty wild actually.
Oryx: Want to talk about it?
Crake: Maybe IRL.
I wish I had documentation of that first success, but I ended up developing further on that code before saving. On that note....
Code block
In class we got to collaborative interaction (like a collaborative drawing canvas) before I even got to the above, so I thought it would be better to iterate on what I had rather than start from scratch on a new idea. I wanted to figure out how to differentiate chat room users as you would commonly expect in such an environment. I went to Shawn to try to figure that out as well as get a sort of "walk through" of the logic of sockets, which I am really just starting to grasp weeks later despite making things work. The closest I can get is that it's like a "ping-pong-ping" between client and server sides. It's pretty abstract, but that's now how I work through the logic... the chat room is the ping-pong table. The client is the first serve and "pings" the data. The server reads the trajectory/intention of the message "ball"—this is the "pong"—and then hits the ball back with its "ping." Repeat. I am very affected by the ping-pong table now on the ITP floor, apparently.
With Shawn's help I grok-ed that users could be differentiated by providing a function that would connect an input (username) with the client ID provided by the server when they first access the chat room. I went down one road attempting to use an array method we started in office hours, but couldn't grasp it. I went back to Joey to try to push further, but his method was very distinct from Shawn's so I ended up falling pretty flat on my face on this trajectory. Still, here are my failed code attempts for the sake of documentation (scroll):
client side:
server side:
And screen cap of my very basic design, learning the CSS alongside the rest of the languages:
Code-switch
In this process I had a revelation that I didn't know why I was attempting to replicate a basic chat room. There are a million chat rooms already well-designed, and while I could learn by building one of my own it wasn't the trajectory that was necessary for anything I would use sockets for. I don't know why I got stuck in the language of "chat room" just because it was presented in such a format.
I'll be following up on this in my "week 4-5" documentation forthcoming.