mayfer · November 13, 2015 18:54
diff --git a/index.html b/index.html
 <!doctype>
 <html>

    <head>
        <title>hi</title>
        
        <style>
            body, html {
                background: #aaa;
                font-family: monospace;
                margin: 0;
                padding: 0;
            }

            .section {
                background: rgba(255, 255, 255, 0.6);
                margin: 10px;
                padding: 20px;
            }

            #channels a {
                background: #aaa;
                color: #fff;
                padding: 2px 5px;
                cursor: pointer;
            }
            #channels a.subscribed {
                background: #000;
            }

            #messages {
                height: 300px;
                overflow: scroll;
            }
            input { width: 80%; }
            
        </style>
        <script src="/socket.io/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>

            $(document).ready(function(){

                var name = prompt("pls enter name hehe");
                socket = io(undefined, {query: "name="+name});

                socket.on("online", function(online) {
                    var users = [];
                    for(id in online) {
                        users.push(online[id].name);
                    };
                    $("#online").html(users.length+" online");
                });
                socket.on("message", function(msg) {
                    var message = $("<div>").addClass("message").text("[" + msg.name + "] " + msg.contents);
                    var msgs = $("#messages").append(message)[0];
                    msgs.scrollTop = msgs.scrollHeight;
                });

                $('#channels a').click(function (e) {
                });


                $('input').on('keydown', function(e) {
                    if(e.keyCode == 13) {
                        var message = $(this).val();
                        var room = $('#room option:selected').text();

                        socket.emit("message", {
                            contents: message,
                            room: room,
                        });
                        $(this).val('');
                    }
                });


                $('#channels a').click(function(e){
                    if($(this).hasClass("subscribed")) {
                        socket.emit("leave", $(this).text());
                        $(this).removeClass('subscribed');
                    } else {
                        socket.emit("join", $(this).text());
                        $(this).addClass('subscribed');
                    }
                });
            });
                
        </script>
    </head>
    <body>
        <div class="section" id="channels">
            <a>cake-masters</a>
            <a>cake-ninja</a>
            <a>cake-haters</a>
        </div>
        <div class="section" id="online">
        </div>
        <div class="section" id="messages">
        </div>
        <div class="section" id="post">
            <select id="room">
                <option>cake-masters</option>
                <option>cake-ninja</option>
                <option>cake-haters</option>
            </select>
            <input type="text" name="message" />
        </div>
    </body>

 </html>
diff --git a/package.json b/package.json
 {
  "name": "pings",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.12.2",
    "socket.io": "^1.3.5",
    "socket.io-client": "^1.3.5"
  }
 }
