My REAL first node
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
beforeunloadevent 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:
-
@EpicGamer007 - Main creator
-
@dakshg - Helper
-
@FatBanana - CSS boi
-
@Coder100 - Feedback
-
@JDOG787 - Feedback
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!
Noice, try to limit spam (max number of chars) as I managed to spam a lot lmfao
@Bookie0 ok thanks for feedback
@EpicGamer007 np! :D
@EpicGamer007 please create mod powers and make me chat mod xD.
@RayhanADev hmmm i will see... irdk how to do that tho..
@EpicGamer007 I can help you make it xD
@RayhanADev i really would appreciate it!
@EpicGamer007 sure!
@RayhanADev k i will invite u, tysm
@moderation how long will it take you to make something like this for teams. Please make something like this soon.
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.
@Whippingdot i cant stop everything sorry :(
Ya, I know. It is ok @EpicGamer007
@EpicGamer007 - Why is balls a swear word tho? I typed out balls, and then its starring it?
@YashvardhanPatt balls has a... different meaning, anyways, i cannot control the filter as it is a npm package,sorry
Awkward @EpicGamer007
@EpicGamer007 - Oh...um..ok...this is awkward lol..wait, there an npm package for swear words too? lol...
@abdullahrajput9 thank you!
Nice! How about adding a useless feature which tells people what OS they are on!
var os = require("os") console.log(os.platform())
@Squirrel777 sure!
@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.
@EpicGamer007 UA sniffing. globalThis.navigator.userAgent. Have fun!
@Squirrel777 that will always return linux, because that's whar repl runs on
@firefish Oh right, forgot that.
This is actually really cool! I also love the look of the webpage
@DannyIsCoding tysm! The look of the webpage was actually by @FatBanana and me(I made the green one with cc)
amazing job!
I think you took the bad-words filter from my CHAT APP tutorial, right?
@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!
@EpicGamer007 oh kk
np!
Did u know socket.io is very vulnerable
@RohilPatel no, what is a good alternative? I just did it cause I am noob at node lol
@EpicGamer007 raw TCP sockets?
@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
@xxpertHacker thanks will check it out
I have used them lol. I don't like when people bot them tho lmao @xxpertHacker
GG, I’mma go implement chat into my Pokemon game xD.
@RayhanADev nice ;)
@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?
@RayhanADev maybe... I honestly was planning on doing that. But I do not know how :(
@RayhanADev dude, ur like so good at nodejs, and frontend dang, look at your pokemon game.
@RayhanADev I literally come to the comments just to say, "please don't use alert."
@xxpertHacker sorry but idk any other easy way.. might implement it later tho
sorry but idk any other easy way..
Sometimes it isn't easy, but it must be done nonetheless.
@xxpertHacker lol xD.
@EpicGamer007 thank you xD.
@EpicGamer007 I might be able to add repl auth and maybe the usernames idk maybe perhaps prolly not but maybe idk
oh i know use like toast or something.
its a jquery feature
it dissapears after a certain amount of time @EpicGamer007
@xxpertHacker k then... i will try...
@EpicGamer007 i think ur that guy that says:
no <input>
@EpicGamer007 i was at camp CodeByte (some private camp)
and they said to use no <input> for the username thing on a website
@NoNameByProgram i understand, i have been trying to use prettyalert but that didnt seem to work, ive moved on to other projects now too
@CodingCactus - I made green theme like you said! (If you don't like the colors, I can invite you and you can change them)
@EpicGamer007 it still purple for me
@CodingCactus huh, type /green no spaces
I love green mode. @EpicGamer007
nice
Dis Cool
@GEISTCODER thanks
How do I enter with the same username though? @EpicGamer007
@GEISTCODER u cant lol. thats to make sure 2 random people dont end up with the same username
I've already used up GEISTCODER and GEISTCODER. (with a full stop) @EpicGamer007
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!
@outersloth thank you! unfortunately, i am moving onto new projects so I am not sure if I would be up to editing this more
@EpicGamer007 I was really looking forward to future updates :(, but it's ok
As a mainly front-end developer, any back-end amazes me. I really like the css done, it looks clean!
@crazyman222214 thank you! The green theme is by me and CodingCactus and the light and dark themes are by FatBanana
add mentions and notifications (maybe even markdown)
@NoNameByProgram by mentions, if you mean like @[username] is is already there.
oh ok
It doesn't save the chat doe ;-;
Other than that it's pretty good, I like the different color schemes we can choose.
@Jeydin21 thanks, yea idk how we can save messages in database efficiently
@EpicGamer007 Try logging it into a .txt file, just a suggestion ;)
@Jeydin21 i dont think it worsk like that..., ig i can try..
@Jeydin21 lol no
@NoNameByProgram I mean I'm not trying to compete with your repl or anything but I have a forked repl that does that.
@Jeydin21 lol i don't even have a repl like this
but i just don't reccomend a txt file
@NoNameByProgram What are you supposed to use then ;-;
@Jeydin21 database, and idk how to use that :(
@EpicGamer007 Then just use a .txt-
@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
@EpicGamer007 Lemme give you the repl I forked. This is not advertising cause I didn't even make it
@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
@Jeydin21 well let's see here...
- JSON (not reccomended)
- DB (@replit/db, mongoose, mongodb, etc.) (reccomended)
@NoNameByProgram how would i use replitdb with it? and would sql be a good choice?
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
@Victor6767 thank you!
@EpicGamer007 maybe try using app.post to handle POST requests and just not use socket.io
@NoNameByProgram im sorry but idk that :( do u know any places where i can learn more?
@EpicGamer007 not exactly srry :(
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>
@xxpertHacker i tried window.beforeunload as well. that did not work either
@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.
@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 ;)
@EpicGamer007 I wish I had access to the browser console :(.
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
@MemeManHimself will see...
@EpicGamer007 It's probably fixed now tho
@EpicGamer007 Ouki then
oh yeah, this thing! Nice!
@Coder100 thanks for your help!
np! :) @EpicGamer007
@Coder100 every fullstack developer has made this at one point or another lol