Share your repls and programming experiences

← Back to all posts
My REAL first node
EpicGamer007 (1036)

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

Commentshotnewtop
Coder100 (12435)

oh yeah, this thing! Nice!

realTronsi (840)

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

RayhanADev (1215)

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

EpicGamer007 (1036)

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

EpicGamer007 (1036)

@RayhanADev i really would appreciate it!

Bookie0 (4977)

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

Whippingdot (158)

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

Whippingdot (158)

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.

EpicGamer007 (1036)

@Whippingdot i cant stop everything sorry :(

Persassy2109 (230)

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

EpicGamer007 (1036)

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

Persassy2109 (230)

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

Squirrel777 (89)

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

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

@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.

xxpertHacker (649)

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

firefish (877)

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

DannyIsCoding (690)

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

EpicGamer007 (1036)

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

ZDev1 (818)

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

EpicGamer007 (1036)

@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!

RohilPatel (1459)

Did u know socket.io is very vulnerable

EpicGamer007 (1036)

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

xxpertHacker (649)

@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

RohilPatel (1459)

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

RayhanADev (1215)

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

RayhanADev (1215)

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

EpicGamer007 (1036)

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

EpicGamer007 (1036)

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

xxpertHacker (649)

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

EpicGamer007 (1036)

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

xxpertHacker (649)

@EpicGamer007

sorry but idk any other easy way..

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

k9chelsea2 (731)

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

ComputingSquid (47)

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

NoNameByProgram (191)

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

NoNameByProgram (191)

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

EpicGamer007 (1036)

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

EpicGamer007 (1036)

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

GEISTCODER (16)

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

EpicGamer007 (1036)

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

GEISTCODER (16)

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

outersloth (0)

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!

EpicGamer007 (1036)

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

outersloth (0)

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

crazyman222214 (18)

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

EpicGamer007 (1036)

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

NoNameByProgram (191)

add mentions and notifications (maybe even markdown)

EpicGamer007 (1036)

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

Jeydin21 (61)

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

EpicGamer007 (1036)

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

Jeydin21 (61)

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

EpicGamer007 (1036)

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

Jeydin21 (61)

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

NoNameByProgram (191)

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

Jeydin21 (61)

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

EpicGamer007 (1036)

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

EpicGamer007 (1036)

@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

Jeydin21 (61)

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

Jeydin21 (61)

@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

NoNameByProgram (191)

@Jeydin21 well let's see here...
1. JSON (not reccomended)
2. DB (@replit/db, mongoose, mongodb, etc.) (reccomended)

EpicGamer007 (1036)

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

Victor6767 (0)

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

NoNameByProgram (191)

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

EpicGamer007 (1036)

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

xxpertHacker (649)

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>
EpicGamer007 (1036)

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

xxpertHacker (649)

@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.

EpicGamer007 (1036)

@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:

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

xxpertHacker (649)

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

MemeManHimself (92)

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