Websocketing it up for snail movement

Over the past few days I’ve paused work on the brain to tackle snail movement on the client.

I ended up using Latchet, a Laravel-specific extended version of Ratchet. To start with I just wanted to get something running. I think I ended up doing this in a really roundabout way…basically we subscribe to a specific jar topic on the client, then ping the server every 5 seconds to get back the target position of each snail within that jar. The snail then crawls toward this target position. Target pos on the server is calculated using the snail’s currentSpeed and each snail crawls at the same speed in the browser, so in theory by the time the snail reaches its target position on the server it will also have reached the same location on the client…maybe…I hope. We’ll see.

	var jarString = 'jar/' + jarID;

    var conn = new ab.Session(
        'ws://gastropoda.app:1111', // The host (our Latchet WebSocket server) to connect to
        function() { // Once the connection has been established
            console.log('established');
            conn.subscribe(jarString, function(topic, event, jarID) {
                var parsedMsg = JSON.parse(event.msg);
                if (allSnailsArr.length > 0) {
                    for (var i = 0; i < allSnailsArr.length - 1; i++) {
                        if (parsedMsg.snailID === allSnailsArr[i].snailID) {
                            allSnailsArr[i].targetPosX = parsedMsg.targetPosX * jarCapacityWidthPercentage / 100;
                            allSnailsArr[i].targetPosY = parsedMsg.targetPosY * jarCapacityWidthPercentage / 100;
                        }
                    }
                 }
            });

            (function checkPositions() {
                conn.call(jarString, "HI WORLD");
                setTimeout(checkPositions, 5000);
            })();
        },
        
        function() {
            // When the connection is closed
            console.log('WebSocket connection closed');
        },
        
        {
            // Additional parameters, we're ignoring the WAMP sub-protocol for older browsers
            'skipSubprotocolCheck': true
        }
    );
</script>

{:lang=“javascript”}

Then, in JarTopic.php:

	public function subscribe($connection, $topic, $jarID = null)

	{

        $jarController = new JarController();

        $jar = $jarController->findJar($jarID);

        $allSnails = $jar->snails;

        foreach ($allSnails as $snail) {

            array_push($this->connectedSnailsArr, $snail->snailID);

        }

        $this->publish($connection, $topic, "BROADCASTTEST", $exclude = array(), $eligible = array());

	}

{:lang=“php”}

	public function call($connection, $id, $topic, array $params)

	{

        $this->broadcastTargetPositions($topic);

	}

{:lang=“php”}

    public function broadcastTargetPositions($topic) {

        $snailController = new SnailController();

        foreach ($this->connectedSnailsArr as $id) {

            $snail = $snailController->findSnail($id);

            $msg = json_encode([

                'snailID' => $id,

                'targetPosX' => $snail->targetPosX,

                'targetPosY' => $snail->targetPosY

            ]);

            $this->broadcast($topic, array('msg' => $msg ));

        }

    }

{:lang=“php”}

You can’t see it…but they’re moving! When they don’t find anything interesting to approach they stop, and when they sense something they’re curious about they start crawling toward it.

Go your own way

comments powered by Disqus