WebChat 2.0.3 BETA Download 2.0.3b

5.0
gb Kevin B 4 years ago

screenshot

This component adds a mobile-first, individually styled web chat module to OSSN. You need the Pusher Channels service for realtime updates.

You'll want to add the link to the main menu AND/OR redirect logins directly to WebChat using the Component Admin page:
Enable menu link and redirect

Latest Update

v2.0.3 BETA 16th Dec 2020

  • Feature request: Do not clear the message input field when you send a GIPHY
  • Changed component to store settings in the "site settings" rather than "component settings". Once set, these details will no longer need be input after ever install/upgrade.
  • Fixed incorrect case in ID name of ossn_com.xml
  • Moved "Web Chat" link to the "Links" section for better compatibility with OSSN standard installation.

Pre-Requisites:

OSSN >= v5.6
OssnMessages >= 5.4
OssnServices >= 6.4
Private Network >= 5.4

API Keys

GIPHY for animated GIFs that can be added to messages

FREE key from https://developers.giphy.com

Pusher - For the live chat feature

FREE Channels app-key from www.pusher.com

DEMO

https://kjbtech.co.uk/ossn
Demo site is running ossn 5.6, GreenByGreen theme and only has Private Network, API Services and WebChat components installed.

Near future updates

Add ossn credit
Message status dialog
Online status for group members
Block message content of blocked users
Hide blocked users from create new chat dialog
User is typing...
MP4 video uploads
Limits on number of images/videos people can upload
Allow to share images directly from profile
Add type to message table GIPHY, info, photo, profile image etc.
Implement OSSN blocked users
Migrate chat_api to ossn actions
Implement mobile notifications

TIDYING UP

Decide on consistent naming convention throughout. Is it Groups / Chats / WebChat etc. Need to keep language consistent throughout.
Remove ALL error_log / console.log and debug responses
Finish tidying up code and commenting (if I have time to kill)
CSS animations / transitions to make the experience feel more app-like.
Sounds for sending/receiving messages
White border on giphy thumbnail selection
change giphy default search as it keeps failing

NICE TO HAVES:

Encryption and Presence / Private Pusher Channels
Public/Private groups (to plan)
Voice and Video calls
Public Webcam broadcasts / channels
User Search by distance/gender etc
Who looked at me?
View and manage profile / galleries
View and post to walls

I'd be grateful for feedback on how I could improve the component. Any bugs or issues please also report here.

Older updates

Version history can be found in this Google Doc
WebChat Version History

Comments
gb Kevin B Replied 4 years ago

I think its to do with the component I forgot to specify as a pre-req:
https://github.com/opensource-socialnetwork/UnreadMessagesCountAPI

Came from this discussion:
https://www.opensource-socialnetwork.org/discussion/view/4639/message-notifications
Could you try installing this and testing again?

I will incorporate this API extension into Web Chat so that it's not needed in future.

A bit of background - this provides the number of notifications from each user. It compares that number against the previous number - if the number goes up, it checks whether there is an unread message icon. If there's not, it'll add the icon AND play a sound and then refresh #contacts (this puts most recent contacts at the top).

Also, when checking for new notifications, if the message is from somebody you are currently chatting with - it only updates the main message thread #messages. If there is a new message from somebody else, it just refreshes #contacts.

All the verifications are done using the above component, so that would explain the unwanted behaviour (UnreadMessagesCountAPI).

German Michael Zülsdorff Replied 4 years ago

Have to revert "flawlessly"
messages are indeed saved correctly now, but window of chat partner isn't updated (message not shown)
(running Edge <-> Chrome on Windows 10)

gb Kevin B Replied 4 years ago
gb Kevin B Replied 4 years ago

Thanks Arsalan, i'll look at changing that.

Its possible i've missed a pre-requisite... one of you guys kindly gave me a component that extends the API:
Custom API method for total unread messages count 1.0

This allows me to check unread message counts, and handles the notifications properly - so you dont get that beeping every time it polls. I'll resolve that by incorporating that component into my own chat_api.php.

I also have an issue where the ossn* functions don't seem to work in my second page? I have added the following lines to both the webchatpage.php and chat_api.php files:

$apiKey = ossn_services_apikey();
$siteURL = ossn_site_url();

