샘플앱 node-talk

1 개요[ | ]

node-talk
노드-토크, 노드톡

node.js로 작성한 채팅 웹애플리케이션 (샘플)
express, socket.io 기반

2 server.js[ | ]

var port = process.env.PORT || 3000;
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use('/', express.static('public'));

io.on('connection', function(socket) {
	console.log('a user connected');
	socket.on('disconnect', function() {
		console.log('user disconnected');
	});
	socket.on('message', function(msg){
		io.emit('message', msg);
	});
});

http.listen(port, function(){
  console.log('listening on *:' + port);
});

3 app.js[ | ]

var socket = io();
var last_sender = null;
var avatar_type = 'identicon';
// var avatar_type = 'letter';

function randomUsername() {
	var text = "";
	var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	for (var i = 0; i < 5; i++)
		text += possible.charAt(Math.floor(Math.random() * possible.length));
	return text;
}

function send() {
	socket.emit('message', {
		'username' : $('#username').val(),
		'content' : $('#content').val()
	});
	$('#content').focus();
}

function createIdenticonAvatar( username ) {
	var hash = CryptoJS.MD5(username).toString();
	var img_data = new Identicon(hash, 50).toString();
	return $('<div class="avatar-box">')
		.append( $('<img class="photo">').attr('src', "data:image/png;base64," + img_data) );
}

function createLetterAvatar( username ) {
	var colorHash = new ColorHash({ lightness: 0.5, saturation: 0.7 });
    var color = colorHash.hex( username );
    var initial = username.charAt(0);
	return $('<div class="avatar-box">')
		.append( $('<div class="photo lavatar">').css('background', color).text(initial) );
}

function showMessage(message) {
	var avatar_box = ( avatar_type == 'identicon' )? 
		createIdenticonAvatar( message.username ) : createLetterAvatar( message.username );
	
	var who = ( $("#username").val() == message.username )? 'mine' : 'others';
	var sender_visible = ( last_sender == message.username )? 'sender-hidden' : 'sender-show';
	

	$('#chat').append(
		$('<div class="message">').addClass(who).addClass(sender_visible)
			.append( avatar_box )
			.append( $('<div class="text-box">')
				.append( $('<div class="username-box">' ).text( message.username ) )
				.append( $('<div class="content-box">')
					.append($('<span>').text(message.content))
				)
			)
	);
	$("#chat")[0].scrollTop = $("#chat")[0].scrollHeight;
	last_sender = message.username;
}

$(function () {
	$("form").submit( function (e) { e.preventDefault(); });
	$('#send-btn').click(function () { send(); });
	socket.on('message', function (message) { showMessage(message); });
	$("#username").val( randomUsername() );
	$('#content').focus();
});

4 같이 보기[ | ]

5 참고[ | ]