Best practice when using websockets?

Question

I got a webapplication written in Laravel 4. This application makes use of Ratchet and to be more specific, it uses the package Latchet. As a sidenote I am using the following techniques :

• AutoBahn JS
• ZeroMQ
• Ratchet

Now I got the following scenario:

• I have a slideshow which should receive updates through the websocket.
• The whole application is setup and I can publish new code changes from PHP to my websocket clients through ZeroMq.

• In my routes.php, I have the following code, so that a topic is registered correctly :

  //routes.php
  // Setup a connection and register a topic where clients can connect to.
  Latchet::connection('Connection');
  Latchet::topic('PhotoStream/{client}', 'PhotoStreamController');
  

• Then, I start the ratchet server.

sudo php artisan latchet:listen

When a photo gets uploaded, I can then run the following code to push updates to the clients that are listening to my topic (PhotoStream/client1 in this case):

// Create the object, save it to db and then publish it to my websockets
$photo = new Photo;
$photo->location = 'path/to/file';
$photo->save();
// Publish it through my websocket clients. (push from server).
Latchet::publish('PhotoStream/client1', array('msg' => $photo->toArray() ));

This code all works, but it is in case of an update. My question is as follows:

How should I handle the initialisation of the client?

1. Should I first render the page with plain old PHP and then initialize my websocket client which then receive further updates (if there are any)?.
2. Or should I, when I register a new websocket client, give an extra parameter with the request so the server sends me the complete data through websockets?

The latter of the two options seems the best option to me but I don't really know how to implement this in a good way.

Answer 1

If understood your question in the right way this is it: You are wondering if sending images over the websocket is a good idea if those images could also be preloaded form PHP.

I would suggest you to use PHP to preload the images without using the websocket and would start using the socket once new images are being added.

This way the user should see images from the moment the page is loaded and they will not have to wait for the websocket connection to be established.

If you prefer to do the loading over the socket I would still suggest you to load the first few images from the slider, that can be seen immediately, from PHP. Otherwise the user will have to wait longer(note that much, but noticeably longer still).

Answer 2

On the javascript side (to retrieve initial list):

//session.subscribe(....)

session.call('route/to/controller', arg1, arg2).then(function(res) {
   console.log(res) //initial collection of photos
});

On the php side (to retrieve initial list):

public function call($connection, $id, $topic, $params) {
    //the id is needed to be able to trace your async calls back to the right promise
    $connection->callResult($id, $this->getInitialPhotosFilteredByParams($params));
});

Since you already successfully gotten updates via the subscribe, this is all you need. Watch out for xss though, params might not be filtred.