Live chat - Now ready for alpha testing

Started by Qube, November 11, 2017, 18:50:26

Previous topic - Next topic

Qube

I've finally got the live chat module to an early working alpha stage \o/

URL : http://www.syntaxbomb.com/sbChat.php

Current features :

You can chat in real time ( obviously )
All BB code smilies work the same as they do on the forum
bold, italic, underline are the same BB codes as the forum
Youtube videos work like so {youtube}JoQ4GidQP-k{/youtube} ( change {} to [] )
To quit the chat type /quit or /exit

Stuff to fix / add :

The chat module references the forum database for user information, so if you log out of the forums either on purpose or your session times out you will be logged out of the chat too. So refresh the forum page every 15 minutes or so to keep you live.

I've not added in the BB code to add images yet so at the moment it's just text, smilies and youtube vids that you can post. I will add more goodies in as things progress.

No doubt this fix list will get a lot longer.

Lastly :

I have no idea how this is going to perform / work with multiple users :P - I've never written a PHP / javascript live chat room before and it might explode pretty quickly. The live chat will be a ongoing process but at the moment it's functional, I think.

* edit * - I've only tested it in Chrome and Safari.

Please post bugs and any feature requests here :)
Mac Studio M1 Max ( 10 core CPU - 24 core GPU ), 32GB LPDDR5, 512GB SSD,
Beelink SER7 Mini Gaming PC, Ryzen 7 7840HS 8-Core 16-Thread 5.1GHz Processor, 32G DDR5 RAM 1T PCIe 4.0 SSD
MSI MEG 342C 34" QD-OLED Monitor

Until the next time.

Derron

Date-time-text is smaller than rest but is bottom-aligned to the chat-text, it should either be the same size - or middle-aligned to a single line (or give some top-padding so it aligns similar for multi-line entries).




Keep a history of the last 10 phrases or so - this avoids entering an "empty" chat. And even allow for a kind of "shoutbox"-usage. This would be even better with a "load 10 previous lines"-link (clickable multiple times).




bye
Ron

Qube

QuoteDate-time-text is smaller than rest but is bottom-aligned to the chat-text, it should either be the same size - or middle-aligned to a single line (or give some top-padding so it aligns similar for multi-line entries).
It was meant to be smaller as it was too much being the same size. I will middle align it vertically.

QuoteKeep a history of the last 10 phrases or so - this avoids entering an "empty" chat. And even allow for a kind of "shoutbox"-usage. This would be even better with a "load 10 previous lines"-link (clickable multiple times).
That is next on the list of "to-do" whereby when you enter chat X previous posts get loaded up.
Mac Studio M1 Max ( 10 core CPU - 24 core GPU ), 32GB LPDDR5, 512GB SSD,
Beelink SER7 Mini Gaming PC, Ryzen 7 7840HS 8-Core 16-Thread 5.1GHz Processor, 32G DDR5 RAM 1T PCIe 4.0 SSD
MSI MEG 342C 34" QD-OLED Monitor

Until the next time.

Derron

I would also suggest to have the timestamp this way:


{span title='complete timestamp'}hh:ii:ss{/span} - Most often people chatting together _know_ what day it is - and if you added a "history" people could hover with the mouse to see the day.
Another option is to change color of older days to be even more light gray.




bye
Ron

Qube

#4
Good ideas Derron, thanks :) - I've changed it now to only show the time. Was a bit excessive to show date and time but both are still logged.

I've also added a who's in live chat on the main portal landing page.

Next step, a history command...
Mac Studio M1 Max ( 10 core CPU - 24 core GPU ), 32GB LPDDR5, 512GB SSD,
Beelink SER7 Mini Gaming PC, Ryzen 7 7840HS 8-Core 16-Thread 5.1GHz Processor, 32G DDR5 RAM 1T PCIe 4.0 SSD
MSI MEG 342C 34" QD-OLED Monitor

Until the next time.


Qube

A live chat session tonight showed an issue with the chat update script causing text input hogs. I blame javascript :D - I'll be working on a fix and when sorted will upload and announce here.

Quote from: Yue on November 11, 2017, 23:06:23
Avatars?
I did think about having the avatars against the posters message but it may take up too much room. I will try it out and see how it looks :)
Mac Studio M1 Max ( 10 core CPU - 24 core GPU ), 32GB LPDDR5, 512GB SSD,
Beelink SER7 Mini Gaming PC, Ryzen 7 7840HS 8-Core 16-Thread 5.1GHz Processor, 32G DDR5 RAM 1T PCIe 4.0 SSD
MSI MEG 342C 34" QD-OLED Monitor

Until the next time.

Derron

