Right now, we immediately add a new todo to our Vue component's list, even before we save it on the server. This gives the appearance that the addition is happening in real time.
Let's implement this feature with socket.io. On the client side, create the TODO via ajax like we are right now, but don't automatically add the TODO to the Vue component's list. Instead, create a socket.io client-side event handler to add the TODO to our list when an event is emitted from the server.
On the server, whenever a new Todo is created, broadcast a message to all connected sockets that a new Todo has been added. Then, every connected client's UI should update in real time as TODOs are added!
Right now, we immediately add a new todo to our Vue component's list, even before we save it on the server. This gives the appearance that the addition is happening in real time.
Let's implement this feature with socket.io. On the client side, create the TODO via ajax like we are right now, but don't automatically add the TODO to the Vue component's list. Instead, create a socket.io client-side event handler to add the TODO to our list when an event is emitted from the server.
On the server, whenever a new Todo is created, broadcast a message to all connected sockets that a new Todo has been added. Then, every connected client's UI should update in real time as TODOs are added!