Skip to content

Commit d315c8f

Browse files
committed
Merge branch 'development' into master
2 parents 1ae8d45 + 8a8427a commit d315c8f

File tree

15 files changed

+1213
-57
lines changed

15 files changed

+1213
-57
lines changed

.env.example

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ THEME="light"
22
CLOCK_DISPLAY="12"
33
LISTEN_SEND_KEYS=true
44
LOCALE="en"
5-
SOCKET_SERVER="http://127.0.0.1:3001"
5+
SOCKET_SERVER="http://< machine network ip >:3000"
66
MOCK_SOCKET=false

.gitignore

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
*.log
2+
13
# dependencies directory
24
node_modules/
35

@@ -10,3 +12,19 @@ dist/
1012
.env.development
1113
.env.production
1214

15+
#-----------
16+
# Windows
17+
18+
**/.db
19+
20+
#-----------
21+
# Mac OS X
22+
23+
**/.DS_Store
24+
25+
# Thumbnails
26+
**/._*
27+
28+
# Files that might appear on external disk
29+
**/.Spotlight-V100
30+
**/.Trashes

README.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# react-socket-simple-chat
1+
# React Socket Simple Chat
22

33
A simple chat application that uses react.js, redux and socket.io.
44

@@ -9,18 +9,28 @@ A simple chat application that uses react.js, redux and socket.io.
99

1010
- [x] finish the redux code to manage the application data/states
1111

12-
- [ ] socket.io
12+
- [x] socket.io
1313

1414
- [x] socket.io-client mock
1515

16-
- [ ] connect to the socket.io server to handle the messages
16+
- [x] connect to the socket.io server to handle the messages
17+
18+
- [x] build a local socket.io server
19+
20+
- [x] connect to the local socket.io server
21+
22+
- [x] deploy socket.io server to a now.sh instance
23+
24+
- [x] connect to the remote socket.io server
1725

1826
- [x] use the settings theme state to switch between the themes
1927

2028
- [x] add local storage support to persist the changes on the settings page
2129

2230
- [x] add i18n (internationalization) support
2331

32+
- [ ] add the unreaded messages to the chat tab when user is on the settings tab
33+
2434
- [ ] write down the documentation under the `docs/` directory
2535

2636

package.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
{
22
"name": "react-socket-simple-chat",
3-
"version": "0.4.0",
3+
"version": "0.5.0",
44
"description": "a simple chat application that uses react.js, redux and socket.io",
55
"scripts": {
6-
"start": "webpack-dev-server --mode development --open --hot",
6+
"socket-server": "nodemon server/index.js",
7+
"development": "webpack-dev-server --mode development --open --hot",
8+
"start": "npm-run-all -p socket-server development",
79
"build": "webpack --mode production",
810
"deploy": "gh-pages -d dist",
911
"do-deploy": "npm-run-all -s build deploy",
@@ -36,6 +38,7 @@
3638
"react-router-dom": "^4.2.2",
3739
"redux": "^4.0.0",
3840
"redux-thunk": "^2.2.0",
41+
"socket.io-client": "^2.1.1",
3942
"uuid": "^3.2.1"
4043
},
4144
"devDependencies": {
@@ -55,6 +58,7 @@
5558
"ip": "^1.1.5",
5659
"mini-css-extract-plugin": "^0.4.0",
5760
"node-sass": "^4.9.0",
61+
"nodemon": "^1.17.5",
5862
"npm-run-all": "^4.1.3",
5963
"optimize-css-assets-webpack-plugin": "^4.0.1",
6064
"postcss-flexbugs-fixes": "^3.3.1",
@@ -67,5 +71,8 @@
6771
"webpack": "^4.4.0",
6872
"webpack-cli": "^2.0.13",
6973
"webpack-dev-server": "^3.1.1"
74+
},
75+
"nodemonConfig": {
76+
"watch": ["server"]
7077
}
7178
}

