Live Chat (Alpha) in UserCP SF 0.7517

Interesting....

I am still working on the kinks for Live Chat here at unix.com using a publish-subscribe API from PubNub. Two days ago while working on it, a new user joined the live chat and asked about how to post a new thread in the forum. Then today, one of the members of the PubNub team found our Live Chat link (a surprise to me) and updated the status of a support ticket we have open with them:

The system is starting to work; however, there are things to do:

  • Debug why the live chat page often needs a reload to render in the browser.
  • Debug why the vue.js PubNub API is buggy and presence works but intermediately.
  • Add "who is in live chat" and other features as I debug.

Basically, it works but not as it should to be very usable.

I think the way ahead is to comment out the vue-pubnub API and use the standard PubNub SDK . The only way I was able to get chat history to work was to bypass the PubNub vue.js API and use the plain Javascript SDK API .

Thanks to PubNub for their support. Working with their tech support team has been helpful, for sure. Also, their team has been following up and has taken a interest in our project, which is nice of them.

2 Likes

Update: SF version: 0.7519

  • Solved the presence bug which gives a total number of people in the chat. Solved this by moving off the vue-pubnub wrapper and moved to the core PubNub Javascript SDK .
  • Created a "Joined Chat" message when users join chats and created a status message for when a user times out or leaves cleanly, but since no one cleans cleanly (when I debug) I need to find a way to trap all the "unclean exits".
  • Fixed some bug in setting chat users names for guests, but then created another bug for members with user names :slight_smile:
2 Likes

Neo - thanks for working with us at PubNub Support. We are actively working on updating the Vue SDK Docs with at least an "OUTDATED" message in the short term and long term, a new Vue SDK that lives up to the JavaScript SDK. Not sure how that Vue SDK got released in that condition but again, thanks for vetting it and reporting back to us.

We'll (SDK engineer manager and I) be in touch with more very soon.
Cheers
Craig

--- Post updated at 09:59 PM ---

Neo - just a heads up on a cool, new feature: Message Counts. This is a form of the history call that let's you get the total number of messages since a given timetoken on multiple channels. In short, it gets you message counts per channel instead of the message payloads (a bit of an overhead savings, when needed).

Cheers
Craig

1 Like

Hi Craig,

Thanks for checking in and keeping up up to date on PubNub.

No worries at all on the Vue.js SDK .shortcomings.

I have been able to get things rolling with the PubNub Javascript libs sans the Vue.js wrapper in a Vue.js app easily enough.

Never been a big fan of wrappers anyway and in this case PubNub works better without one! :slight_smile:

Making progress.... step-by-step.

I may shift dev to the PHP side so we can easily pass messages back and forth between Vue.js and PHP .

Or I may stick to JS for a few more days.

1 Like

Neo - great to hear you are having success with JS SDK. That is the typical DX for customers on our more popular SDKs, but no excuse for the other SDKs (wrapper or not) should not be feature complete. Thanks for lighting the fire under our butts on this one. Sometimes the edges get forgotten when you are blazing ahead with innovative features.

When you shift gears to PHP, be sure to reach out with any questions. There are some best practices when it comes to server side realtime. For example, if you are tempted to subscribe from the server side, think about using PubNub Functions and xhr'ing to your server (as needed) or using Presence Webhooks if there is a need to monitor channel activity on a global scope.

Whole lots of gotchas that we can steer you around if you don't already know about them.

Cheers
Craig

1 Like

Thanks Craig!

If you have a link to your most up-to-date server side PHP best practices, that would be great to share with us.

I am also interested in using PubNub for command and control (C2) messages between subscribers (perhaps more so than live chat).

1 Like

Update SF version: 0.7528

  • Removed annoying "join and leave" messages from chat window. I added this yesterday and it's simply too annoying. My bad.

Next, I think I need to spend time on the initial Vue.js bug which is causing the initial page render to be blank (requiring a reload) based on some incomplete PubNub AJAX calls (race conditions). This results in "undefined" Javascript errors I need to trap and deal with. These async AJAX timing and race conditions can be tricky to deal with (trap all possible errors) in all of these types of apps which make asynchronous REST calls to a remote API . I'm having some issues on initial page load where the REST'ful AJAX calls to the PubNub API are not returning fast enough and this is causing errors on initial page load and this is the reason why a page reload works (and is often required) after the initial loading.

This issue is really is nagging me and it impacts every possible variation of this publish-subscribe Javascript project moving forward. This is a Vue.js lifecycle problem and not a PubNum API problem. However, I have not completely switched out all the "OUTDATED" Vue.js wrapper code, so maybe if I get rid of it and just use the "unwrapped" SDK, I will get better results? Actually, I kinda doubt it because I have seen these kinds of AJAX race conditions many times over the years. This is the bane of using async remote calls. It's also an issue I have seen in game engine (the game loop) programming.

