Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

first

  • Loading branch information...
commit 3b8a0514f3470e8584d69164556b68e6ca8e70ec 0 parents
Paolo Fragomeni authored
1  .gitignore
@@ -0,0 +1 @@
+node_modules/*
31 README.md
@@ -0,0 +1,31 @@
+
+## Synopsis
+This is a real-time chat server that uses socket.io
+
+## Prerequisites
+You will need to have node.js and npm installed.
+
+## Installing the demo
+Once you have node.js and npm installed you can install the application's dependencies.
+
+```bash
+
+ npm install
+
+```
+
+## Running the demo
+Once the demo app is installed, you can run the demo from the root directory. you may need to run this command as the super user.
+
+```bash
+
+ node server/server.js
+
+```
+
+```bash
+
+ sudo node server/server.js
+
+```
+
11 package.json
@@ -0,0 +1,11 @@
+{
+ "name": "chat",
+ "description": "A simple chat application",
+ "version": "0.0.1",
+ "author": "General Assembly <info@generalassemb.ly>",
+ "dependencies": {
+ "socket.io": "*",
+ "node-static": "*"
+ },
+ "engines": { "node": "*" }
+}
202 public/index.css
@@ -0,0 +1,202 @@
+body {
+ font-family: "lucida grande", sans-serif;
+ text-align: center;
+}
+
+h1 {
+ font-size: 40px;
+}
+
+#chat,
+#nickname,
+#messages {
+ width: 600px;
+ text-align: left;
+}
+#chat {
+ position: relative;
+ border: 1px solid #ccc;
+ margin: auto;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px
+}
+#nickname,
+#connecting {
+ position: absolute;
+ height: 410px;
+ z-index: 100;
+ left: 0;
+ top: 0;
+ background: #fff;
+ text-align: center;
+ width: 600px;
+ font: 15px;
+ color: #666;
+ display: block;
+}
+#nickname .wrap,
+#connecting .wrap {
+ padding-top: 150px;
+}
+#nickname input {
+ border: 1px solid #ccc;
+ padding: 10px;
+}
+#nickname input:focus {
+ border-color: #999;
+ outline: 0;
+}
+#nickname #nickname-err {
+ color: #8b0000;
+ font-size: 12px;
+ visibility: hidden;
+}
+.connected #connecting {
+ display: none;
+}
+.nickname-set #nickname {
+ display: none;
+}
+#messages {
+ height: 380px;
+ background: #eee;
+}
+#messages em {
+ text-shadow: 0 1px 0 #fff;
+ color: #999;
+}
+#messages p {
+ padding: 0;
+ margin: 0;
+ font: 12px Helvetica, Arial;
+ padding: 5px 10px;
+}
+#messages p b {
+ display: inline-block;
+ padding-right: 10px;
+}
+#messages p:nth-child(even) {
+ background: #fafafa;
+}
+#messages #nicknames {
+ background: #ccc;
+ padding: 10px;
+ font: 11px Helvetica;
+}
+#messages #nicknames span {
+ color: #000;
+}
+#messages #nicknames b {
+ display: inline-block;
+ color: #fff;
+ background: #999;
+ padding: 3px 6px;
+ margin-right: 5px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ text-shadow: 0 1px 0 #666;
+}
+#messages #lines {
+ height: 340px;
+ overflow: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+#messages #lines::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+#messages #lines::-webkit-scrollbar-button:start:decrement,
+#messages #lines ::-webkit-scrollbar-button:end:increment {
+ display: block;
+ height: 10px;
+}
+#messages #lines::-webkit-scrollbar-button:vertical:increment {
+ background-color: #fff;
+}
+#messages #lines::-webkit-scrollbar-track-piece {
+ background-color: #fff;
+ -webkit-border-radius: 3px;
+}
+#messages #lines::-webkit-scrollbar-thumb:vertical {
+ height: 50px;
+ background-color: #ccc;
+ -webkit-border-radius: 3px;
+}
+#messages #lines::-webkit-scrollbar-thumb:horizontal {
+ width: 50px;
+ background-color: #fff;
+ -webkit-border-radius: 3px;
+}
+#send-message {
+ background: #fff;
+ position: relative;
+}
+#send-message input {
+ border: none;
+ height: 30px;
+ padding: 0 10px;
+ line-height: 30px;
+ vertical-align: middle;
+ width: 580px;
+}
+#send-message input:focus {
+ outline: 0;
+}
+#send-message button {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+}
+button {
+ margin: 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ display: inline-block;
+ text-decoration: none;
+ background: #43a1f7;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43a1f7), color-stop(1, #377ad0));
+ background: -webkit-linear-gradient(top, #43a1f7 0%, #377ad0 100%);
+ background: -moz-linear-gradient(top, #43a1f7 0%, #377ad0 100%);
+ background: linear-gradient(top, #43a1f7 0%, #377ad0 100%);
+ border: 1px solid #2e70c4;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ color: #fff;
+ font-family: "lucida grande", sans-serif;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 1;
+ padding: 3px 10px 5px 10px;
+ text-align: center;
+ text-shadow: 0 -1px 1px #2d6dc0;
+}
+button:hover,
+button.hover {
+ background: darker;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43a1f7), color-stop(1, #2e70c4));
+ background: -webkit-linear-gradient(top, #43a1f7 0%, #2e70c4 100%);
+ background: -moz-linear-gradient(top, #43a1f7 0%, #2e70c4 100%);
+ background: linear-gradient(top, #43a1f7 0%, #2e70c4 100%);
+ border: 1px solid #2e70c4;
+ cursor: pointer;
+ text-shadow: 0 -1px 1px #2c6bbb;
+}
+button:active,
+button.active {
+ background: #2e70c4;
+ border: 1px solid #2e70c4;
+ border-bottom: 1px solid #2861aa;
+ text-shadow: 0 -1px 1px #2b67b5;
+}
+button:focus,
+button.focus {
+ outline: none;
+ -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.4), 0 0 4px 0 #377ad0;
+ -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.4), 0 0 4px 0 #377ad0;
+ box-shadow: 0 1px 0 0 rgba(255,255,255,0.4), 0 0 4px 0 #377ad0;
+}
31 public/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link href='/index.css' rel='stylesheet'/>
+ <script src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
+ <script src='/socket.io/socket.io.js'></script>
+ <script src='/index.js'></script>
+ </head>
+ <body>
+ <h1>Node.js Chat Demo</h1>
+ <div id="chat">
+ <div id="nickname">
+ <form class="wrap" id="set-nickname">
+ <p>Please type in your nickname and press enter.</p>
+ <input id="nick" type="text"/>
+ <p id="nickname-err">Nickname already in use</p>
+ </form>
+ </div>
+ <div id="connecting">
+ <div class="wrap">Connecting to socket.io server</div>
+ </div>
+ <div id="messages">
+ <div id="nicknames"></div>
+ <div id="lines"></div>
+ </div>
+ <form id="send-message">
+ <input id="message" type="text"/>
+ <button value="">Send</button>
+ </form>
+ </body>
+</html>
66 public/index.js
@@ -0,0 +1,66 @@
+
+ //
+ // socket.io code
+ //
+ var socket = io.connect();
+
+ socket.on('connect', function () {
+ $('#chat').addClass('connected');
+ });
+
+ socket.on('announcement', function (msg) {
+ $('#lines').append($('<p>').append($('<em>').text(msg)));
+ });
+
+ socket.on('nicknames', function (nicknames) {
+ $('#nicknames').empty().append($('<span>Online: </span>'));
+ for (var i in nicknames) {
+ $('#nicknames').append($('<b>').text(nicknames[i]));
+ }
+ });
+
+ socket.on('user message', message);
+ socket.on('reconnect', function () {
+ $('#lines').remove();
+ message('System', 'Reconnected to the server');
+ });
+
+ socket.on('reconnecting', function () {
+ message('System', 'Attempting to re-connect to the server');
+ });
+
+ socket.on('error', function (e) {
+ message('System', e ? e : 'A unknown error occurred');
+ });
+
+ function message (from, msg) {
+ $('#lines').append($('<p>').append($('<b>').text(from), msg));
+ }
+
+ //
+ // dom manipulation code
+ //
+ $(function () {
+ $('#set-nickname').submit(function (ev) {
+ socket.emit('nickname', $('#nick').val(), function (set) {
+ if (!set) {
+ clear();
+ return $('#chat').addClass('nickname-set');
+ }
+ $('#nickname-err').css('visibility', 'visible');
+ });
+ return false;
+ });
+
+ $('#send-message').submit(function () {
+ message('me', $('#message').val());
+ socket.emit('user message', $('#message').val());
+ clear();
+ $('#lines').get(0).scrollTop = 10000000;
+ return false;
+ });
+
+ function clear () {
+ $('#message').val('').focus();
+ };
+ });
50 server/server.js
@@ -0,0 +1,50 @@
+
+ var fs = require('fs'),
+ sio = require('socket.io'),
+ static = require('node-static');
+
+ var app = require('http').createServer(handler);
+ app.listen(80);
+
+ var file = new static.Server('./public/');
+
+ function handler(req, res) {
+ file.serve(req, res);
+ }
+
+ var io = sio.listen(app),
+ nicknames = {};
+
+ io.sockets.on('connection', function (socket) {
+
+ socket.on('user message', function (msg) {
+
+ socket.broadcast.emit('user message', socket.nickname, msg);
+ });
+
+ socket.on('nickname', function (nick, fn) {
+ if (nicknames[nick]) {
+
+ fn(true);
+ }
+ else {
+
+ fn(false);
+ nicknames[nick] = socket.nickname = nick;
+ socket.broadcast.emit('announcement', nick + ' connected');
+ io.sockets.emit('nicknames', nicknames);
+ }
+ });
+
+ socket.on('disconnect', function () {
+
+ if (!socket.nickname) {
+
+ return;
+ }
+
+ delete nicknames[socket.nickname];
+ socket.broadcast.emit('announcement', socket.nickname + ' disconnected');
+ socket.broadcast.emit('nicknames', nicknames);
+ });
+ });
Please sign in to comment.
Something went wrong with that request. Please try again.