Create Real-time Chat App using HTML, CSS, JavaScript, NodeJS & Socket.io | Full Video

[@scottforbes0]

This is a tidy example of the project I’m working on, that uses a Python Websockets server and a Web front end. I can definitely learn from this, thank you.

[@klaus4945]

You are doing great job!!! Hope someday u will do voiceover while writing code!!! God bless You

[@philipskird8649]

thanks for teaching me how to import correctly the node.js modules. in a short video. its so importent for easy online games too , that informations :-)

[@amanchaturvedi5334]

Because ur demonstration and implementation is awesome great learning for me 😄👍🙏

[@Codingflag]

Glad to hear that!

[@getsetalk]

Really helpful, please make video on P2P file transfer and chat system like WhatsApp

[@aviatsports]

great video! i was also wondering how you could make it so that you can use it sorta like a customer service live chat?

[@Collossus-vc6wt]

Nice work! Watched it on speed 1.5 and it looked perfect!

[@Codingflag]

Glad it helped.

[@wierdpig1056]

@@Codingflag is it local ?

[@aniketjoshi6286]

PLease Give source code of this project

[@buddyhartono6496]

Awesome Tutorial 👍👍👍👍👍

[@vhiroley]

Lovely Bhai 🤗👌👌

[@fidelmudzamba2029]

This is really good. Source code would have been nice too

[@noormohammadsazesh897]

Good job, which font are you using?

[@iamadeal]

It's really good. Can i get the source code please?

[@_developer__6414]

Yo u doin awesome things man, keep going!

[@jgartdesignmarcenariaartes6202]

Great job! nice work

[@Codingflag]

Thanks a lot!

[@alexdemeter1558]

Amazing job keep it going also source code please

[@aleksboboychev]

Nice work!

[@sammedkumarchougala4912]

Thank you sir

[@rangabharath4253]

Awesome as always 👍😀

[@eliebouley]

Speechless ! Please wich IDE you use ? 😊😊😊

[@Codingflag]

sublime text

[@eliebouley]

@@Codingflag Thanks sir

[@faygaming4355]

Great work my men. Can I get the source code please?

[@F7682]

Awesome its working brother👍 but problem is that when new user joined it does not showing anything

[@Codingflag]

check is there any error on console. DM me on instagram, I will help to debug.

[@F7682]

@@CodingflagThank you brother now my problem is solved and it's working 👍 sorry brother I am not using Instagram and Facebook😅 thank you for your support brother ❣️

[@badrivenkatesan6045]

Could you please show a class diagram of this P2P system with how you handle the notifications like "Person A joined the chat"

[@Codingflag]

There is no class used to build this system, so class diagram is not possible.

[@reactteamwdp7648]

thank you so much sir

[@sirjoi1628]

Hello, what program are you using on "1. Setting up project". Please tell us!

[@lassyamiriyam5981]

Can I do this project in vs code directly without any installation as you shown in viedo or tell what application should I install in vscode to do this project please

[@srikantsoni9700]

i have coded the whole by myself but its not working...it would be appreciated if you can share the source code 🙏

[@AlexTheDev1]

Me too!

[@rajatvashistha1665]

very helpfull tyyy

[@slmmaula_]

Why is my join button not working? Please help me

[@HerbyScott]

Not only you bro

[@HerbyScott]

Did you find a solution?

[@nothing-jr4bm]

Sir, everything is fine and properly working but my ''left the conversation" is not working but joined the conversation is working

[@Codingflag]

can you check your socket listener name is written properly in both server and client side. Also you can check console to get proper error information. Reply to this if you face any error / issue along with your code.

[@nothing-jr4bm]

@@Codingflag bug is fixed sir thank u for this amazing video

[@Kuyanelsontv24]

Sir good day can i have the source code of this chatbbox

[@someone-4k]

Thanks very much😊keep it up bro.

[@Codingflag]

Thank you too

[@zamyilton]

Please what is the name of the application used in the beginning

[@Codingflag]

Its linux terminal

[@zamyilton]

@@Codingflag thanks

[@nelsonmuzahura6265]

woooow

[@baburao.creates]

bro i am getting this error Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') in code.js pls help me out

[@Codingflag]

Can you share code so that I can help to debug. Also make sure you have added script tag at the end of body tag.

[@baburao.creates]

@@Codingflag bro will this work perfectly if i upload it to production

[@Codingflag]

yes

[@manojgmanojg9600]

Sir Everything is working well and good ,but when two person joined like ex join and left the conversation mssg is not displaying pls tell how to solve this error.

[@Codingflag]

For this you need to maintain database of messages so that it can persist after logout. I have created one tutorial where I have used firebase as database and svelte. You can check that.

[@manojgmanojg9600]

@@Codingflag okk sir

[@tohirramazonov-mk1dp]

great

[@tito5540]

what is the black screen platform called and the white screen ?

[@Codingflag]

Sublime text is code editor and Terminal is CLI tool

[@sbiofficial658]

Wow

[@jegwaar6018]