diff --git a/server.js b/server.js
 // using express to handle routing
 var express = require('express');
 var app = express();

 // http server for loading html pages
 var http = require('http').Server(app);
 // socket.io for handling websockets
 var io = require('socket.io')(http);
 var path = require('path');


 app.get('/', function(req, res){
    res.sendFile(path.join(__dirname, 'index.html'));
 });
 // start node server
 http.listen(8888, function(){
    console.log('listening on *:8888');
 });
 app.use(express.static(__dirname));


 var online = {};
 var public_ids = {};

 // event handler for when a client connects 
 io.on('connection', function(socket){
    // socket ID is a unique identifier for this particular connection
    // it assigns a new one for every new browser connection, even if it's the same user.
    var name = socket.request._query["name"];
    
    console.log(name, "connected");
    online[socket.id] = {name: name}
    io.sockets.emit("online", online);

    socket.on('clicked', function(msg) {
        io.sockets.emit("clicked", msg);
    });

    socket.on('message', function(msg) {
        var message = {
            name: online[socket.id].name,
            contents: msg.contents,
            room: msg.room
        }
        io.to(msg.room).emit("message", message);
    });

    socket.on('join', function(room) {
        socket.join(room);
    });

    socket.on('leave', function(room) {
        socket.leave(room);
    });

    socket.on('disconnect', function() {
        delete online[socket.id];
    });

 });
	<!doctype>
	<html>

	<head>
	<title>hi</title>

	<style>
	body, html {
	background: #aaa;
	font-family: monospace;
	margin: 0;
	padding: 0;
	}

	.section {
	background: rgba(255, 255, 255, 0.6);
	margin: 10px;
	padding: 20px;
	}

	#channels a {
	background: #aaa;
	color: #fff;
	padding: 2px 5px;
	cursor: pointer;
	}
	#channels a.subscribed {
	background: #000;
	}

	#messages {
	height: 300px;
	overflow: scroll;
	}
	input { width: 80%; }

	</style>
	<script src="/socket.io/socket.io.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script>

	$(document).ready(function(){

	var name = prompt("pls enter name hehe");
	socket = io(undefined, {query: "name="+name});

	socket.on("online", function(online) {
	var users = [];
	for(id in online) {
	users.push(online[id].name);
	};
	$("#online").html(users.length+" online");
	});
	socket.on("message", function(msg) {
	var message = $("<div>").addClass("message").text("[" + msg.name + "] " + msg.contents);
	var msgs = $("#messages").append(message)[0];
	msgs.scrollTop = msgs.scrollHeight;
	});

	$('#channels a').click(function (e) {
	});


	$('input').on('keydown', function(e) {
	if(e.keyCode == 13) {
	var message = $(this).val();
	var room = $('#room option:selected').text();

	socket.emit("message", {
	contents: message,
	room: room,
	});
	$(this).val('');
	}
	});


	$('#channels a').click(function(e){
	if($(this).hasClass("subscribed")) {
	socket.emit("leave", $(this).text());
	$(this).removeClass('subscribed');
	} else {
	socket.emit("join", $(this).text());
	$(this).addClass('subscribed');
	}
	});
	});

	</script>
	</head>
	<body>
	<div class="section" id="channels">
	<a>cake-masters</a>
	<a>cake-ninja</a>
	<a>cake-haters</a>
	</div>
	<div class="section" id="online">
	</div>
	<div class="section" id="messages">
	</div>
	<div class="section" id="post">
	<select id="room">
	<option>cake-masters</option>
	<option>cake-ninja</option>
	<option>cake-haters</option>
	</select>
	<input type="text" name="message" />
	</div>
	</body>

	</html>
	{
	"name": "pings",
	"version": "1.0.0",
	"description": "",
	"main": "server.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"start": "node server.js"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
	"express": "^4.12.2",
	"socket.io": "^1.3.5",
	"socket.io-client": "^1.3.5"
	}
	}
	// using express to handle routing
	var express = require('express');
	var app = express();

	// http server for loading html pages
	var http = require('http').Server(app);
	// socket.io for handling websockets
	var io = require('socket.io')(http);
	var path = require('path');


	app.get('/', function(req, res){
	res.sendFile(path.join(__dirname, 'index.html'));
	});
	// start node server
	http.listen(8888, function(){
	console.log('listening on *:8888');
	});
	app.use(express.static(__dirname));


	var online = {};
	var public_ids = {};

	// event handler for when a client connects
	io.on('connection', function(socket){
	// socket ID is a unique identifier for this particular connection
	// it assigns a new one for every new browser connection, even if it's the same user.
	var name = socket.request._query["name"];

	console.log(name, "connected");
	online[socket.id] = {name: name}
	io.sockets.emit("online", online);

	socket.on('clicked', function(msg) {
	io.sockets.emit("clicked", msg);
	});

	socket.on('message', function(msg) {
	var message = {
	name: online[socket.id].name,
	contents: msg.contents,
	room: msg.room
	}
	io.to(msg.room).emit("message", message);
	});

	socket.on('join', function(room) {
	socket.join(room);
	});

	socket.on('leave', function(room) {
	socket.leave(room);
	});

	socket.on('disconnect', function() {
	delete online[socket.id];
	});

	});