Skip to content

anonymous /index secret
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
<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>
var socket;
socket = io.connect();
jQuery(function($){
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>');
/*$rooms.append('<div><a id="\''+value+'\'" href="#" >' + value + '</a></div>');*/
}
});
});
/*$(value).click(function(){
alert(room);
});*/
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('sendMessage', $messageBox.val(), function(data){
$chat.append('<span class="error">' + data + "</span><br/>");
});
$messageBox.val('');
});
$('#roombutton').click(function(){
var name = $('#roomname').val();
$('#roomname').val('');
socket.emit('create', name)
});
socket.on('createroom', function () {
socket.emit('create', room);
});
socket.on('serverMessage', function(username, data){
$chat.append('<span class="msg"><b>' + username + ': </b>' + data + "</span><br/>");
});
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/>");
});
});
function switchRoom(room){
socket.emit('switchRoom', room);
}
</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 style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
<div id="room creation"></div>
<input id="roomname" style="width:200px;" />
<input type="button" id="roombutton" value="create room" />
</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 = ['Lobby','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(socket.room);
/*socket.join('Lobby');*/
updateUsers();
socket.emit('serverMessage', 'SERVER', 'you have connected to Lobby');
socket.broadcast.to('Lobby').emit('serverMessage', 'SERVER', socket.username +' has connected to this room');
socket.emit('updaterooms', rooms, 'Lobby');
}
});
function updateUser(roomUser){
usersOutput = {};
for(i=0; i < roomUser.length; i++){
usersOutput += users[i]
}
io.sockets.emit('usernames', Object.keys(usersOutput));
}
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('create', function(room) {
rooms.push(room);
socket.emit('updaterooms', rooms, socket.room);
});
socket.on('switchRoom', function(newroom){
socket.leave(socket.room);
socket.join(newroom);
var roomUser = io.sockets.clients(newroom);
updateUser(roomUser);
socket.emit('serverMessage', 'SERVER', 'you have connected to '+ newroom);
socket.broadcast.to(socket.room).emit('serverMessage', 'SERVER', socket.username + ' has left this room');
socket.room = newroom;
socket.broadcast.to(newroom).emit('serverMessage', '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
Something went wrong with that request. Please try again.