Part 4: Building the browser client

Jump to bottom Edit New page

Sergi Almar edited this page Nov 22, 2013 · 4 revisions

Create a file in your public directory called chat.html(node.js will serve it as a static resource), and add the following HTML5 skeleton:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Mobos Chat</title>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	
 
</body>
<script src="/socket.io/socket.io.js" ></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</html>

Add a input to write the message, a button and a div to display the chat messages.
Create a file called chat.js inside the javascript folder to encapsulate the socket.io logic

  var socket = io.connect('http://localhost');
  socket.on('yourevent', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });