Startup Clix: ESLint & Winning with Pusher Application State

Yesterday I fought, today I won!

Today was about gettig cross site requests running and fixing my Pusher application state problem.

CORS

Somehow I can't get CORS to work with AWS SAM. It seemingly still needs Swagger to work, even though they wrote in a realease note a few versions ago that CORS is fixed. I had the impression fixed means Swagger is not needed anymore, haha.

Well, I don't have time to waste here, so I'm using JSONP now. It can only do GET requests, but I think this will be enough, I don't intend to send much data in one request.

On the front-end I'm using fetch-jsonp and Pushers JSONP transport for auth requests.

On the back-end I extended my tiny kappa library to wrap the body in a jsonp callback if one is present it the queryStringParameters.

exports.handler = (event, context, callback) =>
  lambda(event, context)
    .then(r => {
      if (r) {
        if (r.body) r.body = JSON.stringify(r.body);

        const jsonpCallback = event.queryStringParameters.callback;
        if (jsonpCallback) r.body = `${jsonpCallback}(${r.body})`;
      }

      callback(null, r);
    })
.catch(callback);

So the whole thing now works without the browser extension, YAY!

Pusher Application State

Like every good dev I can't really tell why it works now. :D

Joke aside, the callback I passed into pusher.get() got three arguments, error, request andresponse.

I always tried to log the error to find out what happened, but Pusher had an error description inside response.body. Well, when I finally found these, fixing was just a quesion of using the right param

ESLint

I was already using Prettier, but also added ESLint, because

package -> deploy -> error -> open CloudWatch

Just didn't cut it anymore :D

90% of the errors were variable not defined or wrongful const overrides.

I'm a front-end guy and the pain from switching to the browser and refreshing to see the errors probably wasn't big enough to use ESLint until now.

Maybe I'm going to add Flow if I get to much undefined errors later.

Channel Join Logic

I got a basic channel join logic going.

If no channel exists or all channels are full, a new channel ID is created and send to the client, otherwise the client gets an existing channel ID. At the moment just 2 players are allowed per team, makes testing simpler :)

The same thing is checked in the /pusherauth endpoint, so if you got a channel but it's full til you join, you can't, lol.

This is a race-condition, if someone has a nice solution for this: let me hear.

Next

I gonna look into AWS Step Function to model the game state on the server. While I already checked that it has all the functionality I need, now I got to learn about the API.