-
-
Save anonymous/d0b52dd582b07ab8318d to your computer and use it in GitHub Desktop.
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>Chat with socket.io and node.js</title> | |
<style> | |
#chat{ | |
height:500px; | |
} | |
#contentWrap{ | |
display: none; | |
} | |
#chatWrap{ | |
float:left; | |
border: 1px #000 solid; | |
} | |
.error{ | |
color: red; | |
} | |
.whisper{ | |
color: gray; | |
font-style: italic; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="userWrap"> | |
<p>Enter a username:</p> | |
<p id="userError"></p> | |
<form id="setUser"> | |
<input size="35" id="username"></input> | |
<input type="submit"></input> | |
</form> | |
</div> | |
<div id="contentWrap"> | |
<div id="chatWrap"> | |
<div id="chat"></div> | |
<form id="send-message"> | |
<input size="35" id="message"></input> | |
<input type="submit"></input> | |
</form> | |
</div> | |
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;"> | |
<b>USERS</b> | |
<div id="users"></div> | |
</div> | |
<script src="http://code.jquery.com/jquery-latest.min.js"></script> | |
<script src="/socket.io/socket.io.js"></script> | |
<script> | |
jQuery(function($){ | |
var socket = io.connect(); | |
var $userForm = $('#setUser'); | |
var $userError = $('#userError'); | |
var $userBox = $('#username'); | |
var $users = $('#users'); | |
var $messageForm = $('#send-message'); | |
var $messageBox = $('#message'); | |
var $chat = $('#chat'); | |
var $rooms = $('#rooms'); | |
$userForm.submit(function(e){ | |
e.preventDefault(); | |
socket.emit('newUser', $userBox.val(), function(data){ | |
if(data){ | |
$('#userWrap').hide(); | |
$('#contentWrap').show(); | |
} else{ | |
$userError.html('That username is already taken! Try again.'); | |
} | |
}); | |
$userBox.val(''); | |
}); | |
socket.on('usernames', function(data){ | |
var html = ''; | |
for(i=0; i < data.length; i++){ | |
html += data[i] + '<br/>' | |
} | |
$users.html(html); | |
}); | |
socket.on('updaterooms', function(rooms, current_room) { | |
$rooms.empty(); | |
$.each(rooms, function(key, value) { | |
if(value == current_room){ | |
$rooms.append('<div>' + value + '</div>'); | |
} | |
else { | |
$rooms.append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>'); | |
} | |
}); | |
}); | |
function switchRoom(room){ | |
socket.emit('switchRoom', room); | |
} | |
$messageForm.submit(function(e){ | |
e.preventDefault(); | |
socket.emit('sendMessage', $messageBox.val(), function(data){ | |
$chat.append('<span class="error">' + data + "</span><br/>"); | |
}); | |
$messageBox.val(''); | |
}); | |
socket.on('newMessage', function(data){ | |
$chat.append('<span class="msg"><b>' + data.user + ': </b>' + data.msg + "</span><br/>"); | |
}); | |
socket.on('whisper', function(data){ | |
$chat.append('<span class="whisper"><b>' + data.user + ': </b>' + data.msg + "</span><br/>"); | |
}); | |
}); | |
</script> | |
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;"> | |
<b>ROOMS</b> | |
<div id="rooms"></div> | |
</div> | |
</div> | |
</body> | |
</html> |
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
////////////////////////////////// | |
/* SERVER CONFIG */ | |
////////////////////////////////// | |
var express = require('express'), | |
app = express(), | |
server = require('http').createServer(app), | |
io = require('socket.io').listen(server, { log: true}), | |
port = 8080, | |
users = {}; | |
server.listen(port); | |
var rooms = ['room1','room2','room3']; | |
app.get('/', function(req, res){ | |
res.sendfile(__dirname + '/index.html'); | |
}); | |
io.sockets.on('connection', function(socket){ | |
socket.on('newUser', function(data, callback){ | |
if (data in users){ | |
callback(false); | |
}else{ | |
callback(true); | |
socket.username = data; | |
socket.room = 'Lobby'; | |
users[socket.username] = socket; | |
socket.join('Lobby'); | |
updateUsers(); | |
socket.emit('updatechat', 'SERVER', 'you have connected to room1'); | |
socket.broadcast.to('room1').emit('newMessage', 'SERVER', socket + ' has connected to this room'); | |
socket.emit('updaterooms', rooms, 'room1'); | |
} | |
}); | |
function updateUsers(){ | |
io.sockets.emit('usernames', Object.keys(users)); | |
} | |
socket.on('sendMessage', function(data, callback){ | |
var msg = data.trim(); | |
console.log('after trimming message is: ' + msg); | |
if(msg.substr(0,3) === '/w '){ | |
msg = msg.substr(3); | |
var ind = msg.indexOf(' '); | |
if(ind !== -1){ | |
var name = msg.substring(0, ind); | |
var msg = msg.substring(ind + 1); | |
if(name in users){ | |
users[name].emit('whisper', {msg: msg, user: socket.username}); | |
console.log('message sent is: ' + msg); | |
console.log('Whisper!'); | |
} else{ | |
callback('Error! Enter a valid user.'); | |
} | |
} else{ | |
callback('Error! Please enter a message for your whisper.'); | |
} | |
} else{ | |
/*io.sockets.emit('newMessage', {msg: msg, user: socket.username});*/ | |
io.sockets.in(socket.room).emit('newMessage', {msg: msg, user: socket.username}); | |
} | |
}); | |
socket.on('switchRoom', function(newroom){ | |
socket.leave(socket.room); | |
socket.join(newroom); | |
socket.emit('newMessage', 'SERVER', 'you have connected to '+ newroom); | |
socket.broadcast.to(socket.room).emit('newMessage', 'SERVER', socket.username+' has left this room'); | |
socket.room = newroom; | |
socket.broadcast.to(newroom).emit('newMessage', 'SERVER', socket.username+' has joined this room'); | |
socket.emit('updaterooms', rooms, newroom); | |
}); | |
socket.on('disconnect', function(data){ | |
if(!socket.username) return; | |
delete users[socket.username]; | |
updateUsers(); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment