burning

Solutions for user notifications on front-end

Recommended Posts

Hi all,

Im currently building a photo sharing website and have a first version finished. Next step is to incorporate notifications in the website if a user likes one of your photo's, or comments on a photo you posted.

Just like the notification bell at the top of the forums. Any idea how to approach this functionality?

Thanks in advance.

Share this post


Link to post
Share on other sites
  • Send AJAX requests to poll the server for updates. Easy to implement but puts strain on the server. 
  • Use long polling (reply to a request only when there's an update on the server). A bit more difficult, but fewer unnecessary requests. 
  • Use websockets (Socket.io, Pushy for push notifications) or SSR (server sent events). Ideal, but a bit more involved to implement.
  • Like 2

Share this post


Link to post
Share on other sites

intercooler.js (which I may have mentioned before :rolleyes:) has beta support for Server Sent Events. I haven't tried SSE, but I'm a big fan of intercooler generally.

  • Like 3

Share this post


Link to post
Share on other sites

Thanks for the suggestions guys.

Another question; how do i store these 'notifications' in my processwire installation, and how do i check whether they are 'read or seen' by the user, and thus delete them?

Share this post


Link to post
Share on other sites

You'd have to represent each reaction (e.g. seen, read) using a Page with a user (Page Reference) and a timestamp field (using `created` may suffice) and relate it to an action (e.g. X posted a new picture).

Using simple image fields for storing images probably wouldn't be enough. Because images now have to hold a lot more data than they were designed for (when was this image posted, who reacted to it, what was the reaction). You'd need a more complex data structure (using Pages and fields, or custom fieldtypes) to represent all actions, reactions and events.

In short: it's not trivial. Or I'm making this complicated in my head.

  • Like 1

Share this post


Link to post
Share on other sites
3 minutes ago, abdus said:

In short: it's not trivial. Or I'm making this complicated in my head.

Absolutely right, it's not trivial and it can very quickly become properly complicated.  @abdus has very quickly pretty much nailed my current thinking on this kind of functionality.

I'm currently working on just such a system (with the added extra of location-aware messages), but by breaking it down into manageable bits (I'm hoping) it becomes feasible. 

Share this post


Link to post
Share on other sites

Thanks.

I already have a sort of page structure with images and users. So when a user likes a image, the image id is stored in a field in the user template so i can keep track on which user likes which image. The image itself is a page containing data of the image (title, description, exif data of the image, user_id who added the image, etc).

Of course I can add the user_ids to a field to the image page itself, but that doesn't keep track if the user of which the image belongs to has 'seen' the notification.

 

Share this post


Link to post
Share on other sites

I *think* you could replace the field in the user template (a user is a page, right?) with a repeater or a PageTable (best bet) and use this to store references to 'reactions'. These being pages, could then contain fields for image/page id, kind of reaction (like/share whatever), and that the image poster has been notified of that reaction.

Share this post


Link to post
Share on other sites

Ah that indeed would be a good start i guess. Thanks for your replies. I will make a start of the functionality tonight and keep u updated with the progress :-) 

Share this post


Link to post
Share on other sites
On 19.10.2017 at 1:21 PM, burning said:

Ah that indeed would be a good start i guess. Thanks for your replies. I will make a start of the functionality tonight and keep u updated with the progress :-) 

How did you do it in the end?

I'm thinking about how to implement such a feature as well. But instead of additional fields I'm thinking to save some variables in the user session and compare them with the actual data.

I have to do some more research to see if that really is an option.

Share this post


Link to post
Share on other sites
On 4/27/2018 at 7:46 PM, Schwab said:

How did you do it in the end?

I'm thinking about how to implement such a feature as well. But instead of additional fields I'm thinking to save some variables in the user session and compare them with the actual data.

I have to do some more research to see if that really is an option.

I ended up having a repeater in each userPage, when someone likes a photo, a Ajax request is sent and adding an item to the repeater, storing userId and the action (eg. like, follow comment oid). Then i built a simple notification window, which reads the repeater in the user-specific page and displays the correct message.

Share this post


Link to post
Share on other sites
On 6/16/2018 at 2:12 PM, burning said:

I ended up having a repeater in each userPage, when someone likes a photo, a Ajax request is sent and adding an item to the repeater, storing userId and the action (eg. like, follow comment oid). Then i built a simple notification window, which reads the repeater in the user-specific page and displays the correct message.

