PHP Ratchet Wamp Broadcast Subscribers to Publish Events

Question

I am developing a web application where I need real-time behavior for the following scenario,

The application will have two types of users: Player and Spectator . Players can join the game, while spectators can simply see.

The game will be initialized by the administrator user.

The viewer is basically someone who can see a list of people who have joined the game. Of course, this should be in real time when a player disconnects or a new player joins a game viewer who sees a real-time list.

To summarize, consider the example below

 Spectator_1 joins Clan_101 Spectator_2 joins Clan_201 Player_1 joins Clan_101 // Need to broadcast this event to Spectator_1 Player_2 joins Clan_101 // Need to broadcast this event to Spectator_1 Player_1 disconnects Clan_101 // // Need to broadcast this event to Spectator_1 Player_11 joins Clan_201 // Need to broadcast this event to Spectator_2 Player_12 joins Clan_201 // // Need to broadcast this event to Spectator_2 

Given the current game as a theme / channel ( Ratchet\Wamp\Topic ), I need to transfer the following player join and player left events to the game in the game / theme that the audience has subscribed to.

I am using Ratchet WebSockets for PHP on the server side and autobahn js on the client side

Below is the code. While I can send information to the server (from the client), when the player joins / disconnects the game. But how do I transmit this information to the audience (end of client) when a player joins or disconnects.

player.html

 <script src="scripts/autobahn.js" type="text/javascript"></script> <script src="scripts/jquery-1.11.2.min.js" type="text/javascript"></script> <script> ab.connect( 'ws://localhost:8080', function (session) { appSession = session; $('#btnJoinGame').on('click',function(){ session.publish('joingame', ['data','GAME_ID']); }); }); </script> 

spectator.html

 <script> var conn = new ab.Session( 'ws://localhost:8080', function() { conn.subscribe('spectator_GAME_ID', function(topic, data) { console.log(topic); console.log(data); }); }, function() { console.warn('WebSocket connection closed'); } ); /* OR Using the legacy syntax */ /* ab.connect( 'ws://localhost:8080', function (session) { session.subscribe("t1011", function (topic, event) { console.log(event); }); } ); */ </script> 

Server.php

 require __DIR__ . '/vendor/autoload.php'; use Ratchet\Wamp\WampServerInterface; use Ratchet\MessageComponentInterface; use Ratchet\ConnectionInterface as Conn; class EventHandler implements WampServerInterface, MessageComponentInterface{ public function __construct(React\EventLoop\StreamSelectLoop $loop){ $this->loop = $loop; } public function onSubscribe(Conn $conn, $subscription, $params = array()){ $subscription->broadcast($this->data); } public function onPublish(Conn $conn, $topic, $params, array $exclude, array $eligible) { if($topic->getId() === 'joingame'){ if(!isset($this->data[$params[1]])){ $this->data[$params[1]] = array($params[0]); }else{ array_push($this->data[$params[1]], $params[0]); } } /** DOES'NT WORKS **/ $newtopic = new Ratchet\Wamp\Topic('spectator_GAME_ID'); $this->onSubscribe($conn,$newtopic); } /*Omitting other methods for brevity*/ } $loop = React\EventLoop\Factory::create(); $webSock = new React\Socket\Server($loop); $webSock->listen(8080, '0.0.0.0'); // Binding to 0.0.0.0 means remotes can connect new Ratchet\Server\IoServer( new Ratchet\Http\HttpServer( new Ratchet\WebSocket\WsServer( new Ratchet\Wamp\WampServer( new EventHandler($loop) // This is my class. Pass in the loop! ) ) ), $webSock ); $loop->run(); 

Answer 1

First of all, this answer is probably too late for you, although I will answer it for the record.

Once you have installed several channels in your application: spectator_GAME_ID

You want to see who is playing the game you are watching. And the reason you use WebSocket is because you can see the changes in real time.

First of all, you should understand that Themes are different channels / gameId.

Once you realize this and use the code that is shown on the example page of the ratchet mechanism itself.

  $entryData = json_decode($entry, true); // If the lookup topic object isn't set there is no one to publish to if (!array_key_exists($entryData['category'], $this->subscribedTopics)) { return; } $topic = $this->subscribedTopics[$entryData['category']]; // re-send the data to all the clients subscribed to that category $topic->broadcast($entryData); 

In their example, they use categories in their JSON string, you will probably change this to gameId.

Once you do this, you can only send data to those who listen to a specific gameId.

---

The second part of your question was to send them updates and how to find out what the update is.

The easiest way is to add a string to the sent JSON object that is being sent

 { "action": "join", "gameId": "123", //so that you know to which game to publish it "userIdThatJoined": "123456789", //whatever other data you need "userNameThatJoined": "Foo Bar" } 

Once this is sent, you should receive it on the client side and check the action if the action is "join", then add its name to the list. If the action is “leave”, remove this user from your list.

You can update your display in the list of active players using any function called after the update, or use a simple ng-repeat from angular, and then simply apply new values ​​to it.