/paint-io-client

Paint app client for the websockets workshop.

Primary LanguageJavaScriptMIT LicenseMIT

paint-io-client

Paint app client for the websockets workshop.

Getting Started

Local

$ npm install
$ npm run watch

Apollo

bb watch

Workshop

* this github repository because its nice to do.

One team member should fork paint-io-client and the other should fork paint-io-server. Then clone each others repositories into your workspace directory (replace teammember with the correct user alias).

$ git clone https://github.com/teammember1/paint-io-client.git
$ git clone https://github.com/teammember2/paint-io-server.git

If you are working alone, you can just clone both paint-io-client and paint-io-server into the same workspace directory.

$ git clone https://github.com/goldhand/paint-io-client.git
$ git clone https://github.com/goldhand/paint-io-server.git

After running these, your workspace directory should look like:

.
./paint-io-client/
./paint-io-server/

or

.
./NodeJS-paint-io-client/
./NodeJS-paint-io-server/

If you used brazil to pull the packages down, add a remote url pointing to your's and your teammate's github remote so that you can collaborate using your teammates fork. Example adding a remote "teammemer1" pointing to my teammember's fork:

$ git remote add teammember1 https://github.com/teammember1/paint-io-client.git

Then you can pull your teammate's changes down:

$ git pull teammate1 mainline

Verify this by running:

$ git remote -v

And you should see something similar to:

origin	ssh://git.amazon.com/pkg/NodeJS-paint-io-server (fetch)
origin	ssh://git.amazon.com/pkg/NodeJS-paint-io-server (push)
teammate1	https://github.com/teammate1/paint-io-server (fetch)
teammate1	https://github.com/teammate1/paint-io-server (push)

Of course, replace "teammember1" with your teammate's github alias.

Install dependencies in each package (from within each package directory).

$ npm install

or

$ bb release

Run the server from within ./paint-io-server

$ npm run watch

or

$ bb watch

Inline instructions can be found in the src/app.js. Each task is marked by as TODO x.x [description]. You should not need to make any changes outside of the src/app.js file but look at the other components available in src/*. They are all classes that extend src/DOMElement.js.

Steps (with goals)

  1. Make the paint application collaborative using socket.io
  • Dispatch events to the Socket server
  • Receive events from the socket server
  1. Maintain a list of active users
  • Sync data across multiple clients
  • Use an acknowledgement in the emit call
  1. Open private chat with a single user
  • Send messages to single target

Optional

  • Demonstrate usefulness of client / server node architecture with flow type
  • Creating chat rooms
  • Scaling horizontally
  • At amazon