Skip to content

Instantly share code, notes, and snippets.

/index Secret

Created January 13, 2014 08:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/d0b52dd582b07ab8318d to your computer and use it in GitHub Desktop.
Save anonymous/d0b52dd582b07ab8318d to your computer and use it in GitHub Desktop.
<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>
//////////////////////////////////
/* 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