So I have been working on the Chat feature, because of course, you can't build a relationship with someone if you cannot communicate with them in some way, shape or form. I want it to work like Facebook Messenger, where you have chat bubbles, but the coloration is pink for messages sent by the woman, and blue for messages sent by the man. I need to make some changes though, because the UX right now is horrendous! If a user hits Enter, it will add the message they typed, to the conversation, but it refreshes the entire page. If they hit Enter again, it will repeat the same message, which is not a good thing.
So I poked around a little bit, and it turns out I can use jQuery and AJAX to interact with a PHP, which will handle the interface with the database. The jQuery can then append the <li> to the <ul>, but I need to have a periodic refresh mechanism, because when the other user enters a message, the script will need to check to see when that message gets added to the database. In order to do this, I will have to break out the PHP into separate PHP functions that can handle the POST and the GET, and I will need to add to columns to the Matches table, to allow the script to see if there are new unread messages from either the Male or the Female. Since each message is sequenced, I will use the sequence number to keep track of what messages have been read, so that the user can be notified in the event that they get a response.
So, it looks kinda funky right now. There is a message at the top that says "Coming Soon", but it is sorta there, sorta not. Like I can start a conversation with any women who expresses interest in me, but right now, she has no notification or ability to respond with messages of her own, so I want to create a notification on the Welcome page, that will allow a user to see if there are any new messages from a potential future husband or wife, and from there, they can enter a Chat session with that potential mate. However, when there is a conversation going on, the look of chat bubbles will be something everyone who uses it, will be familiar with. I may need to find somewhere else to keep the CSS, and also, I am not seeing the bottom corner rounded out in conversations, the way it should be, and I am not sure why.
I have never used jQuery or AJAX before (shocker, I know), so this will be a good learning experience for me, that I can use to get side freelance gigs on other websites that I may have the opportunity to work on.