Skip to content

Instantly share code, notes, and snippets.

@benjamingr
Last active February 11, 2025 18:40
Show Gist options
  • Select an option

  • Save benjamingr/7437587 to your computer and use it in GitHub Desktop.

Select an option

Save benjamingr/7437587 to your computer and use it in GitHub Desktop.
Chat room.

So, we figured creating our own chatroom could be fun.

It's something we can all work together on.

We don't plan on moving there but the project itself could be interesting for the whole room to collaborate work on.

What we need to discuss now:

  • What technologies we want to use (Node/Express seems natural for serverside. What about clientside?)
  • What features to we want? Do we just want to start with a clone of the SO chat?

Requirements

  • Adding features should be easy
  • Responsive and fast
  • Works on IE10+, Chrome, Safari, Firefox, Opera
  • Mobile interface that actually works

Current stack proposal

  • AngularJS as clientside MVW, libraries (like jQuery) accepted gladly on a need to basis.
  • NodeJS/ExpressJS/SQL for server side.
@benjamingr

Copy link
Copy Markdown
Author

Actually, this is about fun. We can ditch jQuery if it makes us feel better about ourselves. Angular comes with jqLite anyway.

We can do lots of prollyfilling too.

@rlemon

rlemon commented Nov 12, 2013

Copy link
Copy Markdown

yup. if this is meant to be an exercise and something fun and challenging why not shoot for the "as few third party dependencies as possible" stars. I would love to see this done with no or a minimal css framework (purecss.io is nice) and no or minimal DOM abstractions. It would be nice to have an // authored by: <username> under each script that was actually authored by a room owner / regular

@maniator

Copy link
Copy Markdown

@benjamingr Who is starting this empty repo to start with @rlemon ?

@FirstWhack

Copy link
Copy Markdown

It goes without saying that there should be absolutely no jQuery.

Aside from that, we should write it in brainfuck.

@allquixotic

Copy link
Copy Markdown

https.

@ralt

ralt commented Nov 12, 2013

Copy link
Copy Markdown

I don't think we should go with a framework server side, the REST API should be quite small.

Postgresql of course, it's a no brainer for the transcript. Maybe a redis frontend for pub/sub would be nice, but I think I'm over engineering.

Client side I'd go with angular + bootstrap because I'm lazy and it does what we need it to do.

On the architecture side, going full events is probably the best way since it will allow us to easily plugin new features. And it's familiar to everyone. Events should propagate objects that are modifiable, and promises with bluebird will be used whenever necessary to avoid callback hell.

Welcome.

@SomeKittens

Copy link
Copy Markdown

There's a SOJSChat organization on GitHub, this should be put under that.

One of us should be PM of the whole thing. I've seen too many community efforts fail for lack of a central organizer.

@JimmyHoffa

Copy link
Copy Markdown

I hear cats are natural organizers. The internet probably has something to say about that. Are you volunteering?

@SomeKittens

Copy link
Copy Markdown

@JimmyHoffa We're very good at what we do.

I can PM, but that means I wouldn't be able to write much code, time-wise. Pretty busy right now.

@maniator

Copy link
Copy Markdown

The following URL now forwards to this gist:

http://new.javascriptroom.com

@monners

monners commented Nov 13, 2013

Copy link
Copy Markdown

+1 Angular
+1 MongoDB (or CouchDB)

@loktar00

Copy link
Copy Markdown

+1 no jQuery
+1 Mongo or Couch
+1 Angular.

Private Messaging is a major feature I would love to see.

ghost commented Nov 13, 2013

Copy link
Copy Markdown

+1 for no client-side MV*, no jQuery, no Mongo, no Redis, no Node, no JavaScript.

… um.

@shea-sollars

Copy link
Copy Markdown

I am willing to contribute www.lobby.ws to the cause. I don't care for the ws tld, but I am fond of this name for a chat room service.

@darkyen

darkyen commented Nov 13, 2013

Copy link
Copy Markdown

