Skip to content

Instantly share code, notes, and snippets.

@mlconnor
Last active Nov 19, 2015
Embed
What would you like to do?
Socket.io complete example in a single coffee file.
express = require('express')
app = express()
server = require('http').createServer(app)
io = require('socket.io')(server)
app.use express.static(__dirname + '/public')
server.listen 3000
io.on 'connection', (socket)->
console.log('a user connected')
socket.on 'chatMessage', (from, msg)->
io.emit('chatMessage', from, msg)
socket.on 'disconnect', ()->
console.log('user disconnected')
socket.on 'notifyUser', (user)->
console.log('notifyUser()')
io.emit('notifyUser', user)
app.get '/', (req, res, next) ->
htmlPage = """
<!doctype html>
<html>
<head>
<title>Chat Application</title>
<link rel='stylesheet' href='style.css' type='text/css'/>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
function submitfunction(){
var from = $('#user').val();
var message = $('#m').val();
if(message != '') {
socket.emit('chatMessage', from, message);
}
$('#m').val('').focus();
return false;
}
function notifyTyping() {
var user = $('#user').val();
socket.emit('notifyUser', user);
}
socket.on('chatMessage', function(from, msg){
var me = $('#user').val();
var color = (from == me) ? 'green' : '#009afd';
var from = (from == me) ? 'Me' : from;
$('#messages').append('<li><b style="color:' + color + '">' + from + '</b>: ' + msg + '</li>');
});
socket.on('notifyUser', function(user){
console.log("received notifyUser()");
var me = $('#user').val();
if(user != me) {
$('#notifyUser').text(user + ' is typing ...');
}
setTimeout(function(){ $('#notifyUser').text(''); }, 10000);;
});
$(document).ready(function(){
var name = makeid();
$('#user').val(name);
socket.emit('chatMessage', 'System', '<b>' + name + '</b> has joined the discussion');
});
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 5; i++ ) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
</script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form #button { color:#FFF; background: #2D9F0B; border: none; padding: 10px; width: 9%; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#notifyUser { position: fixed; bottom: 42px; width: 100%; }
</style>
</head>
<body>
<ul id="messages"></ul>
<span id="notifyUser"></span>
<form id="form" action="" onsubmit="return submitfunction();" >
<input type="hidden" id="user" value="" /><input id="m" autocomplete="off" onkeyup="notifyTyping();" placeholder="Type yor message here.." /><input type="submit" id="button" value="Send"/>
</form>
</body>
</html>
"""
res.send(htmlPage)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment