✉ TUTORIAL | HOW TO BUILD A CHAT APP ✉
Hi, this is a tutorial about how to build a chat app
here is it @Leroy01010
socket.io to make a connection from user to a user.
And we need an express server, and also http.
2. Socket.io connection
We need some lines of code, to make a websocket connection.
The first block of code is for the username (for the chat app) and then to send: 'Username joined the chat...'
The second block of code is the opposite of the first one.
The third block of code is about the message, when the user sends a message, it will send his message with the username and the date of the message.
The fourth code block (outside of the websocket connection) is the port listen handler.
4. Render the HTML file for the chat.
We need to add some lines before the socket connection.
To render the HTML chat app file.
5. Fill the index.html with code to make a chat app.
We need to use jQuery to make a form for the chat.
- Make it responsive and beautiful.
- Connect the socket code to the HTML file.
And that's it
Have a great day!
Source code: https://repl.it/@ZDev1/chatorzo-2
That is a great chat app. But I have found a tool called Google Firebase that actually handles all the backend database for you. Check out the chatting app I made with Firebase: https://repl.it/talk/share/Chat-App-Using-Firebase-Realtime-Database/55382
If you want a tutorial on how to make this, then please upvote!
Kind of good and bad... good: it’s a wonderful chat app. Bad: it is connected through all repls? I followed all the steps above, and sent some messages, at the same time opened up another tab with your repl and yeah saw the messages i sent...
Is there any way to make it more private(like only people with my repl project link can see the messages)?
This may be a stupid question but I'm rather new to coding and I'm unsure of where to place the code for rendering the HTMl
I feel...so lost.... :(
I can’t understand the html stuff very well without any explanations or breaking down.
@Highwayman oh sorry
I'll explain to you:
in the HTML file, we did:
- Styling to make it colorful (not a lot)
- And then I wrote then socket.io cdn for the chat, and a jQuery cdn
- And then this
<ul>is the messages container
When someone sends a message it will append in it as a
- And the form is where you need to write your message
- And the script tag, I wrote in it some code to:
- connect the websocket to the website
- make a little bit jQuery code to submit the form when you send a message
- and some append things (I explained in this comment)
And that's it!