file_put_contents ("api_log.txt","chat_api.php : API KEY : " . $apiKey . PHP_EOL,FILE_APPEND);  
file_put_contents ("api_log.txt","chat_api.php : SITE URL : " . $siteURL . PHP_EOL,FILE_APPEND);    

and the output I get is:

chatapi.php : API KEY :
chat
api.php : API KEY :
webchatpage.php : API KEY : d30de045bb6d5ff11cdec4e68d... (correct key)
webchat
page.php : SITE URL : http://10.48.1.28/
chatapi.php : API KEY :
chat
api.php : SITE URL :

Any troubleshooting suggestions?

German Michael Zülsdorff Replied 4 years ago

Sorry, my fault: I missed setting the site in 1.1
Running 1.2 now, it's working flawlessly with

$apiKey = ossn_services_apikey();
$siteURL = ossn_site_url() . 'api/v1.0/';
error_log('key: ' . $apiKey . ' site: ' . $siteURL);
$recentURL = $siteURL . 'message_recent?';
$listURL = $siteURL . 'message_list?';
$userURL = $siteURL . 'user_details?';
$notifcountURL = $siteURL . 'unread_mesages_count_custom?';

without any hardcoded vars.

BTW, you may use ossn_dump instead of print_r or var_dump
like error_log('blabla ' . ossn_dump(array_of_interest));

Indonesian Arsalan Shah Replied 4 years ago

I found one issue; when i receive message it keeps playing ping sound i and it never going off.
Besides that if you planning to use it as OSSN component then I suggest you to use input() function instead of $__POST

Indonesian Arsalan Shah Replied 4 years ago

Sorry, updated OssnServices on community :)

gb Kevin B Replied 4 years ago

I appreciate the feedback thanks :)

I'll look into better integration, I needed to not have any of the OSSN menus/displays etc - and just wanted a screen on the mobile that was purely for one function. I tried using css to hide things, but it was getting messy. Felt like a cleaner way would be to have its own page entirely.

Another issue was that without a clean page, it was appending the CSS to the site wide CSS, which prevented me from doing two things:

  1. Resetting CSS so that there was nothing quirky to troubleshoot on different devices
  2. Applying styles without being very granular - without the granularity, the main OSSN site was being restyled. :-(

The issue you are getting I was able to reproduce when I used the ossnservicesapikey() and ossnsiteurl() functions in the chat_api.php.

What you are seeing on screen when you hit the SEND button, the javascript is just placing the message on screen so that it appears quickly, and the page doesn't need to re-load. At the same time it POSTs the same data to the ChatAPI.php - which in turn uses the OSSN API to submit the new message. If the message appears on screen, but disappears when you refresh, it means the chatapi failed to submit the new message to the OSSN API - which I think (though i'm not entirely sure?) is because the chatapi.php file doesn't seem to be getting anything from ossnservicesapikey() or ossnsite_url(). I can tell that file to write out the results of those functions to a log file to check if thats the case.

If you manually enter your API key and site_url, does it post the messages properly? I've been able to use three browsers (chrome / chrome incognito / edge) and have two distinct conversations going with notifications sounds and new message icons :)

German Michael Zülsdorff Replied 4 years ago

Ok, got it running meanwhile.
1. No problem here retrieving the key like $apiKey = ossn_services_apikey(); in both files.
2. new messages don't seem to be saved
I can see the lines I entered with OssnMessages
enter image description here
enter image description here
but the new line I entered via webchat disappears after refreshing the webchat page

Anyway, I think that any further development based on polling once per second can't be a solution, it should use a service worker indeed, as you mentioned already.
Next - instead of setting up a completely new page (that takes about 3s to load here) - you should try to use as much of the already loaded Ossn framework as possible, instead of fetching jquery, fonts and stuff again.
Finally ... all this wasn't meant to sound discouraging. Right the opposite, I'm excited we have a new developer who's willing and able to really dig into things and I'm looking forward for the next release.

gb Kevin B Replied 4 years ago

Ok great thank you. I missed those when I was adapting the HelloWorld plugin. I've now removed all custom function names and references to drop "OSSN" and moved the menu registration into the init function.

Component

Developer: Kevin
License GPL v2
Type: Communication
Requires Ossn Version : 5.5
Latest Version: 2.0.3b
Last Updated 4 years ago
Repository Url View Repository

Versions