Hi Friends, here is my very first web based Chat Application in Asp.Net, it looks quite similar to Facebook and Gmail Chat, I have used Asp.Net, JQuery, SQL Server and CSS technologies to make it perfect from design to the performance. You can check my Youtube videos for more details how I utilize JQuery and CSS together to make it success. Moreover this chat application support one to one chat, at one time you can chat to 4 or more friends.
Part 1: https://www.youtube.com/watch?v=yB4juhkA9jg
Part 2: https://www.youtube.com/watch?v=z1_g4VK9QLc
Many updates are made to the chat application after posting these videos, which can be seen in the pic below, updates like design and chat history link added in each chat box through which a user can see all chat history with his friends with in the chat box.
How it is made ?
The very first step was searching for a free templates which match my requirement and I am very thankful to Pawel Balicki for the free Sample Admin template which I found by google, here is the original template http://kilab.pl/simpleadmin/
Next I started working on CSS, I change the color and design, create the 'Online Users' block and bind all the users to this block, I have used Asp.Net Repeater control for this, the tough time for me was creating Chat box's and the inner design of the chat box's i.e, writing CSS for the User message and Friend message as you can see in the above pic, once I done than I made the Chat box's hidden initially and pop's up when ever a message received. I have used same Asp.Net Repeater control for creating Chat box's for all the users.
I have used JQuery extensively for almost all the operation like pop up and hide of Chat box, sending and receiving messages, playing sound for new message, mark Chat box as orange for unread messages and marquee message on window title bar etc.
Part 1: https://www.youtube.com/watch?v=yB4juhkA9jg
Part 2: https://www.youtube.com/watch?v=z1_g4VK9QLc
Many updates are made to the chat application after posting these videos, which can be seen in the pic below, updates like design and chat history link added in each chat box through which a user can see all chat history with his friends with in the chat box.
 |
| Final view of my Chat Application |
How it is made ?
The very first step was searching for a free templates which match my requirement and I am very thankful to Pawel Balicki for the free Sample Admin template which I found by google, here is the original template http://kilab.pl/simpleadmin/
Next I started working on CSS, I change the color and design, create the 'Online Users' block and bind all the users to this block, I have used Asp.Net Repeater control for this, the tough time for me was creating Chat box's and the inner design of the chat box's i.e, writing CSS for the User message and Friend message as you can see in the above pic, once I done than I made the Chat box's hidden initially and pop's up when ever a message received. I have used same Asp.Net Repeater control for creating Chat box's for all the users.
I have used JQuery extensively for almost all the operation like pop up and hide of Chat box, sending and receiving messages, playing sound for new message, mark Chat box as orange for unread messages and marquee message on window title bar etc.
Feel free to contact me on khaleel316k@gmail.com for more details and Live Demo
