Socket Talk

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('')(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){
  • ').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:


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