[ARCHIVED] 💬 Open source glitch chat

Hi there! Me and @code-alt, @martin, @wh0, and other people have built a fully working chat platform for the Glitch editor, using the built-in “OT protocol”. It has tons of features and is based on wh0’s original chat script.

How to use

First, go to the opengc.glitch.me. Then, drag the big yellow button into your bookmarks bar. To open the chat, open the editor on the project you want to chat on and click the link that you just dragged.

If you don’t see the bookmarks bar, press ctrl shift b


Credits

@_tr → me lol
@code-alt → a lot of contributions, too
@wh0 → Original scripts, moderator, other scripts
@martin → Testing, moderator, project editor
@nobody → moderator, testing
@lajbel → one of the games
@community (including you) → Thanks for all the support related to this project!


Screenshots

Show


Please add a comment below if you have any feedback! :slight_smile:

12 Likes

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

image

1 Like

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. :frowning:

1 Like

im stuck on how to open it lol

1 Like

I was working on it lol, try again now

1 Like

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.

1 Like

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

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:

2 Likes

Fonts don’t show for me :frowning:

2 Likes

Can you send a screenshot? It works for me.

3 Likes

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?

1 Like

1 Like

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

2 Likes

Fonts should be fixed now.

2 Likes

OK

2 Likes

this is awesome! Nice work.

2 Likes

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

1 Like

Okay give me credit for it!

2 Likes

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

7 Likes

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?

3 Likes