How to create a chat room with javaScript and PHP ---- A step by step guide

in steemstem •  7 years ago  (edited)

For you to create a chat room you would need to make use of PHP & JQUERY .

The PHP takes care of the SERVER SIDE i.e. retrieving messages from the text file that stores the chat and also applying some basic security measures.

While the JQUERY handles the CLIENT-SIDE

Now we get started….

The first step

Create a HTML structure of your chatting environment
1.png

So with your sublime text or any other text editor of your choice you input the code above

Second step
Now you create a function which would be parents to other child functions, here we name this function ‘chat’. So in your javaScript you have the following codes:
2.png

Now in the above script the updateChat confirms if there are new lines in the text file and if any it is returned as JSON and the new lines will be called every time a message is being entered into the text area then the function will be passed to the server. The getState counts the lines included within the current text file determining when the lines are new or old.

Now take a look at the getState, updatChat & sendChat relating with each other
3.png
4.png
5.png

The third step
Now you create a PHP file you can call this ajax.php in this PHP file we use the switch statement to cover all functions
6.png
7.png
8.png
9.png

Final step
You would have to write a javaScript code that will load the jquery and also get user information participating in your chat room
10.png
11.png

Now you have successfully created a chat room.

Thank you for reading.

feel free to send in your questions and suggestions through comments and expect to get a feedback from me.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!