Yes I see. It depends on what notifications you want to have and who you want to notify.

I ultimately made it with an additional field on the page the user created. That field stores a MD5 Hash of the page content. When there is a change in the content, the hash changes. On the users dashboard I compare the page hash with the saved hash, if they differ, the user gets notified. When the user loads the page, his hash gets updated. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By thomasaull
      I recently started to build Vue SPAs with ProcessWire as the backend, connected with a REST API. Thanks to code and the help of @LostKobrakai (How to use FastRoute with ProcessWire) and @clsource (REST-Helper) I got it up and running pretty quickly and now have put all of it in a site profile for others to use. It includes the REST API with routing for different endpoints, JWT Auth and a simple Vue SPA which shows the process of logging in a user (nevertheless, you don't have to use the Vue part, the API will work on it's own).
      Check it out here: https://github.com/thomasaull/RestApiProfile
      I'm pretty sure, it's not the perfect or most sophisticsted solution, but it gets the job done for me…
      Feedback or Improvements are very welcome
      Update: This site profile is a module now: https://github.com/thomasaull/RestApi
    • By Pixrael
      I have a technical question that maybe you can guide me to a solution/idea.
      I know an online tool that publishes product information and updates prices/inventories regularly from marketplaces such as Amazon, Ebay, etc. to a Wordpress website ... can get the orders information, auto-order it and send back the tracking numbers. All this is done through the Woocommerce API. They don't have an API or CSV option to access this features..
      Is it possible to create fake REST endpoints (a clone of WooCommerce) on my site to accept requests from that external website and process this data my way inside PW? The requests to a REST endpoint are POST like in regular forms submits?
      Sorry I don't have to much technical background about this
      https://woocommerce.github.io/woocommerce-rest-api-docs/?php#create-a-product https://woocommerce.github.io/woocommerce-rest-api-docs/?php#update-a-product https://woocommerce.github.io/woocommerce-rest-api-docs/?php#retrieve-an-order
    • By Xonox
      Hi,
       
      I'm trying to upload images from a folder into a page. I need to replace the images instead of adding. The image field already has the replace existing images turned on, but it doesn't seem to be enough.
       
      My code:
      foreach($files as $file) { if(substr($file, 0, 1) != '.' && $file != '.' && $file != '..') { // Get SKU $file_sku = substr($file, 0, 9); // Check for book $book = $pages->get('sku=' . $file_sku); if(!$book->id) { // Book doesn't exist } else { // Upload image into book !!! THIS CODE ADDS FILE INSTEAD OF REPLACING. HOW CAN I REPLACE? $book->book_images->add($upload_directory . '/' . $file); // Delete file unlink($upload_directory . '/' . $file); } // Save book if($book->id) $book->save(); } }  
      What am I missing?
    • By karian
      I don't know why multiple instances (repeater_repeat_columns1, repeater_repeat_columns2, ...) of my repeater field are displayed inside Template field (see image).
      Is there a way to clean/reset it ?
       

    • By psy
      I'm combining two PW sites into one, Site A into Site B.
      At each step, I did it bit by bit as the 'all at once' approach failed.
       
      First, I exported all the fields from Site A and imported into Site B. Any field types not supported by import/export, eg FieldtypeOptions I manually recreated. All good.
      Next I exported all the templates from Site A and imported them into Site B and copied across their associated template files. All good.
      Finally I exported the pages I needed from Site A into Site B - again, bit by bit to ensure it all went smoothly.
      From the admin side, it all looked and worked perfectly.
      Front end was a totally different story. All existing pages in Site B worked as expected. NONE of the pages imported from Site A displayed. They all ended in a redirect loop with no errors in the PW logs or Tracy Debugger.
      After some trial-and-error, I finally got it working with:
      - create a new template in Site B admin with no associated template file and just a title field
      - import the fields from the imported Site A template into the newly created template (both on Site B)
      - copy the Site A php template file into a new file that matched the new PW Site B template name and save in Site B site/templates
      I can deal with the above workaround. Just curious to know if I did something wrong or if the template import/export feature is problematic?
       
      ### Solution:
      While the export/import was a slow process, turned out the front end redirecting issue was unrelated. For reasons unknown, all templates marked as HTTPS only were the ones redirecting, ie all templates from Site A. Finally solved it by changing the $config->https to true in site/config.php
      Now the pages display correctly as https whether the template forces the issue or not.