HTML表单按用户会话锁定

Question

I have created a web site that allows for the submission of HTML forms with multiple stages of form authorisation. For example a Employee Submits a Leave Application which is then Authorised by a Supervisor. Multiple users may have the permission to authorise a form at any particular stage.

The issue i have run into is only 1 user should be able to edit the form at any stage.

My idea was on page load set a IsLocked column in the database to true when the page loads and i can use this to see if anyone else has it locked. I would then set it back to 0 when the person leaves the page. A person can leave the page by modifying the form and clicking submit or just by navigating away.

I can easily lock the page or check if its locked using the document.ready function and a ajax request or doing it straight in PHP however i am stuck in finding a way to remove the lock when the page gets redirected.

I have looked into the following methods:

1. http://www.bennadel.com/blog/1520-binding-events-to-non-dom-objects-with-jquery.htm (Using a custom function which constantly checks to see if the href has changed. I can't seem to get this function to work in Chrome, Firefox, IE)
2. https://developer.mozilla.org/en-US/docs/Web/Events/popstate (The problem us it only called when the forward or back buttons in web browser are used)

Question: How can l reliably get when a user has left the page? Is there a better way to handle the form locking mechanism?

Answer 1

I would recommend WebSockets. They provide real-time communication between connected clients to a server. This could solve your problem by broadcasting a message to all user's about which forms are locked.

You have a few options for the websocker server, a popular one being NodeJs. Take a look at this answer for the various libraries available.

Once your server is running, each client could broadcast a message to the other clients with the form that needs to be locked:

// Send text to all users through the server
function sendText() {
  // Construct a msg object containing the data the server needs to process the message from the client.
  var msg = {
    type: "message",
    text: document.getElementById("myLockedForm").id,
    id:   clientID,
    date: Date.now()
  };

  // Send the msg object as a JSON-formatted string.
  exampleSocket.send(JSON.stringify(msg));

}