├── .project
├── readme
├── irc_gateway.js
└── irc_client.html


/.project:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <projectDescription>
 3 | 	<name>gruppe_beta</name>
 4 | 	<comment></comment>
 5 | 	<projects>
 6 | 	</projects>
 7 | 	<buildSpec>
 8 | 	</buildSpec>
 9 | 	<natures>
10 | 	</natures>
11 | </projectDescription>
12 | 


--------------------------------------------------------------------------------
/readme:
--------------------------------------------------------------------------------
 1 | A simple IRC-Webclient based on node.js and socket.io. Thus it uses websockets
 2 | for the communication between node.js server and the browser.
 3 | 
 4 | Most of the functionality is implemented to be run at the client side. This
 5 | enshures that user can only break their own client if they try to modify them.
 6 | Furthermore this means less stress for the server.
 7 | 
 8 | Start with:
 9 | node irc_gateway.js [port]
10 | 


--------------------------------------------------------------------------------
/irc_gateway.js:
--------------------------------------------------------------------------------
 1 | var net = require("net");
 2 | var app = require('http').createServer(handler)
 3 | , io = require('socket.io').listen(app)
 4 | , fs = require('fs')
 5 | 
 6 | 
 7 | var port = process.argv.length == 3 ? Number( process.argv[2] ) : 8080;
 8 | 
 9 | /**
10 |  * \brief Webserver to deliver client files.
11 |  * @param req the request
12 |  * @param res the response
13 |  */
14 | app.listen( port );
15 | function handler (req, res) {
16 | 	fs.readFile(__dirname + '/irc_client.html',
17 | 			function (err, data) {
18 | 				if (err) {
19 | 					res.writeHead(500);
20 | 					return res.end('Error loading index.html');
21 | 				}
22 | 				res.setHeader( 'Content-Type', 'text/html;charset=UTF-8' );
23 | 				res.writeHead(200);
24 | 				res.end(data);
25 | 			});
26 | }
27 | 
28 | 
29 | /**
30 |  * \brief This function handles the connection to the clients.
31 |  */
32 | io.sockets.on('connection', function (webSocket) {
33 | 	var tcpStream = new net.Stream;
34 | 	tcpStream.setTimeout(0);
35 | 	tcpStream.setEncoding("ascii");
36 | 	webSocket.on('message', function (message) {
37 | 		try
38 | 		{
39 | 			if(message.split(' ')[0] == 'CONNECT')
40 | 			{
41 | 				//connect to the given IRC server via TCP
42 | 				var host = message.split(' ')[1].split(':')[0];
43 | 				var port = message.split(' ')[1].split(':')[1];
44 | 				console.log( 'connecting to '+host+':'+port+'…' );
45 | 				tcpStream.destroy();
46 | 				tcpStream.connect( port, host );
47 | 			}
48 | 			else
49 | 			{
50 | 				//forward message to the remote server via TCP
51 | 				tcpStream.write(message);
52 | 			}
53 | 		}
54 | 		catch (e)
55 | 		{
56 | 			webSocket.send(e);
57 | 		}
58 | 	});
59 | 	/**
60 | 	 * \brief this function closes the connection to the IRC server when the connection to the client is closed.
61 | 	 */
62 | 	webSocket.on('disconnect', function () {
63 | 		tcpStream.end();
64 | 	});
65 | 
66 | 	/**
67 | 	 * \brief This function forwards error messages to the client
68 |          */
69 | 	tcpStream.addListener("error", function (error){
70 | 		//forward error message to websocket
71 | 		webSocket.send(error+"\r\n");
72 | 	});
73 | 	/**
74 | 	 * \brief This function handles the data received from the IRC server.
75 | 	 **/
76 | 	tcpStream.addListener("data", function (data) {
77 | 		//forward data to websocket
78 | 		webSocket.send(data);
79 | 	});
80 | 	
81 | 	
82 | 	/**
83 | 	 * \brief This function notifies the client when the connection to the server is closed.
84 | 	 **/
85 | 	tcpStream.addListener("close", function (){
86 | 		webSocket.send("Server closed connection. You are offline. Use /connect to connect.");
87 | 	});
88 | });
89 | 
90 | 
91 | 
92 | 
93 | 


