raineroviir / react-redux-socketio-chat

Full Stack Chat Application

React-redux-socketio-chat

To see the live version of the app go to http://slackclone.herokuapp.com

Use Guide

Korean translation

First off, clone the repository and then cd react-redux-socketio-chatand npm install

You can create channels with the + sign on the nav bar on the left. If you click on a user's name to send him a private message (opens a private channel)

Setting up MongoDB

Note: You need MongoDB set up and running to run the code locally. Installation instructions

Once you've installed MongoDB start up the MongoDB server in a new terminal with the following commands:

mkdir db
mongod --dbpath=./db --smallfiles

Then open a new terminal and type in mongo and type in use chat_dev This is your database interface. You can query the database for records for example: db.users.find() or db.stats(). If you want to remove all channels for example you can type db.channels.remove({}).

Now that you've done all that, you can go go ahead and code away!

Development

npm run dev

And then point your browser to localhost:3000

Note: This program comes with redux-dev tools

• To SHOW or HIDE the dev tool panel press ctrl+h
• To change position press ctrl+m

Production

npm run build
npm start

And then point your browser to localhost:3000

Helpful Resources and Inspiring Projects

• Erikras' universal redux example: https://github.com/erikras/react-redux-universal-hot-example
• The facebook react flux-chat example: https://github.com/facebook/flux/tree/master/examples/flux-chat
• The awesome community of reactiflux https://discordapp.com/channels/102860784329052160/102860784329052160

Todos

• Implement virtual scrolling for the chat and channel modal, so that the dom elements load faster!
• Figure out a way to make the initial load quicker, loading only above the fold content? pagination? or some other idea

react-redux-socketio-chat's Issues

how to integrate firebase as a backend

hi,
for the realtime backend, i want to use a commercial service like Firebase/Pusher/Pubnub and not my own server.

Can I integrate this in the chat so that it uses these instead of the inbuilt server ?

MEAN stack

npm run dev & npm run build problem

I suffer some problems, when I step in $npm run dev or $npm run build,
the console reply the below log:

