Online status and internet connection presence with Soketi and working offline

[Luyanda Siko]

Recently, I had to write a small assessment application developing a Chat System. I wanted to have the ability to test my work, and much more integration with Chatify offline. I have looked at various sources to get my demo working and am really happy with Chatify.

The screenshot above shows one issue connected with the Internet Status Check feature.

  // check if pusher has access to the channel [Internet status]
  pusher.connection.bind("state_change", function (states) {
    let selector = $(".internet-connection");
    checkInternet(states.current, selector);
    // listening for pusher:subscription_succeeded
    channel.bind("pusher:subscription_succeeded", function () {
      // On connection state change [Updating] and get [info & msgs]
      if (getMessengerId() != 0) {
        if (
          $(".messenger-list-item")
            .find("tr[data-action]")
            .attr("data-action") == "1"
        ) {
          $(".messenger-listView").hide();
        }
        IDinfo(getMessengerId());
      }
    });
  });

It seems like the pusher:subscription_succeeded channel itself is not supported by Soneki and this, frankly is nothing to do with this library. However, I still fill like there still exists a need to circumvent this issue when using Soneki instead so that we perhaps provide an alternative solution.

pusher.min.js:8 Pusher :  : [{"type":"WebSocketError","error":{"type":"PusherError","data":{"code":4001,"message":"App key app-key does not exist."}}}]
t.globalLogWarn @ pusher.min.js:8
pusher.min.js:8 Pusher :  : ["Client event triggered before channel 'subscription_succeeded' event . See: https://pusher.com/docs/client_api_guide/client_events#trigger-events"]

As a Developer, I would like to be able to see who is and who isn't online. Also, I want to be able to have the internet connection check working, in the case of using Soketi service.

Is there any way that I could perhaps employ as an alternative to work with Soketi to resolve this issue? Looking forward to your input and thanks for a great library.

My demo application can be found here scruffycoderofficial/tribes-messenger for review.

[Munaf A. Mahdi]

@scruffycoderofficial I did not tested other web socket servers on Chatify, only Pusher and Laravel WebSockets been tested well and working as expected. But, the events you see are Pusher's library events so it's not related to the server you are trying to connect .. so make sure you have configured it well and try to track the events or the config ..etc to see what's going with you server.

[shininglove]

Ran into this issue as well, it looks like the front end uses a hardcorded connection to Pusher: https://sockjs-[cluster].pusher.com:443/pusher/app/

I tried looking around the codebase and couldn't find where this was being set. it didn't seem to be using the env variables

[Munaf A. Mahdi]

@shininglove how you figured out that it uses hardcoded connection!
The connection is being set from config/chatify.php and passes to the client .. and the issue is not about the connection itself

[shininglove]

@munafio I found it harcode client url from this:

[shininglove]

Sorry the issue was not having the enabledTransports: ['ws', 'wss'] to the Pusher client in code.js. The issue wasn't from chatify

[shininglove]

@scruffycoderofficial I got it to work changing the Pusher client in public/js/chatify/code.js to this

const pusher = new Pusher(chatify.pusher.key, {
    wsHost: chatify.pusher.options.host,
    wsPort: chatify.pusher.options.port,
    cluster: "",
    forceTLS: chatify.pusher.options.useTLS,
    authEndpoint: chatify.pusherAuthEndpoint,
  auth: {
    headers: {
      "X-CSRF-TOKEN": csrfToken,
    },
  },
});

[Luyanda Siko]

Sorry the issue was not having the enabledTransports: ['ws', 'wss'] to the Pusher client in code.js. The issue wasn't from Chatify

I think it still makes sense to provide users with the ability to see whether their Contacts are either online or not. The package is rigid in that it only allows you to work with Pusher in mind. Though oftentimes other Web Socket implementations base their designs on Pusher, it seems like it would make sense to add a feature so that we can choose which service provider we would like to consume.

At the end of the day, using Soketi, my connection does not seem to keep the state of connected nor does it ever show that it ever was connected. This may be the issue with the Soketi Server but also, as a good programming principle's adoption, I think we could also provide varying implementations extending pusher to allow developers to integrate easily.

Pusher :  : ["Connecting",{"transport":"ws","url":"ws://127.0.0.1:6001/app/app-key?protocol=7&client=js&version=7.2.0&flash=false"}]

Furthermore, I noticed that Pusher is instantiated two times, both with bootstrap.js which is imported in app.js. Chatify also instantiates the same pusher object which seems to be redundant.

I am still trying to figure out how I can resolve these issues I have using Soketi as I am also trying to understand that platform. It's most certainly a good thing to give each other feedback and talk about our ideas.

Since there is nothing that can really be done at this stage, I will close this issue.