Creating Realtime Applications with PHP and Websockets

Below you will find descriptions and links to the interactive demos used for the presentation.

• Mouse

  The user logger demo is the simplest of the three demos. The backend WebSocket server PHP code is fairly stock and the frontend JavaScript adds a very small amount of application logic on top of the core HTML5 WebSockets API. The application itself demonstrates real-time monitoring of user interaction with a website by recording their browser settings and broadcasting them out to all other connected users.

• UserLogger

  The mouse tracking demo takes things a step further. The WebSocket server backend used is exactly the same as that used in the User Logger demo. The true difference is in the amount of client-side JavaScript. In this demo, we bind mouse movement and click events to a callback function which records the current position. Each user receives a custom generated circular dot with their own color and size. On each movement, a WebSocket send event is triggered sending the server the user's new coordinates. The server broadcasts the new coordinates and accompanying user data to the remainder of the connected clients and they update their screens accordingly.

• Todo

  The todo list demo takes a basic CRUD implementation of a todo list and turns it on it's head. This demo introduces the ability to add WebSockets to an existing PHP application. This does come at quite a cost, however, as it entails adding a messaging layer to your existing application so it may talk to the WebSocket server. In our case, we use ZeroMQ as it is supported by react/zeromq. The application also introduces the WAMP sub-protocol of WebSockets, allowing us to use RPC and PubSub patterns to manage the sheer number of different event types. One of the key takeaways from this demo is the amount of edge-cases that need to be handled due to concurrency. This includes various forms of locking to ensure users don't step on each other's toes.