Skip to content
← Back to Community
My REAL first node
Profile icon
EpicGamer007

Chat app with socket.io by @EpicGamer007

IMPORTANT NOTICE - DOES NOT WORK WITH PHONES

  • I made it so that you cannot use this on phones because for some reason, the beforeunload event does not fire on phones

Features

  • Chat
  • Bad word filter
  • Dark theme and light theme - type /light - Light theme, /dark - dark theme(default), /green - green theme
  • Shows who is online
  • Ping(with sound) - One person at a time
  • Click on user's name(in users tab) to add their name to text box
  • 1 second cooldown(Stop spammers)

TODO

Credit:

My first node project as not really node... i just used express to serve a webpage... that does not realy count... so here, i have done by far, the best front-end js I have ever done and by far, the best nodejs i have ever done, i know I am a noob compared to literally all of you but I think this is really cool so here :)

Hope you all enjoy!

https://chat.epicgamer007.repl.co

Voters
Profile icon
Bree5000
Profile icon
OldWizard209
Profile icon
19georgew
Profile icon
outersloth
Profile icon
crazyman222214
Profile icon
techde
Profile icon
TheOceanFace
Profile icon
AgastyaSandhuja
Profile icon
19wintersp
Profile icon
SikePlayz
Comments
hotnewtop
Profile icon
Coder100

oh yeah, this thing! Nice!

Profile icon
EpicGamer007

@Coder100 thanks for your help!

Profile icon
Coder100
Profile icon
realTronsi

@Coder100 every fullstack developer has made this at one point or another lol

Profile icon
Bookie0

Noice, try to limit spam (max number of chars) as I managed to spam a lot lmfao

Profile icon
EpicGamer007

@Bookie0 ok thanks for feedback

Profile icon
Bookie0
Profile icon
RayhanADev

@EpicGamer007 please create mod powers and make me chat mod xD.

Profile icon
EpicGamer007

@RayhanADev hmmm i will see... irdk how to do that tho..

Profile icon
RayhanADev

@EpicGamer007 I can help you make it xD

Profile icon
EpicGamer007

@RayhanADev i really would appreciate it!

Profile icon
RayhanADev
Profile icon
EpicGamer007

@RayhanADev k i will invite u, tysm

Profile icon
Whippingdot

@moderation how long will it take you to make something like this for teams. Please make something like this soon.

Profile icon
Whippingdot

People are swearing. I can't put a pic cause it is bad. They said the f word by putting a hyphen between the letters. they also put a c word. a very bad one.

Profile icon
EpicGamer007

@Whippingdot i cant stop everything sorry :(

Profile icon
Whippingdot

Ya, I know. It is ok @EpicGamer007

Profile icon
[deleted]

@EpicGamer007 - Why is balls a swear word tho? I typed out balls, and then its starring it?

Profile icon
EpicGamer007

@YashvardhanPatt balls has a... different meaning, anyways, i cannot control the filter as it is a npm package,sorry

Profile icon
Whippingdot
Profile icon
[deleted]

@EpicGamer007 - Oh...um..ok...this is awkward lol..wait, there an npm package for swear words too? lol...

Profile icon
OldWizard209
Profile icon
EpicGamer007

@abdullahrajput9 thank you!

Profile icon
Squirrel777

Nice! How about adding a useless feature which tells people what OS they are on!

var os = require("os") console.log(os.platform())
Profile icon
EpicGamer007
Profile icon
EpicGamer007

@Squirrel777 wait, the problem is is that I can only do that from the server, not from the client... i have to find a way to get that from the client.

Profile icon
xxpertHacker

@EpicGamer007 UA sniffing. globalThis.navigator.userAgent. Have fun!

Profile icon
firefish

@Squirrel777 that will always return linux, because that's whar repl runs on

Profile icon
Squirrel777

@firefish Oh right, forgot that.

Profile icon
CodingGoose

This is actually really cool! I also love the look of the webpage

Profile icon
EpicGamer007

@DannyIsCoding tysm! The look of the webpage was actually by @FatBanana and me(I made the green one with cc)

Profile icon
zplusfour

amazing job!
I think you took the bad-words filter from my CHAT APP tutorial, right?

Profile icon
EpicGamer007

@ZDev1 yes and no ig... i actually just searched up bad word filter, and i found it, but i did read your tutorial. thanks tho!

Profile icon
zplusfour

@EpicGamer007 oh kk
np!

Profile icon
RohilPatel

Did u know socket.io is very vulnerable

Profile icon
EpicGamer007

@RohilPatel no, what is a good alternative? I just did it cause I am noob at node lol

Profile icon
programmeruser

@EpicGamer007 raw TCP sockets?

Profile icon
xxpertHacker

@RohilPatel Lmao, I swore you've used Socket.io yourself.
@programmeruser
Yeah, just using plain WebSockets are way better.

@EpicGamer007 See my response to this: https://repl.it/talk/ask/Is-socketio-redundant/59693

Profile icon
EpicGamer007

@xxpertHacker thanks will check it out

Profile icon
RohilPatel

I have used them lol. I don't like when people bot them tho lmao @xxpertHacker

Profile icon
RayhanADev

GG, I’mma go implement chat into my Pokemon game xD.

Profile icon
EpicGamer007

@RayhanADev nice ;)

