Latest play time has been focused on websockets and more specifically Socket.IO. According to their website, Socket.IO
... is a library that enables low-latency, bidirectional and event-based communication between a client and a server.
In my PHP head, the process goes something like this: A person opens their browser and asks it for a website (by typing in an address). The browser sends a request to the server for that website. The server looks at the request and sends back a full page, usually in HTML, as a response. The browser then displays that page to the person who asked for it.
If the person wants to make changes, like submitting a form or clicking a button, they tell the browser what they want to do. The browser sends another request to the server. The server, once again, decides what to do with that request and responds accordingly. This might involve saving a file, updating a database, or generating a new page. The server sends another response back to the browser, and the cycle continues.
This traditional request->response method is reliable and powers a huge portion of the modern web. But it’s not ideal for real-time interactions where you want information to flow continuously and instantly.
That’s where Socket.IO comes in. It allows two (or more) things to talk to each other in real time. Think chat rooms, collaborative tools, or live dashboards where updates happen the moment something changes.
While I'm playing with it I'm having a go at making a bit of a scoreboard (I might have mentioned that I like cricket!) It turns out I stumbled upon the project that my son is working on for his A-Level Computing so I'm not taking this too far (I don't want him to show me up!) but it seemed like a really good way to test it out.
I won't got into much detail at this stage either (when do I ever?) but for now I think it's enough to say there is a really good introduction / getting started guide available at Socket.io. Take a look through that. When I got going I had this very basic setup:
io.on('connection', (socket) => {
socket.on('game:update', (stats) => {
console.log(stats);
io.emit('game:update', stats);
});
});
This creates a new connection listener for each client. Inside that, we listen for 'game:update' events sent from that particular client. When received, we log the stats and broadcast them to everyone connected. In my case I'm actually using
socket.broadcast.emit('game:update', stats);
so that everyone else connected to the server gets the stats. At the moment the person with the control buttons already has all that data, so doesn't need to get it back! That will come when I've doing shared controls, I guess!
It's really nice — using JSON with Socket.IO makes it super easy to build JavaScript front-end apps. Since the data is already in a JavaScript-friendly format, the client can just listen for events and respond however it needs to. If the front end is also using Socket.IO, it can easily "hear" any events you emit and update the UI or game state in real time.
Something along these lines for the client side app:
const socket = io(); // Connects to the server that served the page
socket.on('connect', () => {
console.log('Connected to server via Socket.IO');
});
// Listen for game:update events from the server
socket.on('game:update', (stats) => {
console.log('Received stats:', stats);
document.getElementById('total-runs').textContent =
`${stats.totalRuns}`;
});
Tune in next time to read something unrelated to this...