Learn to Code via Tutorials on Repl.it!

← Back to all posts
✉ TUTORIAL | HOW TO BUILD A CHAT APP ✉
zplusfour

Hi, this is a tutorial about how to build a chat app

here is it @Leroy01010

Let's start


1. Libraries

We need socket.io to make a connection from user to a user.
And we need an express server, and also http.

Code:

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.
Code:

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.

Code:

5. Fill the index.html with code to make a chat app.

We need to use jQuery to make a form for the chat.

Code:

So we basically added some CSS and some javascript (jQuery) to:

  • 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

Voters
LEXINGTONZASTR1
JeremiahIS
Loshad
FlatTheLeft
aksingh12
chazecheezy
nekofan
10mohammed10
warriorxyz
NathanPp
Comments
hotnewtop
Muhammad_SJC

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!

zplusfour

@Muhammad_SJC this is cool!
nice chat!
I know what is firebase, I'll learn it
but tell me, why did you make the username as a javascript prompt?
you can do a google auth with firebase!

Muhammad_SJC

@ZDev1 I know and I am working on it, but this is just a prototype

zplusfour
moradz

Well done zohdi
You are awesome

zplusfour

@moradz Thanks!

crysomemoreplea

my friend says he cant scroll/see the chat when i forked this project. Pls help?

KyleWatson3

What language is it in?

DonoldJTrump

@zplusfour @UnluckyFroggy how do you add markdown to a chatroom?

zplusfour
dzintarsb2

ay yo do you have discord , i have few question to ask , would really appriciate it my g!

zplusfour

@dzintarsb2 i'm very sorry but i don't have discord
would you like to ask me on MS Teams lmao?

dzintarsb2

@zplusfour i don't have that too LMAO , do you have any other contacts that you use actively?

zplusfour

@dzintarsb2 btw it's microsoft teams...
maybe slack?
or gmail XD
or we can just create a repl and chat on it

dzintarsb2

@zplusfour di k how u want lmao

zplusfour

@dzintarsb2 ah c'mon ima create a repl and invite u

dzintarsb2

@zplusfour ighte

zplusfour

@dzintarsb2 get on the repl

nngggaming

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)?

zplusfour

@nngggaming I have used Socket.IO
which it let's you to connect users to other users.
It is not a database, messages aren't saved in the database, only if someone joined the repl (if one of your family or friends or people on repl.it) can see messages on this web.

dudeactualdev

Hey @ZDev1 im AnonymousSquid10 on Github

zplusfour
KobeFF

ooooooooo very noice @ZDev1 ;)

zplusfour

@KobeFF thanks!!

KobeFF
M4urice

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

zplusfour

@M4urice it is fine
first, just make a HTML file (index.html)
And this block of code, renders the html file:

And then you'll be ready :)

M4urice

Thanks for the help @ZDev1

zplusfour

@M4urice gud np

sovietabyte

It says .io isnt defined.

zplusfour

@ColeBosman weird
io is defined!

sovietabyte

@ZDev1 Do you know any potential fixes?

zplusfour

@ColeBosman no cos it is working

sovietabyte

@ZDev1 Let me try again.
=)

zplusfour


it is working

zplusfour

@ColeBosman ok sure

Highwayman

I feel...so lost.... :(

I can’t understand the html stuff very well without any explanations or breaking down.

zplusfour

@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 <li> element
  • And the form is where you need to write your message
  • And the script tag, I wrote in it some code to:
  1. connect the websocket to the website
  2. make a little bit jQuery code to submit the form when you send a message
  3. and some append things (I explained in this comment)
    and then the username, it will be as a javascript prompt!

And that's it!

Highwayman

Wow thank you, very succinct! The ul thing is neat :)
@ZDev1

zplusfour

@Highwayman ye thanks :)

retronbv

lefted the chat.

left* the chat

Also when trying to send message

Cannot POST /

zplusfour
retronbv

@ZDev1 Cannot POST / when trying to send msg

zplusfour

@retronbv ok ok, I AM TRYING TO FIX THIS

retronbv

@ZDev1 SHEESH OK IM JUST TRYING TO GIVE YOU ALL THE ERRORS I FOUND

zplusfour

@retronbv it is fixed now

retronbv

Join chatorzo @ZDev1

zplusfour
Highwayman

@retronbv
@ZDev1
Lol this convo is literally me and my best friend during any game.

zplusfour

@Highwayman lmao same

Highwayman

The best of times lol
@ZDev1

zplusfour

@Highwayman XD nice

ZenoxHosting

ReferenceError: Server is not defined

any fix?

zplusfour

@ZenoxHosting can you screenshot it?

zplusfour

@ZenoxHosting done it is working now

ZenoxHosting

@ZDev1 Okay thank you so much

zplusfour
EpicGamer007

Also, the repl in the link, it doesn't work:

CodeLongAndPros

@EpicGamer007 Ew light theme /s

EpicGamer007

@CodeLongAndPros , im on school comp, i cant download extensions :(

CodeLongAndPros

@EpicGamer007 Uh Repl ide has dark enabled?

EpicGamer007

@CodeLongAndPros , the ide has dark enabled yes

CodeLongAndPros
zplusfour
AstOwOlfo

How is it related to repl? That’s the default ejs error page. It’s actually @ZDev1 who is responsible for the light theme @CodeLongAndPros

zplusfour

@agent9002 he means that he isn't using an extension that makes every website (error page is a website) has a dark theme

AstOwOlfo

Kinda cringe ngl @ZDev1

zplusfour
CodeLongAndPros

@ZDev1 No, the Console is light theme, which sucks.

zplusfour

@CodeLongAndPros ¯_(ツ)_/¯

CodeLongAndPros

@ZDev1 (\\)btw?

zplusfour

@CodeLongAndPros yes md sucks

EpicGamer007

@ZDev1 , since when did md suck?

zplusfour

@EpicGamer007 md sucks when you're trying to do ascii

EpicGamer007

@ZDev1 , oh yea lol

EpicGamer007

Wow! This is really cool! More node tuts plez! I definetly wanna try this.

zplusfour

@EpicGamer007 ok thanks!

Leroy01010

nice!!

zplusfour

@Leroy01010 thanks!
Learn it and submit your mission to your teacher!

Leroy01010

ok @ZDev1