Chat2: Group Chat Room with PHP, jQuery, and a Text File
This is an update to original Chat Room we published here on CSS-Tricks. In some ways, the technology is the same. We are going to employ PHP to talk to the server, jQuery to keep the chat rolling, and the chats themselves will be stored in .txt files just like the first version.
What is changed is the addition of some new features:
- Usernames are unique to users currently chatting
- You can see a “currently chatting” user list
- There are multiple rooms for chatting
A Little MySQL
While the first version of this used no database at all, we are going to employ a little MySQL for this version. There is a file in the download called Setup.sql for use in building the initial database. MySQL isn’t for the chats themselves, but for two other things:
- Keeping track of active users
- The rooms
When someone comes in to chat, they choose a username. Using some jQuery, it makes an AJAX request to see if that username is currently in use in the database. If it is in use, you get a warning:
Otherwise, it says it’s cool:
If it is cool, and you click to join the chats, that username will be put into the database and thus further checks for it’s name will tell others that name is unavailable. Idle users are removed from the database.
Adding/Editing/Removing Rooms
The names of the chatrooms are kept in the database. To add a new chatroom, just add a new row to the database with the name of the chatroom and the filename of the text file you intend to store the chat:
Then it’s just a matter of making sure the text file is on the server in the right place with proper server-writeable file permissions (see the download for properly location).
jQuery
I’m sure you’ve noticed by now we haven’t been looking at any actual code. This is on purpose. All the code is available in the download (see below). It is not so incredibly much that it’s overwhelming, but I think it’s too much for a standard written tutorial/overview. Instead, let’s overview what it’s responsible for:
Username checking: On the homepage of the chat, when you choose your username, jQuery is there watching that text input. When you type a character (on keyup) it asks a certain PHP file (via AJAX) if that username is in use. The PHP file responds with a yes or no, and a message is appended to the screen accordingly.
Message box: When a user types into the textarea for sending a message, the jQuery watches that box and ensures the text is under a certain number of characters (set via maxlength attribute on the textarea)
Sending message: When the return/enter key is pressed in the chat box the value of it is sent for processing. PHP writes the text to the text file.
Updating the chat: Every few seconds, jQuery asks a PHP file to poll the text file to see if there are any new lines, if there are, they are displayed.
Features it doesn’t have
- You can’t kick people out
- It doesn’t do special characters
You wanna add that stuff in? I’d love it and I’ll update this.
Demo and Download
Download Files
DEMO TAKEN DOWN – Of course people were being jackasses, I expected that. But it turns out there was a SECURITY PROBLEM with one particular aspect of it, which can get grant access to any file on the server. A reader was able to show me how they could publicly access my wp-config.php WordPress file, which is of course super sensitive. The vulnerability is in the update.php file, which accepts a “state” and “file” parameter. Accessed directly, and with a relative file path, you can get access to protected files that way. When it gets fixed I’ll update the downloadable code.
Credits
Special thanks to Kenrick Beckett who created the original code that powered this and Jason Lengstorf for looking it over and tidying some things up security-wise.
For the Future
Here is a roundup of things people have suggested in the comments or that I otherwise think would be cool:
- Security problem from above fixed
- Flood control (something like you can only submit 1 message every 5 seconds)
- Link to logout (delete PHP session)
- Allow some HTML, but not other (whitelist of tags). Like allow <a href=””>, but still strip out javascript. Possibly a few buttons for HTML (WYSIWYG?). Code highlighting for stuff in <code> tags.
- Allow registration, for being able to have a certain username permanently (and all the stuff that goes with that, like “lost password”)
- Protection against non-existent chat room names e.g. /Chat2/room/?name=LOL
- Support for all special characters (UTF-8)
- Private messages (@) (only the person who matches that username will see it)
- Kick people out / ban people by IP (only as an admin user, or perhaps just a blacklist of IPs)
- More emoticons
- Have an actual submit button (for mobile devices that support JavaScript but don’t have regular key events)
- Automatic filtering of bad words
- Utilize an outside login system, like Twitter oAuth, Google Login, or Facebook Connect
- Usernames as emails, then use Gravatars
- Links with 4-letter extensions don’t work (e.g. .info)
- Long polling, instead of requesting every few seconds
Chat2: Group Chat Room with PHP, jQuery, and a Text File
This is an update to original Chat Room we published here on CSS-Tricks. In some ways, the technology is the same. We are going to employ PHP to talk to the server, jQuery to keep the chat rolling, and the chats themselves will be stored in .txt files just like the first version.
What is changed is the addition of some new features:
A Little MySQL
While the first version of this used no database at all, we are going to employ a little MySQL for this version. There is a file in the download called Setup.sql for use in building the initial database. MySQL isn’t for the chats themselves, but for two other things:
When someone comes in to chat, they choose a username. Using some jQuery, it makes an AJAX request to see if that username is currently in use in the database. If it is in use, you get a warning:
Otherwise, it says it’s cool:
If it is cool, and you click to join the chats, that username will be put into the database and thus further checks for it’s name will tell others that name is unavailable. Idle users are removed from the database.
Adding/Editing/Removing Rooms
The names of the chatrooms are kept in the database. To add a new chatroom, just add a new row to the database with the name of the chatroom and the filename of the text file you intend to store the chat:
Then it’s just a matter of making sure the text file is on the server in the right place with proper server-writeable file permissions (see the download for properly location).
jQuery
I’m sure you’ve noticed by now we haven’t been looking at any actual code. This is on purpose. All the code is available in the download (see below). It is not so incredibly much that it’s overwhelming, but I think it’s too much for a standard written tutorial/overview. Instead, let’s overview what it’s responsible for:
Username checking: On the homepage of the chat, when you choose your username, jQuery is there watching that text input. When you type a character (on keyup) it asks a certain PHP file (via AJAX) if that username is in use. The PHP file responds with a yes or no, and a message is appended to the screen accordingly.
Message box: When a user types into the textarea for sending a message, the jQuery watches that box and ensures the text is under a certain number of characters (set via maxlength attribute on the textarea)
Sending message: When the return/enter key is pressed in the chat box the value of it is sent for processing. PHP writes the text to the text file.
Updating the chat: Every few seconds, jQuery asks a PHP file to poll the text file to see if there are any new lines, if there are, they are displayed.
Features it doesn’t have
You wanna add that stuff in? I’d love it and I’ll update this.
Demo and Download
Download Files
DEMO TAKEN DOWN – Of course people were being jackasses, I expected that. But it turns out there was a SECURITY PROBLEM with one particular aspect of it, which can get grant access to any file on the server. A reader was able to show me how they could publicly access my wp-config.php WordPress file, which is of course super sensitive. The vulnerability is in the update.php file, which accepts a “state” and “file” parameter. Accessed directly, and with a relative file path, you can get access to protected files that way. When it gets fixed I’ll update the downloadable code.
Credits
Special thanks to Kenrick Beckett who created the original code that powered this and Jason Lengstorf for looking it over and tidying some things up security-wise.
For the Future
Here is a roundup of things people have suggested in the comments or that I otherwise think would be cool: