Search code examples
phpangularjsreal-time

Real time data with Angular

i want to create a web page with data, this data can be edited in Real Time.

Users will see data in Real Time and can edit it, something like "Google Sheets" where everyone can edit the same file and see others changes in real time.

I will be using PHP, MYSQL, AngularJS.

I want to consult you on how to do it in the best way, this is some points that i thought of:

  1. Use angular polling every X seconds to update page data in real time, but if user editing one of the fields, how can i prevent from this specific field to be updated by polling?

  2. How can i LOCK specific field that user is editing, to prevent 2 users to edit the same field in real time

  3. There is any better way to pull data in real time than angular polling?

  4. When user editing text field i want to update it in database without "submit" or save button, i thought to save the data after 3 seconds, any better ideas?

Thank you,

Solution

  • 1: I'd suggest for you to have an array of objects or a datastructure similar to that, which contains the fields, in your AngularJS controller. When a user starts editing a certain field, you could set isEditing to true in the field object in your datastructure. Whenever an update comes in, you loop through your datastructure and only update fields of which isEditing isn't set / isn't true.

    For making it more realtime, instead of polling, setup WebSockets and let the server broadcast the newest values of a field to all editors whenever it gets changed.

    2: For locking a field that a certain user is working on, you could add a locked column to the database table containing the fields. Whenever a user wants to start editing, the following would occur:

    • User requests to edit a field
    • Server checks if the field is locked
    • If the field isn't locked, the user is permitted to edit the field and the server sets the locked column to true or to the username, depending on your needs.
    • If the field is locked, the user isn't permitted to edit the field

    When a user saves a field after editing it, you should set the locked column to false. You should probably also set the locked column to false whenever the editing user gets disconnected.

    3: PHP on it's own is not able to send data to the client without the client making a request. You'd need to add WebSocket support to PHP (for example http://socketo.me/, haven't tried that out though).

    If you are interested in a server platform that is able to do this out of the box, you could take a look at http://nodejs.org. When you plan on using Node.js, I suggest using http://socket.io/ for maximum browser compatibility. (it includes fallbacks for whenever WebSockets aren't supported by the users browser)

    4: You could save the current value every x seconds if the value is different from the previous save. This would be more efficient than always saving the value. You'd need to save the previously saved value in a variable for this.