πŸ’¬ Open source glitch chat

Hello world! 🌍
I have built (with @code-alt, @martin, @wh0, and other persons) a full chat platform for Glitch. It has many many features, check everything at our docs

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 our video:


We could only build this with the help of the community. Here are some people that helped:

@tiagorangel2011 β†’ Testing, a lot of contributed code
@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!


πŸ–ΌοΈ Screenshoots

Show me


Check post #149



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

PS: Thanks @wh0 for the original project: Chat in the editor

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

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