Teaching Guide

Elvenware Logo


Socket Talk

Let's create a simple chat application.

Create App.js

This is the most stripped down Express server I could create and still support the tools we need to create a socket application with a reasonable architecture:

var express = require('express');
var app = express();
var http = require('http').Server(app);
var path = require('path');
var io = require('socket.io')(http);

app.use(express.static(path.join(__dirname, 'public')));

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

io.on('connection', function(socket){
    console.log('connection called');    
    socket.on('chatMessage', function(msg){
        console.log('Chat socket message: ', msg);        
        if (msg === "") {
            msg="Empty message sent.";
        io.sockets.emit('chatMessage', msg);

http.listen(30025, function(){
  console.log('listening on *:30025');

Notice this line:

app.use(express.static(path.join(__dirname, 'public')));

It gives us the ability to serve pages out of a directory called public. This folder is a subdirectory of the project root. If the project is in /src then public is in /src/public.


We need code to accept

socket = io('localhost');
socket.on('chatMessage', function(msg){

And here is how we send messages:

socket.emit('chatMessage', $('#myInput').val());


I'm placing both the HTML and app.js in the root. Here is the HTML:

<!doctype html>
    <title>Socket.IO chat</title>
    <link href="css/Style.css" rel="stylesheet" type="text/css">
    <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 src="Control.js"></script>

    <div class="data">
        <input id="myInput" autocomplete="off" />
        <button id="chatButton">Chat</button>

    <div id='messageDiv'>
        <ul id="info">



I put the CSS in a file called Styles.css and placed it in the public/css folder. It looks like this:

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 

body { 
    font: 21px sans; 

.data { 
    background: #ABA; 
    padding: 3px; 
    width: 100%; 
    border-radius: 12px;

.data input { 
    border: 0;    
    padding: 10px; 
    padding-top: 12px; 
    width: 90%; 
    margin-right: .5%; 
    margin-left: .5%; 

#chatButton { 
    width: 8.1%; 
    background: #787; 
    border: none; 
    padding: 5px; 
    color: white;
    font: 21px sans; 

#messageDiv {
    background-color: #bdb;
    border-radius: 12px;

#info { 
    list-style-type: none; 
    margin: 0; 
    padding: 1;

#info li { 
    border-radius: 12px;
    padding: 5px 10px; 

#info li:nth-child(odd) { 
    background: #bcb; 

Turn it In

Create a Control.js file that works.

It should look something like this:


We will also integrate chat into the final. At this stage, enter text can be only done in the GameListener.