JSFiddle - React, Tailwind, and code Playground

by jcreamer898

JavaScript

var SocketConnectivityFsm = machina.Fsm.extend({

    // we'll assume we're offline and let the app
    // determine when to try and probe for state
    initialState: "offline",

    // The initialize method is invoked as soon as the
    // constructor has completed execution. Here we
    // set up listeners to the various events that
    // could indicate changes in connectivity
    initialize: function () {
        var self = this;

        // The "stethoscope" is simply an object that can 
        // send a message to a web socket endpoint & emit a
        // heartbeat event if a reply is received within a
        // specific time frame, or a no-heartbeat otherwise.
        _.each(['heartbeat', 'no-heartbeat'], function (eventName) {
            self.stethoscope.on(eventName, function () {
                self.handle.call(self, eventName);
            });
        });

        var needsProbingFn = function () {
            self.handle("needs-probing");
        };

        // Any time our socket emits one of these events, we're going
        // to play it super-safe and transition to probing to make
        // another heartbeat check (instead of polling for one)
        _.each(
            ['connect', 'connecting', 'connect_failed', 'disconnect',
            'error', 'reconnect', 'reconnect_failed', 'reconnecting'],
            function (eventName) {
                self.socket.on(eventName, needsProbingFn);
            }
        );

        $(window).bind("online", function () {
            self.handle("window.online");
        });

        $(window).bind("offline", function () {
            self.handle("window.offline");
        });

        $(document).on("resume", function () {
            self.handle("device.resume");
        });
    },

    states: {
        probing: {

            // the "_onEnter" handler is a special machina
            // feature that gets executed as soon as you
            // enter the state. This is our "entry action".
           ...