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

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.