I assume Yue is asking for some kind of "chat balloons/bubbles". Avatars would increase minimum height for an chat entry to 16px + padding (I assume 16x16 is still way too small - so it might better to have 24x24 or 32x32 plus some padding to wrap it in a "standard element" (eg. a rounded rect).


Excuse the bad quality, its's 2am here, short break from helping buddy with his diploma (creating a big bunch of scheme graphics) - and meanwhile I want to get used to my drawing tablet.




Think this "whatsapp/messenger"-style works if you have less population and use it similar to a "shoutbox". For a really frequent communication this might be "too much". Some people prefer the "IRC style".



bye
Ron

Qube

Cool art work :P

I'm not sure about a WhatsApp style to the chat. The left me, right you works on one to one but could look weird for multiuser chats. It's something I could mockup and see what it look like though.

First things first though... Fix the javascript text box input hog. I think I need to do asynchronous javascript on that ( from what I've read ) so will look into that. After that we can work on frilly bits :)
Mac Studio M1 Max ( 10 core CPU - 24 core GPU ), 32GB LPDDR5, 512GB SSD,
Beelink SER7 Mini Gaming PC, Ryzen 7 7840HS 8-Core 16-Thread 5.1GHz Processor, 32G DDR5 RAM 1T PCIe 4.0 SSD
MSI MEG 342C 34" QD-OLED Monitor

Until the next time.

Derron

When I wrote my last chat it used iframes and submit forms as Javascript was not that common and only used to insert smileys from a popup window ;-)
With 20-25 concurrent users I already hogged my 1 GHz Server that time. Did much polling to fetch new content. Nobody used the word "ajax" (or at least I did not) that time - nowadays even "ajax" got uncommon again.

That time I created a big bunch of custom smileys for my users - so they got smileys fitting to their usernames - we even got some adult smileys (doing adult things). Was fun to animate all these things in ~1kb gif files. Pheww, that's already ~15 years ago.



@ styling the chat
The benefit of CSS is the easyness when it comes to replacing the stylesheet ;-). You just put everything in the corresponding containers/spans and let CSS do the rest for you. So at the end each user profile could have an additional field defining the used "chat theme" and voila, done.

Regarding multiple users: just tint the top border of the "balloon" to a randomly assigned user color (when entering the chat a color is assigned). The tint could be done using the top-border-color. If you think this becomes too "colorful" just brighten up the colors. Dunno if jscript has some inbuilt functions for this - but I just convert RGB to HSL and then adjust Luminance. According to my DIG-Framework I used a code similar to this:

https://github.com/mjackson/mjijackson.github.com/blob/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.txt



bye
Ron


Dabz

Intel Core i5 6400 2.7GHz, NVIDIA GeForce GTX 1070 (8GB), 16Gig DDR4 RAM, 256GB SSD, 1TB HDD, Windows 10 64bit

Derron

Add a new line to the chat if one enters the chat.

[hh:ii:ss] XYZ enters the chat.
[hh:ii:ss] XYZ left the chat.

Consider darkening the left side of the chat (containing the time) to be a mix of the "website background" and "chat background" - for now it uses "visually" a lot of space in the chat while this is not-as-important-meta-data...

bye
Ron

Dabz

Well, I had a play, went in... left the tab open and had a browse about the net... Saw Naughty Alien was in, went to say hello and...

You are not logged in or your session has expired. Please login to the SyntaxBomb forums and then refresh this page or chat will not function properly..

So, my feeling is, a chat session shouldnt really expire, due to you may have to sit there quite a while waiting for someone to come in. I had to close the tab, go back in, but when posting the message popped up again, so I tried again, Naughty Alien was gone, but it let me post.

Also, just thought, we need "ding, dong, boing" sounds in there, a ding for someone thats entered chat, dong for someone thats left, and a boing for a message thats been posted.

Dabz
Intel Core i5 6400 2.7GHz, NVIDIA GeForce GTX 1070 (8GB), 16Gig DDR4 RAM, 256GB SSD, 1TB HDD, Windows 10 64bit

Qube

Recoded all the javascript side to work asynchronously so now there is no jerky typing while javascript faffs about with background stuff.

QuoteAdd a new line to the chat if one enters the chat.
Tis on me to-do list :)

QuoteConsider darkening the left side of the chat (containing the time) to be a mix of the "website background" and "chat background" - for now it uses "visually" a lot of space in the chat while this is not-as-important-meta-data...
This side is going to get a little face lift as initially I just wanted to see if the bare-bones works.

QuoteSo, my feeling is, a chat session shouldnt really expire, due to you may have to sit there quite a while waiting for someone to come in. I had to close the tab, go back in, but when posting the message popped up again, so I tried again, Naughty Alien was gone, but it let me post.
It does seem to expire at silly times even though it should not. I may code a separate login system to handle chat but still requires the same user / pass as the forums.

QuoteAlso, just thought, we need "ding, dong, boing" sounds in there, a ding for someone thats entered chat, dong for someone thats left, and a boing for a message thats been posted.
Yup, it needs whizzy pop pop sounds for events. Add to the to-do list :D
Mac Studio M1 Max ( 10 core CPU - 24 core GPU ), 32GB LPDDR5, 512GB SSD,
Beelink SER7 Mini Gaming PC, Ryzen 7 7840HS 8-Core 16-Thread 5.1GHz Processor, 32G DDR5 RAM 1T PCIe 4.0 SSD
MSI MEG 342C 34" QD-OLED Monitor

Until the next time.