💬 Open source glitch chat

The Gallery
, , , ,
#1

Glitch chat banner
Glitch chat banner1758×612 14.3 KB

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

How to use this?
How to use this?1758×612 108 KB

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:

Credits!!!
Credits!!!1758×612 47.1 KB

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

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

Markdown
Markdown562×722 15.3 KB

Moderator feature
Moderator feature567×722 21.5 KB

Give us your opinion!
Give us your opinion!1758×612 49.3 KB

Check post #149

Why use this?
Why use this?1758×612 67.3 KB

1. It's secure
1. It's secure1758×850 150 KB

2. It has plenty of features
2. It has plenty of features1758×424 68.9 KB

3. Just look at the list of features above
3. Just look at the list of features above1758×424 95.9 KB

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

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

Liked this? Give a love or reply to this thread. Thank you!
Liked this? Give a love or reply to this thread. Thank you!1758×178 8.97 KB

11 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

1 Like
#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:

1 Like
#4

im stuck on how to open it lol

1 Like
#5

I was working on it lol, try again now

1 Like
#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.

1 Like
#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)()
2 Likes
#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:

2 Likes
#9

Fonts don’t show for me :frowning:

2 Likes
#10

Can you send a screenshot? It works for me.

3 Likes
#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?

1 Like
#12

image
image891×778 38.8 KB

1 Like
#13

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

2 Likes
#14

Fonts should be fixed now.

2 Likes
#15

OK

2 Likes
#16

this is awesome! Nice work.

2 Likes
#17

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

1 Like
#18

Okay give me credit for it!

2 Likes
#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.

7 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?

3 Likes