Profile icon
RayhanADev

@EpicGamer007 pretty slick chat, I like the color themes xD. obtw suggestion don’t use alerts. It’s call a blocking input and degrades the ux (and also you can just press cancel button). Maybe use the Repl Auth?

Profile icon
EpicGamer007

@RayhanADev maybe... I honestly was planning on doing that. But I do not know how :(

Profile icon
EpicGamer007

@RayhanADev dude, ur like so good at nodejs, and frontend dang, look at your pokemon game.

Profile icon
xxpertHacker

@RayhanADev I literally come to the comments just to say, "please don't use alert."

Profile icon
EpicGamer007

@xxpertHacker sorry but idk any other easy way.. might implement it later tho

Profile icon
xxpertHacker

@EpicGamer007

sorry but idk any other easy way..

Sometimes it isn't easy, but it must be done nonetheless.

Profile icon
RayhanADev
Profile icon
RayhanADev

@EpicGamer007 thank you xD.

Profile icon
k9chelsea2

@EpicGamer007 I might be able to add repl auth and maybe the usernames idk maybe perhaps prolly not but maybe idk

Profile icon
ComputingSquid

oh i know use like toast or something.
its a jquery feature
it dissapears after a certain amount of time @EpicGamer007

Profile icon
EpicGamer007

@xxpertHacker k then... i will try...

Profile icon
NoNameByProgram

@EpicGamer007 i think ur that guy that says:
no <input>

Profile icon
EpicGamer007
Profile icon
NoNameByProgram

@EpicGamer007 i was at camp CodeByte (some private camp)
and they said to use no <input> for the username thing on a website

Profile icon
EpicGamer007

@NoNameByProgram i understand, i have been trying to use prettyalert but that didnt seem to work, ive moved on to other projects now too

Profile icon
EpicGamer007

@CodingCactus - I made green theme like you said! (If you don't like the colors, I can invite you and you can change them)

Profile icon
CodingCactus

@EpicGamer007 it still purple for me

Profile icon
EpicGamer007

@CodingCactus huh, type /green no spaces

Profile icon
Whippingdot

I love green mode. @EpicGamer007

Profile icon
TsunamiOrSumth
Profile icon
elburg
Profile icon
YodaCode
Profile icon
19georgew

nice

Profile icon
GEISTCODER

Dis Cool

Profile icon
EpicGamer007
Profile icon
GEISTCODER

How do I enter with the same username though? @EpicGamer007

Profile icon
EpicGamer007

@GEISTCODER u cant lol. thats to make sure 2 random people dont end up with the same username

Profile icon
GEISTCODER

I've already used up GEISTCODER and GEISTCODER. (with a full stop) @EpicGamer007

Profile icon
outersloth

You might not understand this, but I'm a web developer. I make things such as website to evade school censorship (aka bypass blocks). One of the main things people asked for was a chatbox, and this fits PERFECTLY on my site. I love the automatic dark mode, and how I can do other stuff while the chat stays moderated. One thing I'd request is admin/mod perms, and ban/kicks. Other than that, that's about it!

Profile icon
EpicGamer007

@outersloth thank you! unfortunately, i am moving onto new projects so I am not sure if I would be up to editing this more

Profile icon
outersloth

@EpicGamer007 I was really looking forward to future updates :(, but it's ok

Profile icon
crazyman222214

As a mainly front-end developer, any back-end amazes me. I really like the css done, it looks clean!

Profile icon
EpicGamer007

@crazyman222214 thank you! The green theme is by me and CodingCactus and the light and dark themes are by FatBanana

Profile icon
NoNameByProgram

add mentions and notifications (maybe even markdown)

Profile icon
EpicGamer007

@NoNameByProgram by mentions, if you mean like @[username] is is already there.

Profile icon
NoNameByProgram

oh ok

Profile icon
Jeydin21

It doesn't save the chat doe ;-;
Other than that it's pretty good, I like the different color schemes we can choose.

Profile icon
EpicGamer007

@Jeydin21 thanks, yea idk how we can save messages in database efficiently

Profile icon
Jeydin21

@EpicGamer007 Try logging it into a .txt file, just a suggestion ;)

Profile icon
EpicGamer007

@Jeydin21 i dont think it worsk like that..., ig i can try..

Profile icon
NoNameByProgram

@Jeydin21 lol no

Profile icon
Jeydin21

@NoNameByProgram I mean I'm not trying to compete with your repl or anything but I have a forked repl that does that.

Profile icon
NoNameByProgram

@Jeydin21 lol i don't even have a repl like this
but i just don't reccomend a txt file

Profile icon
Jeydin21

@NoNameByProgram What are you supposed to use then ;-;

Profile icon
EpicGamer007

@Jeydin21 database, and idk how to use that :(

Profile icon
Jeydin21

@EpicGamer007 Then just use a .txt-

Profile icon
EpicGamer007

@Jeydin21 what do u mean just use txt? im not sure it saves like that... yea it wouldnt save if u use a txt file

Profile icon
Jeydin21

@EpicGamer007 Lemme give you the repl I forked. This is not advertising cause I didn't even make it

Profile icon
Jeydin21

@EpicGamer007 Here ya go try this
https://repl.it/@Jeydin21/Global-Chat

This is not advertising because I didn't even make this, this was a fork I made like 2 months ago

Profile icon
NoNameByProgram

@Jeydin21 well let's see here...

  1. JSON (not reccomended)
  2. DB (@replit/db, mongoose, mongodb, etc.) (reccomended)
Profile icon
EpicGamer007

@NoNameByProgram how would i use replitdb with it? and would sql be a good choice?

Profile icon
Victor6767

This is a great use of Node.js and can be improved so much. Please add a character limit because even the 1 second cooldown doesn't stop spammers but other wise this is perfect

Profile icon
EpicGamer007

@Victor6767 thank you!

Profile icon
NoNameByProgram

@EpicGamer007 maybe try using app.post to handle POST requests and just not use socket.io

Profile icon
EpicGamer007

@NoNameByProgram im sorry but idk that :( do u know any places where i can learn more?

Profile icon
NoNameByProgram

@EpicGamer007 not exactly srry :(

Profile icon
xxpertHacker

I think I might know why phones aren't working with it,

$(window).bind('beforeunload', function() { socket.emit('user closed tab', user); });

The problem seems to originate from this line in your HTML document:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Profile icon
EpicGamer007

@xxpertHacker i tried window.beforeunload as well. that did not work either

Profile icon
xxpertHacker

@EpicGamer007 I wish I had a phone to test this on.

But anyway, the server should send the event, once they have received an event indicating the socket has disconnected.

For example, if my PC dies, the event won't fire either.

Profile icon
EpicGamer007

@xxpertHacker ok i see... but you can test phone on pc, all you gotta do is: open up ctrl shift i menu, then press this button:

image

the one which looks like a phone or table, then you can see it in phone view ;)

Profile icon
xxpertHacker

@EpicGamer007 I wish I had access to the browser console :(.

Profile icon
EpicGamer007
Profile icon
MemeManHimself

BRuh somebody broke the chat by spamming and now I can't send messages and the chat just won't stop loading it just keeps on going and going eee

Profile icon
EpicGamer007

@MemeManHimself will see...

Profile icon
MemeManHimself

@EpicGamer007 It's probably fixed now tho

Profile icon
MemeManHimself

@EpicGamer007 Ouki then

Profile icon
elburg

nice

Profile icon
EpicGamer007

@elburg thank you!

Profile icon
elburg

@EpicGamer007 no problem

Profile icon
elipie

nice, im eeeeeeeeeeeeeeeeeee and yo has left the chat at 11/10/2020, 3:23:20 PM
@elburg

Profile icon
elburg

@elipie nice

Profile icon
elipie

@elburg Noice

Profile icon
elburg

@elipie nahiece

Profile icon
elipie

@elburg NeEcE

Profile icon
elburg

@elipie KnEeSe

Profile icon
elipie
@elburg nice
Profile icon
elburg