$npm run dev

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info predev [email protected]
6 info dev [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec dev script
9 verbose stack Error: [email protected] dev: NODE_ENV=development node devServer
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:214:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at EventEmitter.emit (events.js:172:7)
9 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:817:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd D:\Git\repositories\react-redux-socketio-chat-master
12 error Windows_NT 10.0.10240
13 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev"
14 error node v4.1.0
15 error npm v2.14.3
16 error code ELIFECYCLE
17 error [email protected] dev: NODE_ENV=development node devServer
17 error Exit status 1
18 error Failed at the [email protected] dev script 'NODE_ENV=development node devServer'.
18 error This is most likely a problem with the React-redux-socketio-chat package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error NODE_ENV=development node devServer
18 error You can get their info via:
18 error npm owner ls React-redux-socketio-chat
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

$npm run build

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info prebuild [email protected]
6 info build [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec build script
9 verbose stack Error: [email protected] build: npm run clean && npm run build:webpack
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:214:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at EventEmitter.emit (events.js:172:7)
9 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:817:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd D:\Git\repositories\react-redux-socketio-chat-master
12 error Windows_NT 10.0.10240
13 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
14 error node v4.1.0
15 error npm v2.14.3
16 error code ELIFECYCLE
17 error [email protected] build: npm run clean && npm run build:webpack
17 error Exit status 1
18 error Failed at the [email protected] build script 'npm run clean && npm run build:webpack'.
18 error This is most likely a problem with the React-redux-socketio-chat package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error npm run clean && npm run build:webpack
18 error You can get their info via:
18 error npm owner ls React-redux-socketio-chat
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Could you please give me some suggestion?
Thank you very much.

?EIO=3&transport=polling&t=LyoXncl 404 error

The app is working fine, however when I inspect the app on the console the following post is continuously 'POST' with every other res.status 404. First 200, then 404 continuously. The app works fine with no other issues. The only thing I modified was the localhost port from 3000 to 3003 since I have another app on that port.

request URL:
http://localhost:3003/api/chat/?EIO=3&transport=polling&t=Lyoa83r

Thank you in advance for your time :)

run build production fails

I replace with my own key, but npm run dev works; build not working build: 'NODE_ENV=production webpack... exit status 1

Error during production? TypeError: (0 , _history.createLocation) is not a function

History not in package.json

I ran npm install, followed all the directions, and then tried to run

npm run dev

However, I received an error in my console saying "cannot find module 'history'".
I looked in my node_modules directory and similarly, could not find history.
I then ran "npm install history" and everything worked fine after that.
I looked in package.json and noticed that history is indeed not one of the required dependencies.
I don't know how it might have been overlooked, but I do think it should be there.

Facebook login state missing

Hi , first of all good job , nice clean work !

Can you please tell me if you tested the facebook login feature?

I tried to login via facebook and after facebook login callback is called , the state doesn't change .

i digged a bit the question and found out that on the server side a couple of lines were missing.

React-cookie form what i could read uses the cookie parser middleware of express which is not even installed

then you have to call reactCookie.plugToRequest(req, res); to attach cookies to the requests and responses

do you think that this is the best thing to do in this case? or should i wire it up directly to global variable used in index.html

Thanks

Issue while deploying to heroku.

My mongodb setup in server.prod.js is
process.env.MONGODB_URI = process.env.MONGODB_URI || 'mongodb://username:[email protected]:11771/databasename'; and mongodb couldn't still connect.
Any tips for heroku deployment?

Question: how are sockets protected?

I can't figure out from the code how the user's WebSocket is authenticated. I don't see any authentication checks during the socket connection

Am I missing something?

How to navigate to default Channel

I play around this application, create a new channel, then I found I am not able to back Lobby channel because it's not in the channels list; So in the reducers\activeChannel.js I added a console.log (state), then founded that Lobby channel has id of 0, others has a long string which means from MongoDB, of course I can just create a channel called "Lobby", I can navigate to default channel, but feeling not the right way; I wish Lobby channel is default in Channels list.

Why do you send the same message twice?

You use socket to send the message and use http(post) to send it again. I think socket is enough.

Installation

I've just installed and I'm having a problem running; Can you suggest anything that I may not have done?

Anthonys-MacBook-Pro:react-redux-socketio-chat tony$ npm run dev

[email protected] dev /Users/tony/react-redux-socketio-chat
node src/server/server

module.js:338
throw err;
^
Error: Cannot find module 'history'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (server.dev.js:14:1)
at Module._compile (module.js:460:26)
at loader (/Users/tony/react-redux-socketio-chat/node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/tony/react-redux-socketio-chat/src/server/server.js:5:3)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)

npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v0.12.9
npm ERR! npm v2.14.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: node src/server/server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'node src/server/server'.
npm ERR! This is most likely a problem with the React-redux-socketio-chat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node src/server/server
npm ERR! You can get their info via:
npm ERR! npm owner ls React-redux-socketio-chat
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/tony/react-redux-socketio-chat/npm-debug.log

Question: In UserAPIUtils, why is Promise.reject used sometimes and just reject others?

This is more of a question for my understanding rather than an error.
As seen in the UserAPIUtils.js file, Promise.reject is used as follows:

export function loadAuth() {
  return new Promise((resolve, reject) => {
    superagent
    .get('/api/load_auth_into_state')
    .end((err, res) => {
      if (err) {
        Promise.reject(err);
      } else {
        resolve(res.body);
      }
    });
  });
}

And other times not:

export function signOut() {
  return new Promise((resolve, reject) => {
    superagent
    .get('/api/signout')
    .end((err) => {
      if (err) {
        reject(err);
      } else {
        resolve(true);
      }
    });
  });
}

It does have different behaviours so I was wondering what the significance was?

Production ready

Is the application is production ready for android ? please guide ? can we integrate the firebase ? how ? how to send the queries to Linux server ?