Jump to content
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 Chris Bennett
      Hi all, I am going round and round in circles and would greatly appreciate if anyone can point me in the right direction.
      I am sure I am doing something dumb, or missing something I should know, but don't. Story of my life 😉

      Playing round with a module and my basic problem is I want to upload an image and also use InputfieldMarkup and other Inputfields.
      Going back and forth between trying an api generated page defining Fieldgroup, Template, Fields, Page and the InputfieldWrapper method.

      InputfieldWrapper method works great for all the markup stuff, but I just can't wrap my head around what I need to do to save the image to the database.
      Can generate a Field for it (thanks to the api investigations) but not sure what I need to do to link the Inputfield to that. Tried a lot of stuff from various threads, of varying dates without luck.
      Undoubtedly not helped by me not knowing enough.

      Defining Fieldgroup etc through the api seems nice and clean and works great for the images but I can't wrap my head around how/if I can add/append/hook the InputfieldWrapper/InputfieldMarkup stuff I'd like to include on that template as well. Not even sure if it should be where it is on ___install with the Fieldtype stuff or later on . Not getting Tracy errors, just nothing seems to happen.
      If anyone has any ideas or can point me in the right direction, that would be great because at the moment I am stumbling round in the dark.
       
      public function ___install() { parent::___install(); $page = $this->pages->get('name='.self::PAGE_NAME); if (!$page->id) { // Create fieldgroup, template, fields and page // Create new fieldgroup $fmFieldgroup = new Fieldgroup(); $fmFieldgroup->name = MODULE_NAME.'-fieldgroup'; $fmFieldgroup->add($this->fields->get('title')); // needed title field $fmFieldgroup->save(); // Create new template using the fieldgroup $fmTemplate = new Template(); $fmTemplate->name = MODULE_NAME; $fmTemplate->fieldgroup = $fmFieldgroup; $fmTemplate->noSettings = 1; $fmTemplate->noChildren = 1; $fmTemplate->allowNewPages = 0; $fmTemplate->tabContent = MODULE_NAME; $fmTemplate->noChangeTemplate = 1; $fmTemplate->setIcon(ICON); $fmTemplate->save(); // Favicon source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFavicon'; $fmField->label = 'Favicon'; $fmField->focusMode = 'off'; $fmField->gridMode = 'grid'; $fmField->extensions = 'svg png'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Favicon Silhouette source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFaviconSilhouette'; $fmField->label = 'SVG Silhouette'; $fmField->notes = 'When creating a silhouette/mask svg version for Safari Pinned Tabs and Windows Tiles, we recommend setting your viewbox for 0 0 16 16, as this is what Apple requires. In many cases, the easiest way to do this in something like illustrator is a sacrificial rectangle with no fill, and no stroke at 16 x 16. This forces the desired viewbox and can then be discarded easily using something as simple as notepad. Easy is good, especially when you get the result you want without a lot of hassle.'; $fmField->focusMode = 'off'; $fmField->extensions = 'svg'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Create: Open Settings Tab $tabOpener = new Field(); $tabOpener->type = new FieldtypeFieldsetTabOpen(); $tabOpener->name = 'fmTab1'; $tabOpener->label = "Favicon Settings"; $tabOpener->collapsed = Inputfield::collapsedNever; $tabOpener->addTag(MODULE_NAME); $tabOpener->save(); // Create: Close Settings Tab $tabCloser = new Field(); $tabCloser->type = new FieldtypeFieldsetClose; $tabCloser->name = 'fmTab1' . FieldtypeFieldsetTabOpen::fieldsetCloseIdentifier; $tabCloser->label = "Close open tab"; $tabCloser->addTag(MODULE_NAME); $tabCloser->save(); // Create: Opens wrapper for Favicon Folder Name $filesOpener = new Field(); $filesOpener->type = new FieldtypeFieldsetOpen(); $filesOpener->name = 'fmOpenFolderName'; $filesOpener->label = 'Wrap Folder Name'; $filesOpener->class = 'inline'; $filesOpener->collapsed = Inputfield::collapsedNever; $filesOpener->addTag(MODULE_NAME); $filesOpener->save(); // Create: Close wrapper for Favicon Folder Name $filesCloser = new Field(); $filesCloser->type = new FieldtypeFieldsetClose(); $filesCloser->name = 'fmOpenFolderName' . FieldtypeFieldsetOpen::fieldsetCloseIdentifier; $filesCloser->label = "Close open fieldset"; $filesCloser->addTag(MODULE_NAME); $filesCloser->save(); // Create Favicon Folder Name $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeText"); $fmField->name = 'folderName'; $fmField->label = 'Favicon Folder:'; $fmField->description = $this->config->urls->files; $fmField->placeholder = 'Destination Folder for your generated favicons, webmanifest and browserconfig'; $fmField->columnWidth = 100; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon('folder'); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($tabOpener); $fmFieldgroup->add($filesOpener); $fmFieldgroup->add($fmField); $fmFieldgroup->add($filesCloser); $fmFieldgroup->add($tabCloser); $fmFieldgroup->save(); /////////////////////////////////////////////////////////////// // Experimental Markup Tests $wrapperFaviconMagic = new InputfieldWrapper(); $wrapperFaviconMagic->attr('id','faviconMagicWrapper'); $wrapperFaviconMagic->attr('title',$this->_('Favicon Magic')); // field show info what $field = $this->modules->get('InputfieldMarkup'); $field->name = 'use'; $field->label = __('How do I use it?'); $field->collapsed = Inputfield::collapsedNever; $field->icon('info'); $field->attr('value', 'Does this even begin to vaguely work?'); $field->columnWidth = 50; $wrapperFaviconMagic->add($field); $fmTemplate->fields->add($wrapperFaviconMagic); $fmTemplate->fields->save(); ///////////////////////////////////////////////////////////// // Create page $page = $this->wire( new Page() ); $page->template = MODULE_NAME; $page->parent = $this->wire('pages')->get('/'); $page->addStatus(Page::statusHidden); $page->title = 'Favicons'; $page->name = self::PAGE_NAME; $page->process = $this; $page->save(); } }  
    • By Pip
      Hi everyone, 
      Is there a way for us to replicate the "http://mydomain.com/processwire/page/edit/?id=xxx" and change the template to match my site template? 
      I'm terribly happy with the admin / backend page edit. It covers literaly everything I want to empower my non super admin user in updating pages such as validation, repeater management, file upload. 
      I wish not to allow the users to see the backend for both security and aesthetic reasons. 
      Thanks and hope to hear from you soon. 
       
    • By marcus
      wireshell 1.0.0 is out    
      See Bea's post
       


      -------- Original post -----------
        Now this one could be a rather long post about only an experimental niche tool, but maybe a helpful one for some, so stay with me   Intention Do you guys know "Artisan" (Laravel) or "Drush" (Drupal)? If not: These are command line companions for said systems, and very useful for running certain (e.g. maintenance, installation) task quickly - without having to use the Admin Interface, first and foremost when dealing with local ProcessWire installations. And since it has a powerful API and an easy way of being bootstrapped into CLIs like this, I think such a tool has a certain potential in the PW universe.    It's totally not the first approach of this kind. But: this one should be easily extendable - and is based on PHP (specifically: the Console component of the Symfony Framework). Every command is tidily wrapped in its own class, dependencies are clearly visible, and so on.   ( Here was the outdated documentation. Please visit wireshell.pw for the current one )
    • By calago
      after the migration to version 3.0.145 our export templates all of a sudden dont work properly, 
      we have a functionality where we use a boiler template with a set of fields. for some reason since the upgrade when we select the export template to export it. it wont show any of the fields added after the migration, 

      as you can see the offer certificate remarks field has been added to the export, 
      but when we select it it wont come trough

    • By quickjeff
      Hi Guys, 
      I have been debugging a site for the last 2 hours and cannot solve the issue. 
      I have a site running on 3.0.148. 
      I installed the Kongondo Blog module and was updating the templates to include the website style. 
      Once everything was set and done, I checked the page tree to see an error appear. 
      Template must be assigned a name before 'filename' can be accessed
      The same error appears in templates. 
      Debugging Steps
      I checked the templates in the server to ensure I didnt accidentally delete the namespace.  Deleted cache in browser and server under assets Still no go. 
      Any help is appreciated. 
      Thanks! 
×
×
  • Create New...