i just wanna know does all messages will disapear after everyone logout. want some admin control like i can delete msg send by anyone but also collect some detail of person that sent msg so that i wont be in totaly dark. blocking a person block there ip to join room for 24 hr. if you could help me please i'm making a project first time

[@WaydeWise]

what theme do you use in sublime text?

[@Codingflag]

Guna

[@WaydeWise]

@@Codingflag thx

[@xmythicgamingx2868]

Nice its working

[@anonymoussaif7361]

Where the data will be store??

[@Codingflag]

It's not stored anywhere, messages will be sent instantly to all room members. If you want to store message, I have created one video where I have used firebase to store messages.

[@Nishant-f4w]

Tell all the commands prompted in windows in terminal.

[@Codingflag]

Install git bash software and after that use bash terminal which supports these linux commands. basically below are the commands and their uses 1. touch - use to create file. You can create file using any of the way in windows. 2. cd - this also works in windows 3. npm - install nodejs on your machine to execute this.

[@Kool_Conor]

can you join from diferent computers?

[@ahmedelmaqri4576]

bro common

[@rockstarsai19]

bro, I am getting the white screen when i active the chat screen

[@Codingflag]

Any error on console?

[@shemavictoire]

thx very much

[@Codingflag]

You're welcome!

[@VarshithaPatil]

In which application we can create that mkdir..??

[@Codingflag]

If you are using windows then use command prompt or download git bash software. You don’t even need to use commands. You can do it using interface. mkdir = create folder with given name touch = create file with given name

[@amanchaturvedi5334]

Can I write this code in vs code please respond me??

[@Codingflag]

yes

[@lionel9038]

What do I have to do differently for a group chat?

[@Bodige_Sri_Charan_Goud]

Bro can you tell me the steps to host in server... I want to share the web site link to my guide

[@Wander_Lens]

Bro can you tell me which node module i have to install for this project

[@Codingflag]

express & socket.io

[@Wander_Lens]

@@Codingflag npm install 🤩

[@Reaperdip]

how does sockets know or recognize the Type ?

[@smartycode]

all the places seems to go fine, but isn't work to display message and when im inspecting it give me the message that Uncaught TypeError: Cannot read property 'addEventListener' of null so what shall i do

[@Codingflag]

can you share your code so that I can help.

[@Saggiskate]

how could I implement in the code a test to see if the username exists, so that I don't have two users with the same nickname? Thanks

[@Codingflag]

Create global array in node and add username into that array when user joins and remove it when user leaves. Before joining the user, just check from maintained userlist array.

[@Saggiskate]

@@Codingflag Thank you I have done it and it worked very well. I have one more question, is it possible to create a fixed administrator role to delete or remove users from the chat?

[@Codingflag]

Yes you can create it just create one more page from where you can manage that users array.

[@invisible2795]

Nice 👍 can I get source code? 😊

[@Codingflag]

Code is right there after demo part. If you face any issue while running it, message me on instagram along with github code link

[@FREEDOM_SIDE]

@@Codingflag aM Having issues intergrating with my application

[@jaypaul3484]

@codingflag brother localhost page is not updating even after completing index.html code, server page is keep showing This is HTML Please help

[@EugeneAddo-r2b]

Can it connect two different devices

[@Codingflag]

yes. for that you need to host it on server

[@EugeneAddo-r2b]

But can I use vscode's server

[@Codingflag]

no. In that case you can only use it for devices within your local network

[@hanglethibich6835]

Can you application windows ?

[@SchoolBoyJoooooo]

i have a problem, when i try to join chat my program stay at the join screen. I already follow all your step, could you help me with this?

[@Codingflag]

can you upload your code on git and share link or DM link on insta so that I can help to debug

[@SchoolBoyJoooooo]

@@Codingflag ahhhh no worries, i already solved the problem thankyou for responding tho.

[@Marcus_405]

@@SchoolBoyJoooooo so what's the fix?

[@SchoolBoyJoooooo]

@@Marcus_405 miss type variables in css, in messages i didnt type the 's' (message)

[@misqajap9945]

​@@SchoolBoyJoooooohow bro?

[@roshankumarb3257]

Bro.... This is a very nice session. Can I get your github id?

[@suneelmekala54]

I am getting an error : io is not defined.

[@ahmedallawi8638]

Make sure the library is installed

[@sunbertyv3947]

This is incredibile but can this chatroom be share?

[@LEARNANDEARN421]

bor i am getting an errro when i enter chat from one tab and then from other tab to chatroom the first one already comes to the first page means reload

[@programmerchauhan658]

How to make it not a personal so that every family has their own? Please tell

[@Codingflag]

Host this app on heroku server.

[@programmerchauhan658]

@@Codingflag thank sir

[@Bodige_Sri_Charan_Goud]

@programmerchauhan658 Bro did you host this to server...!??

[@AbelAbel-le3pg]

Is its likw random chat

[@invisible2795]

Bhai ye app only sample h ya install bhi kr skty hen agr play store per ho to link send kr dena mje thanks 😊

[@Codingflag]

This is web app, you can make android app from this using cordova

[@sethunthunder]

how do i save the chat?

[@yechielrosenzweig8790]

How I get the sources files?

