💬 Open source glitch chat

The Gallery
, , ,
#1

glitch.chat()

Hello world! :earth_africa:
I have built with @code-alt a full chat platform for Glitch. It has many features, like:

  • Using emojis like :) or ;) will turn them into their real forms (it has a bunch of other emoji saved too)
  • You can close the pane using a handy button on the bottom toolbar if you need more room while coding.
  • Whenever someone sends you a message, it will send a little sound! If the pane is closed, a red sign will appear at the bottom toolbar telling you how many messages your group has sent you.
  • It doesn’t matter what theme you use, the chatbox will still work.
  • See who said what
  • You can see who just joined and disconnected.
  • 100% security: no tracking
  • Alows guest messages
  • Anyone can join with the bookmarklet
  • Even if you disconnect, the messages will be saved
  • Automated Bot
  • Various shortcuts
  • There’s a game (type /bot game)
  • Type /bot rickroll to get a rickroll link
  • There is no need to manually update the bookmarklet, every time the page loads it makes a request and automatically converts the code to a bookmarklet
  • The update page is automatic, too
  • Famous quotes
  • Roll a dice
  • Disconnect using the bot
  • User WHOIS (with 'Allo 'Allo easter egg)
  • Report user
  • Shortcut to open/close the panel
  • Full markdown support
  • Type file FILE:LINE to create a link to focus the file and line you indicated
  • OMG rickrolling, type /bot superrickroll (sets the editor background to rickroll. when you click the editor, it disapears.
  • Plus much more!
    (keep updated)

How to use this

It’s very simple. First, go to the opengc.glitch.me.
Then, drag the big black button into your bookmarks bar.
To open the chat, on the Glitch editor, click the link you have dragged into your bookmarks bar.
You can check everything step-by-step here:
023f31cb-7a71-458c-a9a8-9d8118249b3d.mkv - Google Drive

:people_hugging: Credits

@tiagorangel2011 → Testing, a lot of contributed code
@code-alt → Semi-main code
@wh0 → Original scripts
@martin → Testing

:framed_picture: Screenshoots

Using my account
Using my account1920×882 196 KB

Using an anonymous account
Using an anonymous account1917×882 151 KB

Someone disconnected
Someone disconnected1920×887 200 KB

Have I heard... XSS?
Have I heard... XSS?460×763 15.9 KB

How are you, mr markdown?
How are you, mr markdown?562×722 15.3 KB

:speech_balloon: Give your opinion!

  • :grinning: It’s awesome
  • :slightly_smiling_face: Maybe I will use it in future projects
  • :expressionless: You are just wasting your time
  • :person_tipping_hand: I wanna help you building this

0 voters

(if you selected “you are just wasting your time” or “i wanna help”, please comment your username plus why on the comments and, if applicable, I may DM you)

Comment anything below if you have a more detailed opinion!
Thanks,
Tiago
PS: I know, the original post is here.

6 Likes
Using Glitch for education — an experience report
Chat in the editor
#2

You can now chat as a guest without it showing up as null and it looks a bit like this:

image

#3

In addition, messages will now save even if you disconnect.

image
image396×676 40.1 KB

Messages will be saved to your localStorage, and are loaded using the project’s name.

However, changing the project’s name will have all the messages deleted though. :frowning:

#4

im stuck on how to open it lol

#5

I was working on it lol, try again now

#6

i was meaning, i dont even know how to open it. literally. would i put this in the console? im not really experienced with these things.

#7

Oh. Create a bookmark and put this code in it, and click on it in the Glitch Editor.

javascript:(function()%7Bfunction%20callback()%7Bconsole.log(%22x%22)%7Dvar%20s%3Ddocument.createElement(%22script%22)%3Bs.src%3D%22https%3A%2F%2Funcovered-functional-lemonade.glitch.me%2Fscript.js%22%3Bif(s.addEventListener)%7Bs.addEventListener(%22load%22%2Ccallback%2Cfalse)%7Delse%20if(s.readyState)%7Bs.onreadystatechange%3Dcallback%7Ddocument.body.appendChild(s)%3B%7D)()
1 Like
#8

ill try it tomorrow as i have to fiddle around with some of my settings in order for this to work. but it looks great! cant wait to see how it works :slight_smile:

1 Like
#9

Fonts don’t show for me :frowning:

#10

Can you send a screenshot? It works for me.

1 Like
#11

just tried it. and it looks amazing! i really like the concept of this. if its okay with you (and everyone else who worked on this), could i use the part of your code that saves and loads the messages?

#12

image
image891×778 38.8 KB

#13

Yeah, thanks! I made the save/load messages thing, and I have no problem with you using it.

1 Like
#14

Fonts should be fixed now.

1 Like
#15

OK

#16

this is awesome! Nice work.

#17

Ok, I will add this to features, @code-alt!

#18

Okay give me credit for it!

#19

Hi y’all! The collaboration on this through the long weekend and today was really cool to witness, so thanks for not only building it, but sharing the process and working with each other so well!

I am going to have to bear some potentially bad news here, though: this surfaced that we had recently, unintentionally introduced a content security policy change that could potentially be used for harm. A change for that has just been deployed to ensure the security of everyone in the editor, and unfortunately that may break this work.

At the very least, the team and I had a great discussion today about how we should start thinking about ways to make the editor a safe place for the community to build upon, like you all did with this chat app. All I can offer you now are stickers (@tiagorangel2011 @code-alt @wh0 @Martin - email your address to me directly jenn@glitch.com if you’re interested), but hopefully in the future we can offer an actual rad developer experience extending the editor and more.

4 Likes
#20

an excerpt of that csp

script-src
  'self'
  https://apis.google.com
  https://cdnjs.cloudflare.com
  https://cdn.segment.com
  https://*.woopra.com
  www.googletagmanager.com
  'sha256-aROmP5KBVON8dHdF7kTobxNwhI67hJuBpk+jNh/jbM4='
  'sha256-lIXJkTrfgeKmujhwsIkqzNbMkplZdPFm1ERXsf46uOw='
  'sha256-To0Iwo79L42agXa29pvaAn64gM4rwT1BflbRPGdqcUg='
  'sha256-IWN+DH0UXsSKPql06C66AvLM8/jMYbOe+wVRfPlzHDY='
  http://www.luckyorange.com https://ssl.luckyorange.com https://d10lpsik1i8c69.cloudfront.net
  https://unpkg.com/
  https://www.google.com
  https://www.gstatic.com
  https://cdn.amplitude.com;

it may be sufficient to upload to npm and serve through unpkg?