Project initialization
The first goal is to set up a simple HTML webpage that serves out a form and a list of messages. We’re going to use the Node.JS web framework express
to this end. Make sure Node.JS is installed.
First let’s create a package.json
manifest file that describes our project. I recommend you place it in a dedicated empty directory (I’ll call mine socket-chat-example
).
- CommonJS
- ES modules
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"type": "commonjs",
"dependencies": {}
}
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"type": "module",
"dependencies": {}
}
The "name" property must be unique, you cannot use a value like "socket.io" or "express", because npm will complain when installing the dependency.
Now, in order to easily populate the dependencies
property with the things we need, we’ll use npm install
:
npm install express@4
Once it's installed we can create an index.js
file that will set up our application.
- CommonJS
- ES modules
const express = require('express');
const { createServer } = require('node:http');
const app = express();
const server = createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hello world</h1>');
});
server.listen(3000, () => {
console.log('server running at http://localhost:3000');
});
import express from 'express';
import { createServer } from 'node:http';
const app = express();
const server = createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hello world</h1>');
});
server.listen(3000, () => {
console.log('server running at http://localhost:3000');
});
This means that:
- Express initializes
app
to be a function handler that you can supply to an HTTP server (as seen in line 5). - We define a route handler
/
that gets called when we hit our website home. - We make the http server listen on port 3000.
If you run node index.js
you should see the following:
And if you point your browser to http://localhost:3000
:
So far, so good!
- CommonJS
- ES modules
You can run this example directly in your browser on:
You can run this example directly in your browser on: