Created
February 4, 2011 18:10
-
-
Save ryanflorence/811483 to your computer and use it in GitHub Desktop.
Node.JS + Socket.IO + 10 minutes = Chat
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Module dependencies. | |
*/ | |
var express = require('express') | |
, io = require('socket.io'); | |
var app = module.exports = express.createServer(); | |
// Configuration | |
app.configure(function(){ | |
app.set('views', __dirname + '/views'); | |
app.set('view engine', 'jade'); | |
app.use(express.bodyDecoder()); | |
app.use(express.methodOverride()); | |
app.use(app.router); | |
app.use(express.staticProvider(__dirname + '/public')); | |
}); | |
app.configure('development', function(){ | |
app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); | |
}); | |
app.configure('production', function(){ | |
app.use(express.errorHandler()); | |
}); | |
// Routes | |
app.get('/', function(req, res){ | |
res.render('index', { | |
title: 'Express' | |
}); | |
}); | |
// Only listen on $ node app.js | |
if (!module.parent) { | |
app.listen(8888); | |
console.log("Express server listening on port %d", app.address().port) | |
} | |
var socket = io.listen(app); | |
socket.on('connection', function(client){ | |
client.send("Server: You're connected!\n=> The first thing you type will be your screen name."); | |
var user; | |
client.on('message', function(data){ | |
if (!user) { | |
user = data; | |
socket.broadcast(user + ' has joined.'); | |
return; | |
} | |
socket.broadcast(user + ": " + data); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# requires | |
# node v0.3.7 | |
# express 2.0.0pre | |
# connect 0.5.7 | |
# jade 0.6.3 | |
$ express chat | |
$ cd chat | |
# edit files | |
$ node app.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h1 Chat app in 64LOC! | |
pre#log | |
form#input | |
input |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!!! | |
html | |
head | |
title= title | |
script(src="/socket.io/socket.io.js") | |
script(src="/javascripts/site.js") | |
link(rel='stylesheet', href='/stylesheets/style.css') | |
body!= body |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.addEventListener('DOMContentLoaded', function(){ | |
var log = document.getElementById('log'), | |
, form = document.getElementById('input') | |
, input = form.children[0]; | |
input.focus(); | |
form.addEventListener('submit', function(event){ | |
event.preventDefault(); | |
socket.send(input.value); | |
input.value = ''; | |
input.focus(); | |
}, false); | |
socket = new io.Socket('localhost', {port: 8888}); | |
socket.connect(); | |
socket.on('message', function(data){ | |
log.innerHTML = log.innerHTML + data + "\n"; | |
log.scrollTop = log.scrollHeight; | |
}); | |
}, false); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
padding: 50px; | |
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; | |
} | |
a { | |
color: #00B7FF; | |
} | |
#input { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
border-top: solid 1px; | |
background: #ccc; | |
padding-left: 10px; | |
height: 40px; | |
} | |
h1 { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
background: #454545; | |
color: #fff; | |
margin: 0; | |
padding: 0.25em; | |
height: 38px; | |
} | |
#log { | |
position: absolute; | |
background: #f0f0f0; | |
top: 38px; | |
left: 0px; | |
right: 0px; | |
bottom: 27px; | |
padding: 1em; | |
overflow: auto; | |
} | |
#input input { | |
width: 98%; | |
font-size: 20px; | |
margin-top: 5px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment