Permalink
Browse files

initial files

  • Loading branch information...
0 parents commit 5f1591a974baa71eff56268e559702edfe535f19 @mmukhin committed Oct 26, 2011
Showing with 143 additions and 0 deletions.
  1. +7 −0 README
  2. +65 −0 app.js
  3. +62 −0 index.html
  4. +9 −0 package.json
@@ -0,0 +1,7 @@
+Initially from http://psitsmike.com/2011/10/node-js-and-socket-io-multiroom-chat-tutorial/
+
+1. Install NodeJS and npm
+2. Execute 'npm install -d' to create the node_modules folder from package.json
+3. Run program 'node app.js'
+
+Feel free to ask any questions.
@@ -0,0 +1,65 @@
+var app = require('express').createServer()
+var io = require('socket.io').listen(app);
+
+app.listen(8080);
+
+// routing
+app.get('/', function (req, res) {
+ res.sendfile(__dirname + '/index.html');
+});
+
+// usernames which are currently connected to the chat
+var usernames = {};
+
+// rooms which are currently available in chat
+var rooms = ['room1','room2','room3'];
+
+io.sockets.on('connection', function (socket) {
+
+ // when the client emits 'adduser', this listens and executes
+ socket.on('adduser', function(username){
+ // store the username in the socket session for this client
+ socket.username = username;
+ // store the room name in the socket session for this client
+ socket.room = 'room1';
+ // add the client's username to the global list
+ usernames[username] = username;
+ // send client to room 1
+ socket.join('room1');
+ // echo to client they've connected
+ socket.emit('updatechat', 'SERVER', 'you have connected to room1');
+ // echo to room 1 that a person has connected to their room
+ socket.broadcast.to('room1').emit('updatechat', 'SERVER', username + ' has connected to this room');
+ socket.emit('updaterooms', rooms, 'room1');
+ });
+
+ // when the client emits 'sendchat', this listens and executes
+ socket.on('sendchat', function (data) {
+ // we tell the client to execute 'updatechat' with 2 parameters
+ io.sockets.in(socket.room).emit('updatechat', socket.username, data);
+ });
+
+ socket.on('switchRoom', function(newroom){
+ socket.leave(socket.room);
+ socket.join(newroom);
+ socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom);
+ // sent message to OLD room
+ socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room');
+ // update socket session room title
+ socket.room = newroom;
+ socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room');
+ socket.emit('updaterooms', rooms, newroom);
+ });
+
+
+ // when the user disconnects.. perform this
+ socket.on('disconnect', function(){
+ // remove the username from global usernames list
+ delete usernames[socket.username];
+ // update list of users in chat, client-side
+ io.sockets.emit('updateusers', usernames);
+ // echo globally that this client has left
+ socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
+ socket.leave(socket.room);
+ });
+});
@@ -0,0 +1,62 @@
+<script src="/socket.io/socket.io.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+<script>
+ var socket = io.connect('http://localhost:8080');
+
+ // on connection to server, ask for user's name with an anonymous callback
+ socket.on('connect', function(){
+ // call the server-side function 'adduser' and send one parameter (value of prompt)
+ socket.emit('adduser', prompt("What's your name?"));
+ });
+
+ // listener, whenever the server emits 'updatechat', this updates the chat body
+ socket.on('updatechat', function (username, data) {
+ $('#conversation').append('<b>'+username + ':</b> ' + data + '<br>');
+ });
+
+ // listener, whenever the server emits 'updaterooms', this updates the room the client is in
+ 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);
+ }
+
+ // on load of page
+ $(function(){
+ // when the client clicks SEND
+ $('#datasend').click( function() {
+ var message = $('#data').val();
+ $('#data').val('');
+ // tell server to execute 'sendchat' and send along one parameter
+ socket.emit('sendchat', message);
+ });
+
+ // when the client hits ENTER on their keyboard
+ $('#data').keypress(function(e) {
+ if(e.which == 13) {
+ $(this).blur();
+ $('#datasend').focus().click();
+ }
+ });
+ });
+
+</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="conversation"></div>
+ <input id="data" style="width:200px;" />
+ <input type="button" id="datasend" value="send" />
+</div>
@@ -0,0 +1,9 @@
+{
+ "name": "mukhin_chat",
+ "description": "example chat application with socket.io",
+ "version": "0.0.1",
+ "dependencies": {
+ "express": "2.4.6",
+ "socket.io": "0.8.4"
+ }
+}

0 comments on commit 5f1591a

Please sign in to comment.