2019-03-07

    MobileLab: WebSocket interaction and failed server

    👉 Source code is here

    demo-gif

    Development

    To complete the basic requirements of this week's assignment, which is building a controller to interact with WebSocket server, I made huge diamond shape arrows as direction control. Here's the takeaways and notes of the development process:

    1. Drawing UIBezierPath

    The way to drawing bezier path in Swift is identical to drawing SVG path in JavaScript. I followed this great answer on StackOverflow to complete the drawing.

    2. Getting used to modulize code in Swift

    draw-arrow-class

    Creating bezier paths in view required multiple identical snippets of codes. To follow my good modulization practice in my JavaScript development model to keep the code clean and accessible, I tried to put all the functions about drawing shapes into another file. Though it took me a while to get familiar with the structure, it's totally worthy.

    3. touchesBegan function

    touches-began

    Because the arrows were instances of UIBezierPath, attaching event listeners to them weren't easy. Thanks to this example code, I implemented this touchesBegan function to detect touches on the arrows. I processed values of location and point coming from the event to retrieve the touched arrow.


    Attempts to set up WebSocket server

    invalid-http-upgrade

    I was interested in setting up a WebSocket server and actually tried to make it. The server in browser environment seemed to be working right, but I got the error Invalid HTTP upgrade in Swift and couldn't resolve it. I got a vague idea that it's about my Node.js server wasn't configured correctly to translate HTTP to WebSocket though.