[@TGBDOfficial]

how can i get the code?

[@niketnayan1020]

I am not able to deploy it. Can you please help me?

[@Codingflag]

kzbin.info/www/bejne/hGaui5uOprGcZqs I have created video on nodejs app deployment on heroku. If you are still facing issue then DM me on instagram.

[@pocoace5415]

the code.js wont work in me idk why

[@Codingflag]

Can you share error if any

[@МихаилПавлюкевич-с2ы]

I did everything as in the video, but the buttons do not work, does not enter the room and does not send messages How can I fix this?

[@Codingflag]

DM on instagram, I will help you to debug the issue

[@programmerchauhan658]

Tell all software used making this site

[@Codingflag]

sublime text 3 chrome browser terminal / command prompt node js

[@programmerchauhan658]

@@Codingflag thank you sir

[@charliechicco1861]

This is great!!!. How do l host is online now

[@Codingflag]

Host it on heroku, you can find tutorials on youtube.

[@Saske443]

source code? pls

[@jfkongphop]

have github repo?

[@manish_aravindh_2007]

Dose people can chat online using this project? How many people can chat at the time?

[@Codingflag]

It depends on max socket connections supported by your machine.

[@quannguyenhuaminh2944]

do you have github, can i get source pls ?

[@Unknown-il3md]

my code isn't showing joined conversation at end and cannot see other typing

[@kavitawani3682]

my also u get any solution

[@akhilv.a9155]

is there the code available

[@htmoh8115]

are you using VSC?

[@Codingflag]

no. its sublime text 3

[@htmoh8115]

@@Codingflag ok

[@onlyshort1302]

My joining page is not working

[@carefree_ladka]

Add private chat functionality

[@ninjaboiz128]

source code please

[@HerbyScott]

My join button don't work help me please

[@alkapriyadarshini8347]

Sir what's your github id?

[@shubhammusale692]

Thank u bro u are awesome it helped me a lot Totally working 😘😘😘😘😍😍😍😇😇😇😇😇😇😇🥰🥰🥰🥰🥰🥰

[@Codingflag]

Glad to hear that

[@shubhamgarg5007]

Its great but can I get the source code please?

[@Codingflag]

sure, I will put it in git and update you

[@Codingflag]

github.com/imgitto/Chatroom

[@klaus4945]

@@Codingflag Thx bro!!

[@VikashYadav-km5gk]

When running this command: node server.js node:internal/modules/cjs/loader:1051 throw err; ^ Error: Cannot find module 'C:\Users\Yadav\Documents\Chatroom\server.js' at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15) at Module._load (node:internal/modules/cjs/loader:901:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) at node:internal/main/run_main_module:23:47 { code: 'MODULE_NOT_FOUND', requireStack: [] } Node.js v20.5.1 How to solve this error...

[@Fort_Frenzy]

Where did you make the server.js?

[@PranotSolase]

Touch is not recognized as an internal external command error

[@HerbyScott]

Use type nul

[@adityaakmal207]

in 23:40 my console throw me an error "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'username')" how solution?

[@Codingflag]

Can you please upload code on git or any other platform and share link .. so that I can help to debug.

[@estebanmolina7929]

Im in 19:53, the console throw me an error "Uncaught ReferenceError: io is not defined" but io it was defined in server.js but it also does not allow me to use "require" because the console throw me the same error "Uncaught ReferenceError: require is not defined"

[@Codingflag]

You can use another cdn link for socket.io library.

[@zamyilton]

Hello, mine works well but when I go incognito mode, they don't see each other. I've tried opening normal tab, but they still don't see each other, it doesn't show joined conversation or left conversation, and when I say hello on one tab, it doesn't show on the other tab. But everything else is fine. What can I do??

[@zamyilton]

And besides I'm using the latest socket. Which do I link to my html??

[@zamyilton]

And is there any possible way to transfer to my phone 😂

[@Codingflag]

can you share your code so that I can help to debug.

[@DominicNweze]

@@zamyilton turn it into an app. Or put the code on a mobile editor.

[@kavitawani3682]

Hello, mine works well but when I go incognito mode, they don't see each other. I've tried opening normal tab, but they still don't see each other, it doesn't show joined conversation or left conversation, and when I say hello on one tab, it doesn't show on the other tab. But everything else is fine. What can I do??@@Codingflag

[@Youcan352]

can you share the code? please.

[@Anime_editz67]

Can you give src code

[@mihirsarvaiya4882]

Where are you write the code?

[@Codingflag]

sublime text

[@unlimitedchillan6143]

@@Codingflag probably

[@leandrohenrique6056]

❤️🙏🏽

[@abfkabbo6118]

Can you provide the source code pls??

[@RohitKumar-zp6ci]

20:18 my join button is not working, i checked but couldn't find what went wrong

[@Codingflag]

You can check console to check the errors.

[@raunakkumarmishra1449]

@RohitKumar-zp6ci same issue, do you find any bug?

[@RohitKumar-zp6ci]

​@@raunakkumarmishra1449 I was trying to run only the index.html file

[@maro_xd1295]

it doesn't work can you take a look :(