Share your repls and programming experiences

← Back to all posts
repl chat: Integrated global chat for repl.it
h
MrEconomical (1080)

repl chat yey

After making repl mail, I still wasn't satisfied. There was a mailing system now, but no way to chat in real time on repl.it itself. So I decided to make a chat system cool kek.

Features

(yes I love this repl share post format dont judge)

  • Log in with repl auth - use repl auth to log in with your repl account @amasad
  • Integrated - repl chat pops up right on repl.it! I styled it based on the multiplayer chat so it is a little window on the bottom right. I just tweaked a few things to improve the UI where I saw fit. More on this in Usage Instructions
  • Fast - repl chat uses WebSocket to send chat messages in real-time
  • Message history - unlike many other chat applications cough cough and somewhat repl multiplayer chat itself cough cough repl chat stores the last 50 messages so you will have context every time you log on

Usage Instructions

To use repl chat in repl.it, save it as a bookmarklet. A bookmarklet is basically a bookmark that on click executes some javascript code, in this case adding the repl chat window to repl.it.

  1. Create a new bookmark (name it whatever you want)
  2. In the url section, copy and paste this:
javascript:!function(){if(location.href.startsWith("https://repl.it")){const t=document.createElement("script");t.id="repl_chat_script",t.src="https://repl-chat.mreconomical.repl.co/use/bookmark.min.js",document.body.appendChild(t)}else alert("Go to https://repl.it to use repl chat!")}();
  1. Now, when you are on repl.it, if you want to add the repl chat window, simply click on the bookmark!

If you really wanted to, you could use the browser client here: https://repl-chat.mreconomical.repl.co but why tho?

DATABASE SOURCE CODE: https://repl.it/@MrEconomical/repl-chat-database-source

Commentshotnewtop
JordanDixon1 (79)

How do I make a chat for only me and my friends? In other words, how do I make a private chat after I fork the repl?

MrEconomical (1080)

@JordanDixon1 you're going to have to set up your own database

JordanDixon1 (79)

@MrEconomical How do I do that? Can you walk me through that?

MrEconomical (1080)

@JordanDixon1 ok sure, do you have discord or something

JordanDixon1 (79)

@MrEconomical No. however I can invite you to the repl I forked.

JordanDixon1 (79)

@MrEconomical How would I set up my own database?

MrEconomical (1080)

@JordanDixon1 get back on your repl im just going to give you a copy of my database without any data in it

JordanDixon1 (79)

@MrEconomical Ok, well now I have everything on there, but it still isn't working. The terminal returns with: Invalid value "undefined" for header "repl-chat-key"

MrEconomical (1080)

@JordanDixon1 you need to create a database key, then in the .env in repl chat put REPL_CHAT_KEY = your key here and in the config.json on the database put replChatKey: your key here as a JSON property

JordanDixon1 (79)

@MrEconomical could you change it for me and then show me what you changed? I have invited you to the database as well I believe.

P3tray (3)

You should probably put out a guide on how to make your own database, i will try to figure it out myself for now. Also, i have tried to modify the simple JavaScript function to allow it to work elsewhere, however it does not seem to work. Is that possible (I am probably doing it wrong, because i rarely use JS)?

This thing is amazing.

MrEconomical (1080)

@P3tray it might be possible on some sites, but many sites block script requests to other sites (for instance, google sites) so it wont work on any of those

P3tray (3)

Nevermind. I probably will not be able figure it out because i cannot access any blank sourcecode for the database. I am too lasy unskilled to make my own completely from scratch trying to figure out what the sourcecode would be.
@MrEconomical You should make https://repl-chat-database-source.mreconomical.repl.co containing the source without any logs or data, because that would really help. Great work.

P3tray (3)

@MrEconomical Thanks, working on making a button that will work universally too (still using repl.it auth), i can give you the code as well if i get it done.

It will probably be done tomorrow, as i have no time now.

