💬 Open source glitch chat

[tiagorangel2011]

Hello world!
I have built with @code-alt, @martin and @wh0 (we’re a team ) 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, we don’t get your private information
• Has tracking, to disable it use /config debug_mode=true
• We have secured everything and now it is not possible to inject CSS/HTML/JS (v. 3.9.0)
• Allows 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 disappears.
• Moderators, learn more: Moderators | Open Source Glitch Chat Plataform
• Ability to change the codeMirror options in the chat
• Alerts if you are using an old version
• Plus much more!
  (keep updated)

---

It’s very simple. First, go to the opengc.glitch.me.
Then, drag the big yellow button into your bookmarks bar.

To open the chat, on the Glitch editor, click the link you have dragged into your bookmarks bar.

Not understanding? Check this video:

Glitch Chat Promotional Video

---

@tiagorangel2011 → Testing, a lot of contributed code
@code-alt → a lot of contributions, too
@wh0 → Original scripts, moderator
@martin → Testing, moderator, project editor
@nobody → moderator
@community (including you) → Thanks for all the support related with this project!

---

Screenshoots

Show screenshots

---

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

(if you selected “i wanna help”, please comment your username on the comments and I will DM you)

Comment anything below if you have a more detailed opinion!
Thanks,
Tiago

[code-alt]

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

[code-alt]

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

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.

[nobody]

im stuck on how to open it lol

[code-alt]

I was working on it lol, try again now

[nobody]

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.

[code-alt]

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

[nobody]

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

[Martin]

Fonts don’t show for me

[code-alt]

Can you send a screenshot? It works for me.

[nobody]

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?

[Martin]

@code-alt

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

[code-alt]

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

[code-alt]

Fonts should be fixed now.

[Martin]

OK

[hman124]

this is awesome! Nice work.

[tiagorangel2011]

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

[Martin]

Okay give me credit for it!

[jenn]

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.

[wh0]

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?