--------------------------------------------------------------------------------
/irc_client.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>JS IRC Client</title>
  5 | </head>
  6 | 
  7 | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  8 | <script type="text/javascript" src="/socket.io/socket.io.js"></script>
  9 | <style type="text/css">
 10 | 	ul#channel li {
 11 | 		cursor: pointer;
 12 | 	}
 13 | 	div {
 14 | 		padding: 0px;
 15 | 		margin: 0px;
 16 | 	}
 17 | 	ul {
 18 | 		font-size: smaller;
 19 | 		display: block;
 20 | 		list-style-type: none;
 21 | 	}
 22 | 	div#ui ul {
 23 | 		height: 500px;
 24 | 		overflow-y: scroll;
 25 | 		overflow-x: hidden;
 26 | 		margin: 0px;
 27 | 	}
 28 | 	div#userlist {
 29 | 		width: 18%;
 30 | 		height: 100%;
 31 | 		background-color: #bbbbbb;
 32 | 		display: table-cell;
 33 | 		overflow-y: scroll;
 34 | 		overflow-x: hidden;
 35 | 	}
 36 | </style>
 37 | <script type="text/javascript">
 38 | 
 39 | var current_channel = 'server';
 40 | 
 41 | function parse_msg( text ) {
 42 | 	var data = text.split( " ", 4 );
 43 | 	if ( data.length == 4 && data[1] == 'PRIVMSG' ) {
 44 | 		var user = text.split( '!~' )[0].replace( ':', '' );
 45 | 		var message = text.replace( /^:[^:]*:/, '' ).replace( /[\n\r]/g, '' );
 46 | 		var receiver = null;
 47 | 		/* The person we want to answer (channel or user). */
 48 | 		if ( data[2].charAt(0) == '#' ) {
 49 | 			receiver = data[2]; // channel
 50 | 		} else {
 51 | 			receiver = user; // user
 52 | 		}
 53 | 		return { 
 54 | 				'valid'    : 1, 
 55 | 				'user'     : user, 
 56 | 				'channel'  : data[2], 
 57 | 				'receiver' : receiver, 
 58 | 				'message'  : message
 59 | 			}
 60 | 	} else {
 61 | 		// not a valid message
 62 | 		return { 'valid' : 0 }
 63 | 	}
 64 | }
 65 | 
 66 | 
 67 | //var socket = io.connect( window.location.host );
 68 | var socket = io.connect( window.location.host );
 69 | 
 70 | $(document).ready( function () {
 71 | 	$("#ui").hide();
 72 | 	$('#connect').css( 'padding-top', 
 73 | 		( ( $(window).innerHeight() - $('#connect').outerHeight() ) / 2 ) + 'px' );
 74 | 
 75 | 	$("#connect-btn").click( function(e) {
 76 | 		e.preventDefault();
 77 | 		/* UI things… */
 78 | 		$("#connect").hide();
 79 | 		$("#ui").show();
 80 | 		$('#top-box').height( $(window).innerHeight() - $('#bottom-box').outerHeight() - 25 );
 81 | 		$('#top-box ul').height( $('#top-box').innerHeight() - 2 );
 82 | 
 83 | 
 84 | 		/* Connect to IRC. */
 85 | 		socket.send("CONNECT "+ $("#server").val());
 86 | 		socket.send("NICK "+ $("#nick").val() +"\n");
 87 | 		socket.send("USER "+ $("#nick").val() + ' '
 88 | 			+ $("#server").val().split(":")[0] 
 89 | 			+ " blubb :"+$("#nick").val() +"\n");
 90 | 
 91 | 		/* Add handler to input form. */
 92 | 		$('#bottom-box form').submit( function() {
 93 | 			var msg = $('#msginput').val();
 94 | 			$('#msginput').val('');
 95 | 			/* Check for commands. */
 96 | 
 97 | 			/*	/join 		*/
 98 | 			if ( msg.match( /^\/join .+/i ) ) {
 99 | 				socket.send( 'JOIN ' + msg.split(' ')[1] + "\r\n" );
100 | 
101 | 			/*	/nick 		*/
102 | 			} else 	if ( msg.match( /^\/nick .+/i ) ) {
103 | 				if (msg.split(' ')[1].match(/^([a-zA-Z0-9]|[-[]\\`\^{}])+$/))
104 | 				{
105 | 					socket.send('NICK ' + msg.split(' ')[1] + "\r\n" ); 
106 | 					$("#nick").val(msg.split(' ')[1]); //save nick for recnnects...
107 | 				}
108 | 				else
109 | 				{
110 | 					showMsg("Error: Your Nickname contains illegal letters.", current_channel);
111 | 				}
112 | 				
113 | 			/*	/help		*/
114 | 			} else 	if ( msg.match( /^\/help.*/i ) ) {
115 | 				showHelp();
116 | 
117 | 			/*	/connect	*/
118 | 			} else 	if ( msg.match( /^\/connect .+/i ) ) {
119 | 				socket.send("CONNECT "+ msg.split(' ')[1]);
120 | 				socket.send("NICK "+ $("#nick").val() +"\n");
121 | 				socket.send("USER "+ $("#nick").val() + ' '
122 | 					+ $("#server").val().split(":")[0] 
123 | 					+ " blubb :"+$("#nick").val() +"\n");
124 | 
125 | 			/*	/part		*/
126 | 			} else 	if ( msg.match( /^\/part( .+)?$/i ) ) {
127 | 				if(msg.split(' ')[1])  	//channel given
128 | 					socket.send('PART ' + msg.split(' ')[1] + "\r\n" ); 
129 | 				else			//no channel given -> use current channel
130 | 					socket.send('PART ' + current_channel + "\r\n" ); 
131 | 
132 | 			/*	/query		*/
133 | 			} else 	if ( msg.match( /^\/query .+/i ) ) {
134 | 				var username = msg.split(' ')[1];
135 | 				if ($('#'+username).length == 0)
136 | 				{
137 | 					switch_channel( username );
138 | 					$('#channel').append( '<li onclick="switch_channel($(this).text() );" id="' 
139 | 						+ username + '">' + username + '</li>' );
140 | 					showMsg('Private conversation with '+username, current_channel);
141 | 				}
142 | 
143 | 			/*	/msg		*/
144 | 			} else 	if ( msg.match( /^\/msg .+ .+/i ) ) {
145 | 				var username = msg.split(' ')[1];
146 | 				var message = msg.substr(msg.substr(5).indexOf(' ')+6);
147 | 				socket.send("PRIVMSG "+username+" :"+message+"\r\n");
148 | 				showMsg($("#nick").val()+ " -> "+ username +" : " + message, "server");
149 | 				showMsg($("#nick").val()+ " : " + message, username);
150 | 
151 | 			/*	unknown command	*/
152 | 			} else if ( msg.match( /^\/.*/i ) ) {
153 | 				showMsg( "Error: Unknown command or too few arguments. Type /help for help.", current_channel );
154 | 
155 | 			} else {
156 | 				/* No command. Send as message to current channel */
157 | 				socket.send("PRIVMSG "+current_channel+" :"+msg+"\r\n");
158 | 				showMsg($("#nick").val()+" : " + msg, current_channel);
159 | 			}
160 | 			return false;
161 | 		} );
162 | 	});
163 | 
164 | });
165 | 
166 | 
167 | function showMsg( msg, channel ){
168 | 	msg = $('<div/>').text(msg).html();  // escape msg
169 | 	$("#messages").append( '<li '
170 | 			+ ( ( channel != current_channel ) ? 'style="display:none;"' : '' ) +
171 | 			' class="' + channel.replace( /^#/, '' ) + '">' + msg + "</li>").ready(function(){ 
172 | 		var scrollbox = document.getElementById('messages');
173 | 		scrollbox.scrollTop = scrollbox.scrollHeight;
174 | 	});
175 | }
176 | 
177 | 
178 | function switch_channel( c ) {
179 | 
180 | 	$('#messages li').css( 'display', 'none' );
181 | 	$('li.' + c.replace( /^#/, '' ) ).css( 'display', 'block' );
182 | 	current_channel = c;
183 | 
184 | }
185 | 
186 | 
187 | function showHelp(){
188 | 	showMsg("*************************************", current_channel);
189 | 	showMsg("Available commands:", current_channel);
190 | 	showMsg("/join <channel>		: Joins the given Channel", current_channel);
191 | 	showMsg("/nick <nickname>		: Changes the nick name to the given one", current_channel);
192 | 	showMsg("/part [<channel>]		: Leaves the given channel or the current one if no channel is given", current_channel);
193 | 	showMsg("/connect <hostname>:<port>	: Connects to the given server (closes any open connection)", current_channel);
194 | 	showMsg("/query <user>			: Opens a private chat with the given user", current_channel);
195 | 	showMsg("/msg <user> <message>		: Sends a message to the given user without opening a new chat.", current_channel);
196 | 	showMsg("*************************************"	, current_channel);
197 | }
198 | 
199 | 
200 | socket.on('message', function (data) {
201 | 	var lines = data.split( "\r\n" );
202 | 	for ( var i = 0; i < lines.length; i++ )  {
203 | 		// play ping pong
204 | 		if ( lines[i].match( /^PING.*/ ) ) {
205 | 			socket.send( 'PONG ' + lines[i].split(' ')[1] + '\r\n' );
206 | 		} else if ( lines[i] != ''  ) {
207 | 			var msg = parse_msg( lines[i] );
208 | 			if ( msg.valid ) {
209 | 				// check if channel exists. If not -> add it as a new one (query)
210 | 				if ($('#'+msg.receiver.replace(/^#/, '')).length == 0)
211 | 					$('#channel').append( '<li onclick="switch_channel($(this).text() );" id="' 
212 | 						+ msg.receiver + '">' + msg.receiver + '</li>' );
213 | 				showMsg( msg.user + ' : ' + msg.message, msg.receiver );
214 | 			} else {
215 | 				msg = lines[i].split(' ');
216 | 				if ( msg.length > 2 && msg[1] == 'JOIN' ) {
217 | 					if(msg[0].slice(1, msg[0].indexOf('!'))== $('#nick').val())
218 | 					{
219 | 						// own JOIN message -> open channel
220 | 						switch_channel( msg[2] );
221 | 						$('#channel').append( '<li onclick="switch_channel( $(this).text() );" id="' 
222 | 							+ msg[2].replace( /^#/, '' ) + '">' + msg[2] + '</li>' );
223 | 					}
224 | 					else
225 | 					{
226 | 						// TODO: other user's JOIN -> update user list
227 | 					}
228 | 
229 | 				} else if ( msg.length > 2 && msg[1] == 'PART' ) {
230 | 					if(msg[0].slice(1, msg[0].indexOf('!')) == $('#nick').val())
231 | 					{
232 | 						// own PART message -> leave channel
233 | 						switch_channel( 'server' );
234 | 						$(msg[2]).remove();
235 | 					}
236 | 					else
237 | 					{
238 | 						//TODO: other user's PART message -> update user lists of affected channels
239 | 					}
240 | 				} else if ( msg.length > 4 && msg[1] == '332' ) { /* Channel motd */
241 | 					showMsg( lines[i].replace( /^:[^:]*:/, '' ), msg[3] );
242 | 				} else if ( msg.length > 4 && msg[1] == '353' ) { /* User in channel */
243 | 					showMsg( 'User in channel: ' + lines[i].split(':')[2], msg[4] );
244 | 				} else if ( msg.length > 2 && msg[1] == 'MODE' ) { /* Changed user mode. */
245 | 					showMsg( lines[i].replace( /^.* MODE /, 'Mode ' ) + ' by ' +
246 | 							msg[0].replace( /^:/, '' ).replace( /!.*$/, '' ), msg[2]);
247 | 				} else {
248 | 					showMsg( lines[i], 'server' );
249 | 				}
250 | 			}
251 | 		}
252 | 	}
253 | });
254 | 
255 | //TODO: add a cool user list for the channels
256 | 
257 | </script>
258 | <body style="padding: 0px; margin:0px;">
259 | 	<div id="connect" style="text-align: center;">
260 | 		<form>
261 | 			<label for="server">Server: </label>
262 | 			<input type="text" id="server" required value="irc.freenode.net:6667" /><br />
263 | 			<input type="text" id="nick" required placeholder="Your nickname here" />
264 | 			<input type="submit" id="connect-btn" value="connect" />
265 | 		</form>
266 | 	</div>
267 | 	<div id="ui" style="width: 100%; ">
268 | 		<div id="top-box" style="display: table; width: 100%;">
269 | 			<div style="display: table-row; width: 100%;">
270 | 				<div style="display: table-cell;">
271 | 					<ul id="messages">
272 | 						<li>Welcome to IRC webclient</li>
273 | 					</ul>
274 | 				</div>
275 | 				<div id="userlist">
276 | 					<ul id="channel">
277 | 						<li id="server" onclick="switch_channel( $(this).text() );">server</li>
278 | 					</ul>
279 | 				</div>
280 | 			</div>
281 | 		</div>
282 | 		<div id="bottom-box">
283 | 			<form action="#">
284 | 				<input type="text" id="msginput" style="width: 82%" />
285 | 				<input type="submit" id="postmsg" />
286 | 		</form>
287 | 		</div>
288 | 	</div>
289 | </body>
290 | </html>
291 | 


--------------------------------------------------------------------------------