And yeah, most sites will not like it.

P3tray (3)

Got that chat working for me. Took a while to figure out which errors where coming from where, and which parts i broke trying to fix other parts.

The main problem was figuring out the key, i set it through the console of the repl-chat (process.env.REPL_CHAT_KEY = "your key here".

I also put a comma where i shouldn't... That confused it and didn't give an error, the messages would not load.

P3tray (3)

Personal database working on other sites.

Repl.it chat on DuckDuckGo:

Giothecoder (51)

Hm. iPad safari doesn’t like it... much sadness. 😞

bramley (82)

@Giothecoder Repl Auth is weird on mobile devices, and nobody seems to know why. @amasad ?

Giothecoder (51)

@bramley no that’s not it actually, Safari doesn’t allow you to run js in that way with the bookmarks. 😩😞

Giothecoder (51)

@bramley honestly yes, they are so frustrating sometimes.

AllAwesome497 (274)

An Error occurred: Failed to authenticate :(

bramley (82)

@AllAwesome497 Repl Auth is weird on mobile devices, and nobody seems to know why. @amasad ?

Nanowrimoijk (39)

Does it cover up the multiplayer chat box when shrunk?

MrEconomical (1080)

@Nanowrimoijk no actually, I made it so you can't use both at the same time and it sits right above the multiplayer chat! (screw repl's jsx stuff I had to figure that out for an hour)

Nanowrimoijk (39)

@MrEconomical lol, this is so cool, you did a great job!

EthanWalker3 (0)

@MrEconomical
It says failed to authenticate? What should I do?

MrEconomical (1080)

@EthanWalker3 repl auth is in beta and very buggy atm

PizzaRules668 (7)

How do I make a chat for my friends using google to log in not repl?

ThePuzzlerThree (4)

Do you have a chat moderator? Also if you can fork this and make it private for our thing we have to talk about. Sorry I'm so hard to get a hold of. :P

ThePuzzlerThree (4)

@ThePuzzlerThree have a good time for us to chat on the....chat about the logo design?

MrEconomical (1080)

@ThePuzzlerThree get discord and join the repl discord (in the bottom left) and then we'll take it from there

ThePuzzlerThree (4)

@MrEconomical i dont have a thing to get the app on and i can't get on it becuase my school blocks everything

ThePuzzlerThree (4)

@MrEconomical and my parents won't let me make my own account

ThePuzzlerThree (4)

@MrEconomical i told you, i cant get discord

MrEconomical (1080)

@ThePuzzlerThree I think there's a bug in repl mail, it's not sending the message one sec i can fix

P3tray (3)

@MrEconomical If you forget to logout of your previous session (and don't close the window), and try to access the page from another PC, there is no way to login and delete your last session. I have tried to visit /login again, but it will not delete the last session. I left myself logged in at work...

MrEconomical (1080)

@P3tray if you log in it automatically deletes your previous session
also click on your pfp in the upper left and press logout

Zexogon (323)

Dude this is really cool! hope i can make something this awsome at some point

jhman103751 (0)

I am a teacher of 5 computer science classes and am wondering if it is possible to make a private version of this that i could use with ll my students? also is there a transcript that is made with this in a console?

MrEconomical (1080)

@jhman103751 do you have discord to communicate easier? I would love to help

jhman103751 (0)

@MrEconomical I currently do not, but can communicate by email or phone? i can get discord today but it will not be until 6:30 EST

MrEconomical (1080)

@jhman103751 discord is preferred for instant messaging I will just wait I am in school now anyways

jhman103751 (0)

@MrEconomical ok wonderful, ill comment right around 6:30est

jhman103751 (0)

@jhman103751 I just made an account with discord, how do we connect? @MrEconomical

MrEconomical (1080)

@jhman103751 whats your discord tag tell me on repl chat

ocotton2019 (0)

dis chat is sick bro

TaylorLiang (315)

cool, I mde something like this, but with less css