2

How can i create synchronized webpage in php, so that if the database changes, it is immediately reflected to whoever is viewing that page in the browser. the database is in mysql, and i am using plain php with no frameworks.

I have a database table to display tour packages, the package can be shared with multiple people, now if any one of them changes anything in the package, like flight booking, this should be immediately reflected to another person viewing that package. i know this can be done with node and react, but is this possible with vanilla js and php? if so how, sorry if i am missing any obvious things.

vikrant
  • 2,169
  • 1
  • 21
  • 27
  • If I were doing it, I'd want to use WebSockets, in which the PHP/server side sends a notification to the front end (all clients) that it/they need(s) to update its/their data. (I'm assuming that there's some PHP code responsible for updating the database.) There might be a better way of doing this, though. – Agi Hammerthief Oct 31 '18 at 15:02
  • @AgiHammerthief can we target that notification to only specific users, say the users of that particular package, and run an sql query as soon as the notification is received? – vikrant Oct 31 '18 at 15:09
  • 1
    Yes, you can target specific users if you can uniquely associate a browser with an identifier, such as having your users log in and use their user IDs. For example, send this when the package changes: `{"uid": 9000, "uName": "agihammerthief", "cmd": "updateData", "data": "bookingUpdated", pid: 125}` /* Notify Agi Hammerthief that the booking info has changed; Any client that's not Agi Hammerthief will ignore the message */ – Agi Hammerthief Oct 31 '18 at 15:14
  • 1
    You can use 'long pull' or 'pull every 30s' but a more elegant way is to use socket.io to propagate events. – Antony Gibbs Oct 31 '18 at 15:20
  • 1
    I'd recommend having a look at these two books for ideas: [Node for PHP Developers](https://www.amazon.com/Node-js-PHP-Developers-Porting/dp/1449333605) and [WebSocket](https://www.amazon.com/WebSocket-Client-Server-Communications-Andrew-Lombardi/dp/1449369278/ref=sr_1_1?s=books&ie=UTF8&qid=1540999372&sr=1-1&keywords=WebSocket) if you want to go that route. (I'm not implying you should drop PHP and switch to Node, [although that might be the easier route] rather that Node might give you some ideas for your PHP code. ) – Agi Hammerthief Oct 31 '18 at 15:23
  • sure , thanks for the references – vikrant Oct 31 '18 at 15:25
  • 2
    "i am using plain php with no frameworks." That's not something you're going to want to do. Frameworks are what give PHP utility and power. The core language is not capable of doing what you want without a whole ton of work, and by ton I mean multiple developer-years of commitment. Don't think you're doing yourself a service by ignoring these valuable community projects. – tadman Oct 31 '18 at 16:17

2 Answers2

1

You can use SSE (Server Sent events) here is how to implement it for example

https://www.html5rocks.com/en/tutorials/eventsource/basics/

kl3sk
  • 136
  • 1
  • 11
  • according to the article, "SSE has taken somewhat of a backseat to newer, sexier communication protocols such as the WebSocket API" , so should i consider using websockets, or SSE are better for my purpose, thanks... – vikrant Oct 31 '18 at 15:13
  • This is open here https://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource – kl3sk Oct 31 '18 at 15:21
1

Yes you can do this with vanilla Javascript via AJAX calls. I would use jQuery but you can do the same with vanilla Javascript, just research those AJAX functions instead.

You will need 3 functions in Javascript:

  1. Send updates to server (PHP > DB) when a package changes
  2. Get updates to package from server (this would be a polling function that you could call every x numbers of seconds to check for updates of the package. I recommend using json_encode() before the server echos the output so you can easily parse with $.parseJSON on the Javascript side
  3. With the updates from #2, re-render the data on the page via Javascript / jQuery (helpful to have specific IDs and Classes so you can easily change the data)

http://api.jquery.com/jquery.ajax/

Ray
  • 773
  • 9
  • 21