We should just jump on a conf call and discuss your plans and talk about those best practices specific to your requirements.

Sounds good.

Get me your mobile number and/or What's App ID (privately if your prefer) and let me know what time zone you are in.

Me: GMT+7

I can Skype or What's App you :slight_smile:

PS: I'm normally available 997 in GMT+7 :slight_smile:

Also, Craig...

Here is some "high level" background of where we are planning on going with this:

UserCP Screeching Frog 0.7533

  • "Fixed" REST'ful API race condition (bandaid) to PubNub API by wrapping a two second delay in the Vue.js mount() lifecycle hook around the .

Now the chat window shows "OK" but there is an occasion AJAX race condition on the addListener() in the same lifecycle hook.

Progress... but not yet fully "race condition error free"..... but it's much better for sure. In fact, I could call this "good enough" for now and move on to other issues in the venture :slight_smile:

Hey Craig,

FYI, I think before I move much further forward in this venture, I'm going to create a new Vue component where I remove all vue-pubnub SDK references and rewrite all API calls with the PubNub Node.js V4 SDK 4.23.0.

I am having issues with AJAX race conditions and I'm hoping having all the methods using a very clean pubnub instance built with node.js will solve the problem I am having going back-and-forth between the "OUTDATED" Vue.js docs and the Javascript SDK docs.

Today, I worked for hours and solved some race conditions using JS timers to delay some methods, but need to move to a promise-based callback design where the AJAX callbacks are clearly defined so I can gain more control over the AJAX timing issues. Using the vue-pubnub component lib seems to not really give me clear promise-based callbacks to build a "race condition free" component in the Vue lifecycle.

Dear Craig,

I am impressed with PubNub Node.js V4 SDK 4.23.0.

Have removed all references to vue-pubnub on this new component, and it seems to be running much better. Just started testing and so far there are no race conditions and it appears to run "clean". I may be able to remove the 2000 ms "bandaid" delay in the AJAX call. Time will tell So far so good.

UserCP Screeching Frog 0.7539

https://www.unix.com/usercp/#/livechat

Everything is working smoothly and I can start adding the objects I want from herenow() and refining the implementation.

Now, I am a happy PubNub camper!

That made a huge difference moving off the vue-pubnub lib and on to the standard node.js SDK. Yea!

UserCP Screeching Frog 0.7542

Have fixed some bugs and am very excited and positive about the PubNub Javascript node.js SDK .

However, I have created another bug related to guest usernames and uuids.

UserCP Screeching Frog 0.7544

Increased vue.js lifecycle hook delay to 2 seconds from 1 second, and the pubnub race condition errors seems error free.

More testing....

UserCP Screeching Frog 0.7548

  • Decreased vue.js lifecycle hook delay to 1 seconds from 1 second.
  • Commented out "troublesome and not required" status code (race condition).
  • Added users to the status message below chat.

Seems to run "OK" now, for such a simple app. I think time to take a step back and decide on what direction to go with PubNub here.

UserCP SF 0.7556

Now live beta testing the PubNub infrastructure.... FYI

Just wanted to follow up and make sure we have resolved all issues related to PubNub. We thank you for hanging in there with us to work through the issues you encountered which will help us improve our product/service.

Cheers
Craig

1 Like

Hi Craig,

Thanks for checking in.

All is looking good at the moment.

Thanks for the great PubNub support.

Soon, I will put together a presentation related to cyberspace situational awareness (cybersecurity) and plan to include a pub-sub network like PubNub at the center of the architecture.

1 Like

Great! Do let us know if you need to chat about the requirements for PubNub best practices.
Access Manager will be a big part of that and perhaps you will want to take advantage of the new version of Access Manager that is not currently documented or publicized, but is available.

Cheers
Craig

1 Like

Hi Craig,

Thanks for the offer for a conference.

I'm deep into a number of projects at the moment, so if you don't mind, I'd love to schedule and take you up on the offer after I get further along in my new Cyber Dystopia video episodes. The new short clips are deep background info for some cyberspace situational awareness discussions to come in later episodes.

If you can share with me any media which I can use in my future videos where I build some architectures around PubNub (Keynote presentations, HD video clips, or even Adobe After Effects templates,, etc), that would be great. I'm not sure how much of your internal media library you can share (but that would be easier for me so I don't have to rip screen captures off YT, LOL), that would be great.

Access to your entire media library would be cool... haha.. but I doubt that's going to happen!! :slight_smile: . Maybe your media team has some great Ae templates or HD footage which animates PubNub concepts?

Probably best to discuss the specifics of what you need. But anything in the public domain I'm sure you can reference. Maybe a joint video is possible?