Chat in the editor

[wh0]

Unofficial, of course

Project URL: Glitch :･ﾟ✧

There’s nothing special about this project. Rather, it’s a script that you can run in the dev console.

People asked about having chat in the editor. It seems like Glitch already has some of the facilities needed to support it. And here’s the bare minimum–no, far less than the bare minimum–built upon that.

What’s the backend

In Glitch’s collaboration system, there’s a service called “OT” that collects changes from all the users currently editing the project, resolves conflicts among them, and disseminates changes. But in addition to that, it also allows clients to “broadcast” data to each other, which Glitch uses to send out what file/position each user is on, as well as the container CPU/RAM/disk usage stats.

This OT service runs in the project container, and Glitch’s API server forwards websocket connections to it. From my reading of the software behind it, the “broadcast” functionality is fully transparent. Meanwhile, the editor seems to have routines that can pick out which kinds of broadcast messages pertain to which widgets, so that the editor can ignore unrelated messages.

The hypothesis in this project is that we can send a new kind of “broadcast” message containing chat that the rest of Glitch will ignore. We send messages like this:

{
  type: 'x-chat',
  message: 'hi',
}

What’s the frontend

I drafted up a little panel with a message display and a text input at the bottom. Glitch’s own frontend is built in react and JSX, but like, I don’t know of a way to link new react code with Glitch’s minified stuff, so instead of that, I used some vanilla JS.

But as as result, it’s not hooked in to any of the editor’s state machines, so you should assume that everything will break if you switch projects or something.

Access control and authenticity

Guests are allowed. Non-project members, including anonymous accounts (you get an anonymous account if you use Glitch not signed in), can broadcast.

Unfortunately for our use case, the system doesn’t provide any metadata about what user sent each message. There’s no telling who sent what.

Actually I wonder if this is true of the user position and container stats too

Message history

Eh nah.

Moderation

No lifeguard on duty.

But you can block everyone and delete all messages by pressing F5.

---

addendum: text input is all messed up in dark mode

[code-alt]

Wow! This is so incredible, I created a plugin for this (credit to @tiagorangel2011, he helped with testing and contributed a lot of code. Also, I came back to glitch!)

All you have to do is install this bookmarklet, activate it on any project and you can chat.

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

A few features:

• 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.
• More features coming soon.

[Martin]

This is a really cool and neat idea!

If you have the tampermonkey extension you can set it so it automatically loads the chat…
Copy and paste the code below into tampermonkey:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://glitch.com/edit/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=glitch.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
javascript:(function(){function callback(){console.log("x")}var s=document.createElement("script");s.src="https://uncovered-functional-lemonade.glitch.me/script.js";if(s.addEventListener){s.addEventListener("load",callback,false)}else if(s.readyState){s.onreadystatechange=callback}document.body.appendChild(s);})()

    // Your code here...
})();

[tiagorangel2011]

@Martin

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://glitch.com/edit/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=glitch.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
javascript:(function(){function callback(){console.log("x")}var s=document.createElement("script");s.src="https://uncovered-functional-lemonade.glitch.me/script.js";if(s.addEventListener){s.addEventListener("load",callback,false)}else if(s.readyState){s.onreadystatechange=callback}document.body.appendChild(s);})()

    // Your code here...
})();

Great idea, I will add that to the new one (https://support.glitch.com/t/the-new-glitch-chat/53428?u=tiagorangel2011)

[khalby786]

Can I just take a moment to shout-out @wh0 who creates the most underrated projects involving the secret dark magic that runs behind the scenes of Glitch, making it easier for the small portion of users looking to extend the Glitch ecosystem with user scripts, CLI tools and other external plugins!

[jenn]

an absolute legend!