sketchni

[sketchni]

Websockets and stuff.

I've been thinking about how to handle writing a timeline-type feature for UKBlabberbox for the last 3 or 4 years.

I know the back-end of it will be processing posts and comments through PHP and I've got that down. However, the front-end is what I'm unsure about. I had previously used jQuery to prototype it but the problem with that is when you have a link to interact with jQuery (such as clicking a "Like" button), it fails. This is because jQuery only works with events already in the HTML DOM when the page is first loaded.

This is a pain and needs a better solution. I tried out ReactJS by Facebook. It seems to be a very powerful little library but I have trouble getting it work (I am not a javascript programmer). I have also trie out VueJS as it comes already bundled with Laravel which is the PHP Framework I use for UKBlabberbox (the logic behind that choice would be a whole other post). VueJS is nice. It has a clean syntax and I like how seperate components can be in seperate files and that you can map different components to different instances. So I chose VueJS.

Next thing that is needed is a way to inform the user that they have new posts to view from their friends. With jQuery, I used setTimeout("updateTimeline", 10000) to refresh the feed. I think you see the problem here. Imagine being scrolled down 50 tweets on Twitter and suddenly you're back at the top because the feed refreshed. It was annoying, hacky and badly designed. Requiring the user to refresh the page to see new posts is also out because this is 2017. Not 2008 MySpace or Bebo. How to solve this problem? Well, I considered using websockets with NodeJS.

I decided against that as I don't know too much about how they work. I had heard of Pusher via Laravel which has some Pusher stuff bootstrapped in. I tried Pusher out this morning and was sending events to Pusher from php artisan tinker and Pusher was broadcasting those and (while using the demo javascript Pusher generates for you) was picking up that something had changed and updated the page with the data I was entering via tinker. I think we're one step closer.

However, I noticed via the browser console that Pusher uses websockets so my thoughts are now running along the lines of this: (massively simplified)

UserBob posts status "Just seen the new movie. Very good! 5/7"

UserBob presses "Submit"

jQuery detects a status form has been submitted and passes it off to axios

Axios hands that off to the PHP backend which validates the data and stuffs it into the database.

PHP then checks a list of UserBobs friends and wraps their uuids in a json object and fires off a PHP event to broadcast that to the websocket channel user.timeline.{uuid} which then pushes it to Vue which is listening to that channel and sends a nice little update to the DOM saying "There is|are 1/n new post|posts" wrapped up in a <div id="newPostsAvailable"></div>

UserEmma clicks on the div and jQuery pings off axios to grab the posts, returns them as a json object and passes the object to Vue which formats the posts and inserts them into the DOM and, as they say, "bob's your uncle".

The only drawback to this process I can think of is that I have to write a lot of javascript which I dread doing however, axios and Vue are very nice libraries to work with.

If you read all of this then please, help yourself to a Christmas Cookie.

Peace and turkey grease,

Sketch