Live Web weeks 2-3: Socket to me
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.
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....
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):
And screen cap of my very basic design, learning the CSS alongside the rest of the languages:
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.