From 8dd9f1bde1f5845fdcf497e069c813b25ae9be07 Mon Sep 17 00:00:00 2001 From: Kunal Nagar Date: Wed, 21 Dec 2016 17:51:24 +0530 Subject: [PATCH 1/6] initial commit for chat app --- redis-node-socket-chat/.editorconfig | 17 +++ redis-node-socket-chat/.gitignore | 1 + redis-node-socket-chat/README.md | 4 + redis-node-socket-chat/creds.json | 6 + redis-node-socket-chat/index.js | 132 +++++++++++++++++++++ redis-node-socket-chat/package.json | 18 +++ redis-node-socket-chat/public/css/main.css | 30 +++++ redis-node-socket-chat/public/js/main.js | 106 +++++++++++++++++ redis-node-socket-chat/views/index.html | 31 +++++ 9 files changed, 345 insertions(+) create mode 100644 redis-node-socket-chat/.editorconfig create mode 100644 redis-node-socket-chat/.gitignore create mode 100644 redis-node-socket-chat/README.md create mode 100644 redis-node-socket-chat/creds.json create mode 100644 redis-node-socket-chat/index.js create mode 100644 redis-node-socket-chat/package.json create mode 100644 redis-node-socket-chat/public/css/main.css create mode 100644 redis-node-socket-chat/public/js/main.js create mode 100644 redis-node-socket-chat/views/index.html diff --git a/redis-node-socket-chat/.editorconfig b/redis-node-socket-chat/.editorconfig new file mode 100644 index 0000000..18911a2 --- /dev/null +++ b/redis-node-socket-chat/.editorconfig @@ -0,0 +1,17 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + +[*] + +# Change these settings to your own preference +indent_style = space +indent_size = 4 +trim_trailing_whitespace = true +insert_final_newline = true + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 diff --git a/redis-node-socket-chat/.gitignore b/redis-node-socket-chat/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/redis-node-socket-chat/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/redis-node-socket-chat/README.md b/redis-node-socket-chat/README.md new file mode 100644 index 0000000..75ef8b8 --- /dev/null +++ b/redis-node-socket-chat/README.md @@ -0,0 +1,4 @@ +# Chat App with Redis + Node + Socket.io + +- Write Install instructions here +- Link to blog post diff --git a/redis-node-socket-chat/creds.json b/redis-node-socket-chat/creds.json new file mode 100644 index 0000000..94445ca --- /dev/null +++ b/redis-node-socket-chat/creds.json @@ -0,0 +1,6 @@ +{ + "user": "", + "password": "", + "host": "", + "port": 6379 +} diff --git a/redis-node-socket-chat/index.js b/redis-node-socket-chat/index.js new file mode 100644 index 0000000..1e46e44 --- /dev/null +++ b/redis-node-socket-chat/index.js @@ -0,0 +1,132 @@ +var express = require('express'); +var bodyParser = require('body-parser'); +var app = express(); +var http = require('http').Server(app); +var io = require('socket.io')(http); + +var fs = require('fs'); +var creds = ''; + +var redis = require('redis'); +var client = ''; + +// Read credentials from JSON +fs.readFile('creds.json', 'utf-8', function (err, data) { + if (err) throw err; + creds = JSON.parse(data); + client = redis.createClient('redis://' + creds.user + ':' + creds.password + '@' + creds.host + ':' + creds.port); + + // Redis Client Ready + client.once('ready', function () { + + // Flush Redis DB + // client.flushdb(); + + // Initialize Chatters + client.get('chat_users', function (err, reply) { + if (reply) { + chatters = JSON.parse(reply); + } + }); + + // Initialize Messages + client.get('chat_app_messages', function (err, reply) { + if (reply) { + chat_messages = JSON.parse(reply); + } + }); + }); +}); + +var port = process.env.PORT || 8080; + +// Start the Server +http.listen(port, function () { + console.log('Server Started. Listening on *:' + port); +}); + +// Store people in chatroom +var chatters = []; + +// Store messages in chatroom +var chat_messages = []; + +// Express Middleware +app.use(express.static('public')); +app.use(bodyParser.urlencoded({ + extended: true +})); + +// Render Main HTML file +app.get('/', function (req, res) { + res.sendFile('views/index.html', { + root: __dirname + }); +}); + +// API - Join Chat +app.post('/join', function (req, res) { + var username = req.body.username; + if (chatters.indexOf(username) === -1) { + chatters.push(username); + client.set('chat_users', JSON.stringify(chatters)); + res.send({ + 'chatters': chatters, + 'status': 'OK' + }); + } else { + res.send({ + 'status': 'FAILED' + }); + } +}); + +// API - Leave Chat +app.post('/leave', function (req, res) { + var username = req.body.username; + chatters.splice(chatters.indexOf(username), 1); + client.set('chat_users', JSON.stringify(chatters)); + res.send({ + 'status': 'OK' + }); +}); + +// API - Send + Store Message +app.post('/send_message', function (req, res) { + var username = req.body.username; + var message = req.body.message; + chat_messages.push({ + 'sender': username, + 'message': message + }); + client.set('chat_app_messages', JSON.stringify(chat_messages)); + res.send({ + 'status': 'OK' + }); +}); + +// API - Get Messages +app.get('/get_messages', function (req, res) { + res.send(chat_messages); +}); + +// API - Get Chatters +app.get('/get_chatters', function (req, res) { + res.send(chatters); +}); + +// Socket Connection +// UI Stuff +io.on('connection', function (socket) { + + // Fire 'send' event for updating Message list in UI + socket.on('message', function (data) { + io.emit('send', data); + }); + + // Fire 'count_chatters' for updating Chatter Count in UI + socket.on('update_chatter_count', function (data) { + io.emit('count_chatters', data); + }); + +}); diff --git a/redis-node-socket-chat/package.json b/redis-node-socket-chat/package.json new file mode 100644 index 0000000..1d78f9b --- /dev/null +++ b/redis-node-socket-chat/package.json @@ -0,0 +1,18 @@ +{ + "name": "socket-chat-example", + "version": "0.0.1", + "description": "my first socket.io app", + "dependencies": { + "body-parser": "^1.15.2", + "express": "^4.10.2", + "redis": "^2.6.3", + "socket.io": "^1.7.1" + }, + "main": "index.js", + "scripts": { + "start": "node index.js" + }, + "engines": { + "node": "4.1.1" + } +} diff --git a/redis-node-socket-chat/public/css/main.css b/redis-node-socket-chat/public/css/main.css new file mode 100644 index 0000000..65e3c68 --- /dev/null +++ b/redis-node-socket-chat/public/css/main.css @@ -0,0 +1,30 @@ +.container { + width: 777px; + margin: 0 auto; +} + +.messages { + border: 1px solid darkgrey; + border-bottom: none; + width: 781px; + height: 240px; +} + +#message { + width: 100%; + background-color: #f9f9f9; +} + +.chat { + display: none; +} + +.msg { + width: 100%; +} + +.user { + float: left; + margin-right: 10px; + font-weight: bold; +} diff --git a/redis-node-socket-chat/public/js/main.js b/redis-node-socket-chat/public/js/main.js new file mode 100644 index 0000000..9a976db --- /dev/null +++ b/redis-node-socket-chat/public/js/main.js @@ -0,0 +1,106 @@ +$(function () { + + // test + var socket = io(); + var chatter_count; + $.get('/get_chatters', function (response) { + $('.chat-info').text("There are currently " + response.length + " people in the chat room"); + chatter_count = response.length; //update chatter count + }); + $('#join-chat').click(function () { + var username = $.trim($('#username').val()); + $.ajax({ + url: '/join', + type: 'POST', + data: { + username: username + }, + success: function (response) { + if (response.status == 'OK') { //username doesn't already exists + socket.emit('update_chatter_count', { + 'action': 'increase' + }); + $('.chat').show(); + $('#leave-chat').data('username', username); + $('#send-message').data('username', username); + $.get('/get_messages', function (response) { + if (response.length > 0) { + var message_count = response.length; + var html = ''; + for (var x = 0; x < message_count; x++) { + html += "
" + response[x]['sender'] + "
" + response[x]['message'] + "
"; + } + $('.messages').html(html); + } + }); + $('.join-chat').hide(); //hide the container for joining the chat room. + } else if (response.status == 'FAILED') { //username already exists + alert("Sorry but the username already exists, please choose another one"); + $('#username').val('').focus(); + } + } + }); + }); + $('#leave-chat').click(function () { + var username = $(this).data('username'); + $.ajax({ + url: '/leave', + type: 'POST', + dataType: 'json', + data: { + username: username + }, + success: function (response) { + if (response.status == 'OK') { + socket.emit('message', { + 'username': username, + 'message': username + " has left the chat room.." + }); + socket.emit('update_chatter_count', { + 'action': 'decrease' + }); + $('.chat').hide(); + $('.join-chat').show(); + $('#username').val(''); + alert('You have successfully left the chat room'); + } + } + }); + }); + $('#send-message').click(function () { + var username = $(this).data('username'); + var message = $.trim($('#message').val()); + $.ajax({ + url: '/send_message', + type: 'POST', + dataType: 'json', + data: { + 'username': username, + 'message': message + }, + success: function (response) { + if (response.status == 'OK') { + socket.emit('message', { + 'username': username, + 'message': message + }); + $('#message').val(''); + } + } + }); + }); + socket.on('send', function (data) { + var username = data.username; + var message = data.message; + var html = "
" + username + "
" + message + "
"; + $('.messages').append(html); + }); + socket.on('count_chatters', function (data) { + if (data.action == 'increase') { + chatter_count++; + } else { + chatter_count--; + } + $('.chat-info').text("There are currently " + chatter_count + " people in the chat room"); + }); +}); diff --git a/redis-node-socket-chat/views/index.html b/redis-node-socket-chat/views/index.html new file mode 100644 index 0000000..e6b7361 --- /dev/null +++ b/redis-node-socket-chat/views/index.html @@ -0,0 +1,31 @@ + + + + + Node.js + Socket.io + Redis Chat | ScaleGrid + + + +
+