i have chats.ws iirc . lemme check though xD

@darkyen

darkyen commented Nov 13, 2013

Copy link
Copy Markdown

Taking florian's suggestions and Benji's recommendations and our choice of UI I designed something last night here is the first screenshot of it. http://i.stack.imgur.com/ivetb.png

Added to that i suggest a mute and a Warn feature

a warn displays a dialog on the targetted screen telling him to something in bold ( this feature will be owner only )

a mute just mutes the user in that chatroom for x amount of time if x = -1 , thats a forever mute

@benjamingr

Copy link
Copy Markdown
Author

Nice, this looks good.

@honnza

honnza commented Nov 13, 2013

Copy link
Copy Markdown

As for no-jQuery, I say: +1. Also, f* IE8. I want Opera Mobile support, though.

As for writing the core: not sure I'm the best to design an architecture. I have that on my resume, but I don't want to do that singlehanded.

@ralt

ralt commented Nov 13, 2013

Copy link
Copy Markdown

Honestly mongo is a no-go for me. It doesn't do anything better than postgres. Transcript is not something that will change its structure, so going noSQL isn't really useful.

@GNi33

GNi33 commented Nov 13, 2013

Copy link
Copy Markdown

nice :)

most of the important stuff has already been said, from my side:
+1 for Angular and basically the setup Ivo Wetzel suggested.

I don't care too much about using or not using jQuery, with the given browser-list that should be supported we won't really need it.

Features:
private messaging, multiple rooms and nice code-highlighting when posting code-snipplets would be great

@maniator

Copy link
Copy Markdown

Cannot forget about onebox support.

@phenomnomnominal

Copy link
Copy Markdown

If we're really doing this, why not add WebRTC support? Make it more like a hangout?

ghost commented Nov 13, 2013

Copy link
Copy Markdown

It’s definitely a good idea to show off as much JavaScript as possible, so I’m all for that! I don’t think it’ll see much regular use, though.

@shea-sollars

Copy link
Copy Markdown

Several ideas...

  1. A user preference to stop autoplaying of GIF's, that will show the GIF as a static image with a play button over it.

  2. A library of audible emotes with a user preference of whether or not to auto play the emotes or not, because sound clips can be funny at the right moments, but also annoying at the wrong moments.

  3. Third is more of a principle:

I think what would really add a lot of quality to a chat service, is to have subtle user preferences for anything UI related. This may include things like:

  • disabling oneboxing by the site
  • themes
  • choosing a markdown flavor
  • whether or not messages are prepended or appended to the message list
  • if user list goes on the left or the right
  • other layout related things like that

The principle is this; User preference all the things!
The obvious problem is finding a way to pull these things off without bloating the UI.

Which is why we would need to consider this early in the development.

@traviswimer

Copy link
Copy Markdown

Considering the "We don't plan on moving there" part, maybe it should be built on top of the SO chat. Then anyone could use all the new chat features/UI without needing to leave the SO chat.

I have no clue how doable that is with the SO API though.

Or maybe that's already the plan?

@connor1995JS

Copy link
Copy Markdown

This is what I recommend

Server:
Mongo (possibly Mongoose)
Express
Socket.io
Client:
Javascript
socket.io
reset.css

@Retsam

Retsam commented Nov 15, 2013

Copy link
Copy Markdown

Well, it looks like I'm majorly outvoted, but I happen to like knockout as an alternative to angular.

Firebase also looks like an interesting option, though I admit I haven't actually used it.

@darkyen

darkyen commented Nov 15, 2013

Copy link
Copy Markdown

put all this on s3 + heroku ... infinite scalability :D

@darkyen

darkyen commented Nov 15, 2013

Copy link
Copy Markdown

@shea i once wrote a lib to convert a gif to a sprite sheet ( in C ) I think i should do that :P ... making the gif pausable and playable with canvas or css3 powered animations !

@maniator

Copy link
Copy Markdown

@benjamingr any updates? ;-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment