Socket Talk

Elvenware Logo

TOC

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.

Control.js

We need code to accept

socket = io('localhost');
socket.on('chatMessage', function(msg){
     $('#info').prepend($('
  • ').text(msg)); });
  • And here is how we send messages:

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

    The HTML

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

    
    
      
        Socket.IO chat
        
        
        
        
      
      
    
        
    • Start

    The CSS

    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:

    look

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