Node.js + Socket.io + Redis Chat | ScaleGrid

+
+ + + +
+
+
+
+
+
+

+   + +
+
+ + + + + From e595faa4f3560fcdbb9cce47bf540774dcb368cb Mon Sep 17 00:00:00 2001 From: Kunal Nagar Date: Thu, 22 Dec 2016 17:04:53 +0530 Subject: [PATCH 2/6] renamed branch --- redis-node-socket-chat/README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/redis-node-socket-chat/README.md b/redis-node-socket-chat/README.md index 75ef8b8..43dbb6c 100644 --- a/redis-node-socket-chat/README.md +++ b/redis-node-socket-chat/README.md @@ -1,4 +1,19 @@ # Chat App with Redis + Node + Socket.io +This repository contains code for a chat application built using the following web technologies: + +- [Redis](https://redis.io/) +- [Node.js](https://nodejs.org/en/) +- [Express.js](http://expressjs.com/) +- [Socket.IO](http://socket.io/) + +The original blog post can be found at the following link: [Link_Blog_Here](http://google.com) + +The Installation process assumes that you already have the above technologies installed on your machine. + +## Install + + + - Write Install instructions here - Link to blog post From f08765f17dda04991e7cff516a7692e60b02cc49 Mon Sep 17 00:00:00 2001 From: Kunal Nagar Date: Thu, 22 Dec 2016 17:18:15 +0530 Subject: [PATCH 3/6] updated readme, still need to figure out download link --- redis-node-socket-chat/README.md | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/redis-node-socket-chat/README.md b/redis-node-socket-chat/README.md index 43dbb6c..8817f98 100644 --- a/redis-node-socket-chat/README.md +++ b/redis-node-socket-chat/README.md @@ -13,7 +13,26 @@ The Installation process assumes that you already have the above technologies in ## Install +Give download link here +Navigate to the folder and run: -- Write Install instructions here -- Link to blog post +``` +npm install +``` + +To start the server, you can run: + +``` +npm start +``` + +The server should start at port 8080 (default). Navigate to [http://localhost:8080](http://localhost:8080) to see the demo. + +Although, before doing that, you might want to flush the DB and start with 0 users. + +For that, you can uncomment the line in `index.js` that says `client.flushdb();` + +Once that is done, you are ready to go. Remember to restart the server if you intend to make any changes to the code. + +You can also use something like [nodemon](https://nodemon.io/) to watch your files and restart the server automatically! From 7a9e9e4d62a11c9c69a253dc23ba12e0fd5c3a37 Mon Sep 17 00:00:00 2001 From: Kunal Nagar Date: Mon, 4 Feb 2019 10:58:55 +0530 Subject: [PATCH 4/6] Update README.md --- redis-node-socket-chat/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/redis-node-socket-chat/README.md b/redis-node-socket-chat/README.md index 8817f98..6505277 100644 --- a/redis-node-socket-chat/README.md +++ b/redis-node-socket-chat/README.md @@ -36,3 +36,7 @@ For that, you can uncomment the line in `index.js` that says `client.flushdb();` Once that is done, you are ready to go. Remember to restart the server if you intend to make any changes to the code. You can also use something like [nodemon](https://nodemon.io/) to watch your files and restart the server automatically! + +## Demo + +https://node-socket-redis-chat.herokuapp.com/ From 6ca414bdc8873dee0f7341a8867b3e9323690475 Mon Sep 17 00:00:00 2001 From: Kunal Nagar Date: Mon, 4 Feb 2019 11:06:23 +0530 Subject: [PATCH 5/6] Add blog post link --- redis-node-socket-chat/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/redis-node-socket-chat/README.md b/redis-node-socket-chat/README.md index 6505277..808ee9e 100644 --- a/redis-node-socket-chat/README.md +++ b/redis-node-socket-chat/README.md @@ -11,6 +11,10 @@ The original blog post can be found at the following link: [Link_Blog_Here](http The Installation process assumes that you already have the above technologies installed on your machine. +## Blog Post + +We've written a blog post on how to get this entire process set up here: https://scalegrid.io/blog/using-redis-with-node-js-and-socket-io/ + ## Install Give download link here From 5660f2fd3d3f30f6c751ca98b4d462deecf36aba Mon Sep 17 00:00:00 2001 From: Kunal Nagar Date: Mon, 4 Feb 2019 11:10:39 +0530 Subject: [PATCH 6/6] Follow consistent pattern for blog post links --- redis-node-socket-chat/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/redis-node-socket-chat/README.md b/redis-node-socket-chat/README.md index 808ee9e..83cc3e3 100644 --- a/redis-node-socket-chat/README.md +++ b/redis-node-socket-chat/README.md @@ -11,10 +11,6 @@ The original blog post can be found at the following link: [Link_Blog_Here](http The Installation process assumes that you already have the above technologies installed on your machine. -## Blog Post - -We've written a blog post on how to get this entire process set up here: https://scalegrid.io/blog/using-redis-with-node-js-and-socket-io/ - ## Install Give download link here @@ -41,6 +37,10 @@ Once that is done, you are ready to go. Remember to restart the server if you in You can also use something like [nodemon](https://nodemon.io/) to watch your files and restart the server automatically! -## Demo +## Additional Info + +For the full blog post, check out the following link: https://scalegrid.io/blog/using-redis-with-node-js-and-socket-io/ + +Check out a hosted version of the demo: https://node-socket-redis-chat.herokuapp.com/ -https://node-socket-redis-chat.herokuapp.com/ +[Start your free 14-day trial](https://console.scalegrid.io/users/register) by creating your first Redis cluster on ScaleGrid! No credit card required.