[Release] SIOChat

Inori · 12-16-2015, 01:56 PM

Recently, I've been doing a lot of JS, and with that, I've started using Socket.IO, which makes it super easy to make local connections. After messing with it for a while, I decided to make a chat client.

SIOChat is super portable. As long as you have node and npm installed, you can take it anywhere and set it up with one command.

Spoiler: source
index.html (passed to client on join):
Code:
<html>
	<head>
		<title>SIOChat</title>
		<link rel="icon" type="img/ico" href="img/favicon.ico">
		<style type='text/css'>
			body,form{font:16px Helvetica,Arial}#messages,*{margin:0;padding:0}*{box-sizing:border-box}body{color:#f0f0f0;background:-webkit-linear-gradient(top,#103451 0,#b23737 100%);background:linear-gradient(to bottom,#103451 0,#b23737 100%)}form{background:#000;position:fixed;padding:3px;width:100%;bottom:0}form input{border-radius:5px;margin-left:1.3%;margin-right:.5%;padding:4px;width:90%}form button{border-radius:10px;background:-webkit-radial-gradient(center,ellipse cover,#a90329 0,#8f0222 44%,#6d0019 100%);background:radial-gradient(ellipse at center,#a90329 0,#8f0222 44%,#6d0019 100%);padding:7px;width:7%;border:0}#chatroom{overflow-y:scroll;height:90%}#chatroom::-webkit-scrollbar{display:none}#messages{list-style-type:none}#messages li{box-shadow:0 0 5px 2px rgba(0,0,0,.35);background:#919191;border-radius:7px;padding:10px;opacity:.6;margin:3px;border:0}#messages li:nth-child(odd){background:#666}
		</style>
		<script src='https://cdn.socket.io/socket.io-1.2.0.js'></script>
		<script src='http://code.jquery.com/jquery-1.11.1.js'></script>
		<script>
			var socket=io();

			var pfx='';
			var missed=0;
			var name=prompt('Enter a nickname','Guest');
			
			var vis=(function(){
				var stateKey, eventKey, keys={
					hidden: "visibilitychange",
					webkitHidden: "webkitvisibilitychange",
					mozHidden: "mozvisibilitychange",
					msHidden: "msvisibilitychange"
				};
				for(stateKey in keys){
					if(stateKey in document){
						eventKey=keys[stateKey];
						break;
					}
				}
				return function(c){
					if(c){
						document.addEventListener(eventKey,c);
					}
					return !document[stateKey];
				}
			})();


			function update(){
					if(missed>0){
						document.title='('+missed+') SIOChat';
					}else if(vis()){
						document.title='SIOChat';
						missed=0;
					}
				setTimeout('update()',1000);
			}
			update();

			$('form').submit(function(){
				socket.emit('chat message',name+': '+$('#m').val());
				$('#m').val('');
				return false;
			});

			socket.on('chat message',function(msg){
				$('#messages').append($('<li>').text(msg));
				document.getElementById('bottom').scrollIntoView(true);
				vis()?null:missed++;
			});
		</script>
	</head>
	<body>
		<div id='chatroom'>
			<ul id='messages'></ul>
			<a id='bottom'/>
		</div>
		<form action=''>
			<input id='m' autocomplete='off'/><button>Send</button>
		</form>
	</body>
</html>


index.js (server):
Code:
var app=require('express')();
var http=require('http').Server(app);
var io=require('socket.io')(http);
var chalk=require('chalk');

var prt=process.argv[2]===undefined?8080:process.argv[2];
var online=0;

app.get('/',function(req,res){
	res.sendFile(__dirname+'/index.html');
});

io.on('connection',function(socket){
	online++;
	console.log(chalk.green('joined  |',chalk.cyan(online),'online'));

	socket.on('chat message',function(msg){
		io.emit('chat message',msg);
		console.log(chalk.magenta('message |',msg));
	});
	
	socket.on('disconnect',function(){
		online--;
		console.log(chalk.red('left	|',chalk.cyan(online),'online'));
	});
});

http.listen(prt,function(){
	console.log(chalk.yellow('SIOChat listening on port',chalk.cyan(prt)));
});

The full code (which you need for the npm install) is on github, or you can check out my github pages site for more documentation and a nicer look.

[Release] SIOChat
Author Message