server/README.md

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# React Socket Simple Chat - Socket.io Server
2+
3+
Simple socket.io server to handle the chat messages
4+
5+
* to run the socket.io server: `yarn start` or `npm start`
6+
7+
* the socket.io listen and emits the event `message` with the object model: `{ message: 'Hello socket.io server', user: 'username' }`
8+
9+
10+
## tip to make socket.io server accepts multiple devices connections
11+
12+
* start the server using the network ip address
13+
14+
* add a CORS ( Cross-Origin Resource Sharing ) support ( [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) )
15+
16+
```javascript
17+
app.use( ( req, res, next ) => {
18+
res.header('Access-Control-Allow-Origin', '*');
19+
res.header('Access-Control-Allow-Headers', 'X-Requested-With');
20+
res.header('Access-Control-Allow-Headers', 'Content-Type');
21+
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
22+
next();
23+
});
24+
25+
app.options( ( req, res ) => {
26+
res.header('Access-Control-Allow-Origin', '*');
27+
res.header('Access-Control-Allow-Headers', 'X-Requested-With');
28+
res.header('Access-Control-Allow-Headers', 'Content-Type');
29+
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
30+
res.send(200);
31+
});
32+
```
33+
34+
35+
## Server deployment on now.sh
36+
37+
Deployed on `now.sh` ([zeit.co/now](https://zeit.co/now))
38+
39+
40+
### Requirement
41+
42+
Must have the `start` script defined on the `package.json`
43+
44+
45+
### Commands
46+
47+
* [Getting start with Environment Variables | now docs](https://zeit.co/docs/getting-started/environment-variables)
48+
49+
* [Environment Variables and Secrets | now docs](https://zeit.co/docs/features/env-and-secrets)
50+
51+
* [Now's Command Line Interface | now docs](https://zeit.co/docs/features/now-cli)
52+
53+
* `now` ([Deployment | now docs](https://zeit.co/docs/getting-started/deployment)) - deploy the current folder content to the `now.sh` server.
54+
55+
* `now alias <ID> <ALIAS>` ([Aliases and Domains | now docs](https://zeit.co/docs/features/aliases)) - define a custom URL
56+
57+
* `now alias rm <ALIAS>` - remove a given alias
58+
59+
* `now scale <ID> sfo 1 1` ([Global Scaling | now docs](https://zeit.co/docs/features/scaling)) - make sure to have only one instance of deployment
60+
61+
* `now remove <ID>` - ([Deployment Inactivity | now docs](https://zeit.co/docs/deployment-types/node#deployment-inactivity)) remove the given instance by its <ID>
62+
63+
64+
### Deployment steps
65+
66+
1 - `now -e MODE=production` - This commmand will give to you the `<ID>` of the deployed instance.
67+
68+
2 - `now alias <ID> <ALIAS>`
69+
70+
3 - `now scale <ID> sfo 1 1`
71+
72+
73+
### Re-deployment steps
74+
75+
1 - `now list` - copy the `<OLD_ID>` assigned to the alias `<ALIAS>`
76+
77+
2 - `now -e MODE=production` - will deploy a new instance of the current folder content. This commmand will give to you the `<NEW_ID>` of the deployed instance.
78+
79+
3 - `now alias <NEW_ID> <ALIAS>`
80+
81+
4 - `now remove <OLD_ID>`
82+
83+
84+
## Links
85+
86+
* [Socket.io](https://socket.io/)
87+
88+
* [[GitHub] socketio / socket.io](https://github.com/socketio/socket.io) - Realtime application framework (Node.JS server)
89+
90+
* [examples / chat](https://github.com/socketio/socket.io/tree/master/examples/chat)
91+
92+
* [Socket.IO Tutorial With io.js and Express | Program With Erik](http://www.programwitherik.com/socket-io-tutorial-with-node-js-and-express/)
93+
94+
### Dependencies
95+
96+
* [[GitHub] indutny / node-ip](https://github.com/indutny/node-ip) - IP address tools for node.js
97+
98+
* [[GitHub] expressjs / express](https://github.com/expressjs/express)
99+
100+
* [http | Node.js Docs](https://nodejs.org/api/http.html)
101+
102+
* [[GitHub] socketio / socket.io](https://github.com/socketio/socket.io)

server/index.js

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
const express = require('express');
2+
const app = express();
3+
const http = require('http').createServer(app);
4+
const io = require('socket.io')(http);
5+
const ip = require('ip');
6+
7+
//----------------------------------------------------------------------------//
8+
9+
const MODE_PRODUCTION = ( process.env.MODE === 'production' );
10+
11+
//----------------------------------------------------------------------------//
12+
13+
let ipAddress = 'localhost'; // will works only to the local host
14+
try {
15+
// will enable to the server to be accessed from the network
16+
ipAddress = ip.address();
17+
} catch( err ){
18+
console.err( err );
19+
}
20+
21+
const SERVER_PORT = 3000;
22+
23+
//----------------------------------------------------------------------------//
24+
// CORS configs - allows access from the other machines beyond the localhost
25+
26+
app.use( ( req, res, next ) => {
27+
res.header('Access-Control-Allow-Origin', '*');
28+
res.header('Access-Control-Allow-Headers', 'X-Requested-With');
29+
res.header('Access-Control-Allow-Headers', 'Content-Type');
30+
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
31+
next();
32+
});
33+
34+
app.options( ( req, res ) => {
35+
res.header('Access-Control-Allow-Origin', '*');
36+
res.header('Access-Control-Allow-Headers', 'X-Requested-With');
37+
res.header('Access-Control-Allow-Headers', 'Content-Type');
38+
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
39+
res.send(200);
40+
});
41+
42+
//----------------------------------------------------------------------------//
43+
44+
app.use( express.static( `${__dirname}/public` ) );
45+
46+
app.get( '/', ( req, res ) => {
47+
res.sendFile( `${__dirname}/public/index.html` );
48+
});
49+
50+
//----------------------------------------------------------------------------//
51+
// Socket IO
52+
53+
const IO_EVENT_CONNECTION = 'connection';
54+
const IO_EVENT_MESSAGE = 'message';
55+
const IO_EVENT_DISCONNECT = 'disconnect';
56+
57+
let connectionsCounter = 1;
58+
59+
const logConnections = () => {
60+
if( !MODE_PRODUCTION ) {
61+
console.log( `Socket IO connections: ${connectionsCounter}` );
62+
}
63+
};
64+
65+
const logMessage = message => {
66+
if( !MODE_PRODUCTION ) {
67+
console.log(
68+
'Socket IO server received the message: ',
69+
JSON.stringify( message )
70+
);
71+
}
72+
};
73+
74+
io.on( IO_EVENT_CONNECTION, socket => {
75+
logConnections();
76+
connectionsCounter++;
77+
78+
socket.on( IO_EVENT_MESSAGE, message => {
79+
logMessage( message );
80+
81+
// return the message to the sender
82+
socket.emit( IO_EVENT_MESSAGE, message );
83+
84+
// send the message to the others listeners
85+
socket.broadcast.emit( IO_EVENT_MESSAGE, message );
86+
});
87+
88+
socket.on( IO_EVENT_DISCONNECT, () => {
89+
connectionsCounter--;
90+
logConnections();
91+
})
92+
});
93+
94+
//----------------------------------------------------------------------------//
95+
// start the server
96+
97+
http.listen( SERVER_PORT, ipAddress, () => {
98+
let message = [
99+
'\n',
100+
`Socket IO server is running at ${ipAddress}:${SERVER_PORT}`,
101+
'\n\n'
102+
];
103+
104+
if( !MODE_PRODUCTION ) {
105+
message.push(
106+
'Please remember to update the .env file, and if needed restart your dev. environment.\n\n'
107+
);
108+
}
109+
110+
console.log( ...message )
111+
});

server/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "react-socket-simple-chat_socket-server",
3+
"version": "0.1.0",
4+
"description": "local socket.io server",
5+
"main": "index.js",
6+
"engines": {
7+
"node": ">=8"
8+
},
9+
"scripts": {
10+
"start": "node index"
11+
},
12+
"author": "Erko Bridee",
13+
"license": "MIT",
14+
"dependencies": {
15+
"express": "^4.16.3",
16+
"http": "^0.0.0",
17+
"ip": "^1.1.5",
18+
"socket.io": "^2.1.1"
19+
}
20+
}

server/public/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Socket.io server</title>
8+
</head>
9+
<body>
10+
<h3>React Socket Simple Chat</h3>
11+
<p>Socket.io server is running</p>
12+
<ul>
13+
<li><a href="https://github.com/erkobridee/react-socket-simple-chat" target="_blank">[GitHub] erkobridee / react-socket-simple-chat</a></li>
14+
<br />
15+
<li><a href="https://erkobridee.github.io/react-socket-simple-chat" target="_blank">React Socket Simple Chat - application</a></li>
16+
</ul>
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)