Skip to content

Instantly share code, notes, and snippets.

@benjamingr benjamingr/gist:7437587
Last active Dec 28, 2015

Embed
What would you like to do?
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.
@maniator

This comment has been minimized.

Copy link

maniator commented Nov 12, 2013

javascriptroom.com, javaschript.com, blogascript.com domains and subdomains

All owned by me

@SomeKittens

This comment has been minimized.

Copy link

SomeKittens commented Nov 12, 2013

As was mentioned, a lot of room members have made some version of a chat. Do we want to start from scratch or take over one of those projects?

I vote for Angular, since I've been angling to learn it next.

I think IRC clone + editing of messages would be a good V1

@BonsaiDen

This comment has been minimized.

Copy link

BonsaiDen commented Nov 12, 2013

As far as the frameworks are concerned I would argue that the Server would need:

  • Node.js
  • Express.js (Web Framework)
  • Passport.js (Authentication Middleware for Express)
  • Socket.io (For message transport)

and the Client:

  • jQuery (because)
  • Framework of choice (Angular/Ember/Meteor?)
  • Socket.io
  • I would argue to use jade and less instead of plain HTML and CSS
@ralt

This comment has been minimized.

Copy link

ralt commented Nov 12, 2013

A clone is maybe not the best idea, but here is a list of features I'd want:

  • oneboxing possible
  • private messages
  • editing recent messages and deleting
  • markdown

These are mostly the features I care about.

@BonsaiDen

This comment has been minimized.

Copy link

BonsaiDen commented Nov 12, 2013

@SomeKittens +1 for Angular just built a relatively huge App with it, building the a chat should be a piece of cake.

Also, we need a Database for messages a really stupid MySQL should be fine, for everything else I'd just use couch.

For both cases there are nice NPM modules available.

@benjamingr

This comment has been minimized.

Copy link
Owner Author

benjamingr commented Nov 12, 2013

Sure, +1 for Angular and jQuery from me too. Socket.io for communications, passport for auth. Node for serverside. PostgreSQL for db (why MySQL? Seems counter intuitive). FWIW I have no problem with Mongo for that either but no reason not to use SQL.

This could be a fun project for everyone.

@benjamingr

This comment has been minimized.

Copy link
Owner Author

benjamingr commented Nov 12, 2013

@ralt what did you have in mind?

@benjamingr

This comment has been minimized.

Copy link
Owner Author

benjamingr commented Nov 12, 2013

How do we feel about SailsJS?

@maniator

This comment has been minimized.

Copy link

maniator commented Nov 12, 2013

Would it be a SO chat clone?

A Bootstrap mess?

Or something new?

@rlemon

This comment has been minimized.

Copy link

rlemon commented Nov 12, 2013

as a point of interest. lets do this without jQuery. because. then we can be all like "Yo! we know Javascript! Look at dat source!"

@rlemon

This comment has been minimized.

Copy link

rlemon commented Nov 12, 2013

also I will toss in a +1 for Mongo. I've been meaning to do something that uses it.

@maniator

This comment has been minimized.

Copy link

maniator commented Nov 12, 2013

@rlemon Does that mean no library? Or just no library that includes jQuery?

@benjamingr

This comment has been minimized.

Copy link
Owner Author

benjamingr commented Nov 12, 2013

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

This comment has been minimized.

Copy link

rlemon commented Nov 12, 2013

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

This comment has been minimized.

Copy link

maniator commented Nov 12, 2013

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

@Jhawins

This comment has been minimized.

Copy link

Jhawins commented Nov 12, 2013

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

Aside from that, we should write it in brainfuck.

@allquixotic

This comment has been minimized.

Copy link

allquixotic commented Nov 12, 2013

https.

@ralt

This comment has been minimized.

Copy link

ralt commented Nov 12, 2013

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

This comment has been minimized.

Copy link

SomeKittens commented Nov 12, 2013

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

This comment has been minimized.

Copy link

JimmyHoffa commented Nov 12, 2013

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

@SomeKittens

This comment has been minimized.

Copy link

SomeKittens commented Nov 12, 2013

@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

This comment has been minimized.

Copy link

maniator commented Nov 12, 2013

The following URL now forwards to this gist:

http://new.javascriptroom.com

@monners

This comment has been minimized.

Copy link

monners commented Nov 13, 2013

+1 Angular
+1 MongoDB (or CouchDB)

@loktar00

This comment has been minimized.

Copy link

loktar00 commented Nov 13, 2013

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

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

@ghost

This comment has been minimized.

Copy link

ghost commented Nov 13, 2013

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

… um.

@shea-sollars

This comment has been minimized.

Copy link

shea-sollars commented Nov 13, 2013

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

This comment has been minimized.

Copy link

darkyen commented Nov 13, 2013

i have chats.ws iirc . lemme check though xD

@darkyen

This comment has been minimized.

Copy link

darkyen commented Nov 13, 2013

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

This comment has been minimized.

Copy link
Owner Author

benjamingr commented Nov 13, 2013

Nice, this looks good.

@honnza

This comment has been minimized.

Copy link

honnza commented Nov 13, 2013

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

This comment has been minimized.

Copy link

ralt commented Nov 13, 2013

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

This comment has been minimized.

Copy link

GNi33 commented Nov 13, 2013

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

This comment has been minimized.

Copy link

maniator commented Nov 13, 2013

Cannot forget about onebox support.

@phenomnomnominal

This comment has been minimized.

Copy link

phenomnomnominal commented Nov 13, 2013

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

@ghost

This comment has been minimized.

Copy link

ghost commented Nov 13, 2013

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

This comment has been minimized.

Copy link

shea-sollars commented Nov 13, 2013

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

This comment has been minimized.

Copy link

traviswimer commented Nov 14, 2013

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

This comment has been minimized.

Copy link

connor1995JS commented Nov 15, 2013

This is what I recommend

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

@Retsam

This comment has been minimized.

Copy link

Retsam commented Nov 15, 2013

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

This comment has been minimized.

Copy link

darkyen commented Nov 15, 2013

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

@darkyen

This comment has been minimized.

Copy link

darkyen commented Nov 15, 2013

@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 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.