expressjs.com
socket.io
Set up a simple Node project:
npm init
npm install --save express socket.io
npm install --save-dev nodemon
touch index.js
# edit package.json to add a start script
#
# "scripts": {
# "test": "echo \"Error: no test specified\" && exit 1",
# "start": "nodemon index"
# },index.js
// dependencies
const express = require('express');
const socketio = require('socket.io');
const http = require('http');
// create an express app instance
// and an HTTP server that listens for it.
const app = express();
const server = http.Server(app);
// start the server
server.listen(3000, () => {
console.log(`express is running on port 3000`);
});
Now we have an Express app listening on port 3000 that does nothing but send 404s, so we need to add routes.
Routes are how we say:
"When a user asks for this, give them that"
Create and use an Express Router
// create a router and configure some routes
const router = new express.Router();
router.get('/', (req, res) => {
res.status(200).send('Hello World');
});
router.post('/', (req, res) => {
res.status(201).send('POST OK');
});
// use the router in the / namespace
app.use('/', router);Routes with parameters
// a route with a parameter
router.get('/hello/:name', (req, res) => {
res.status(200).send(`Hello ${req.params.name}`);
});// use middleware to log all requests
app.use('/', (req, res, next) => {
console.log(`${new Date().toISOString()} ${req.method} ${req.path}`);
next();
});
// use a router so the app knows what it's doing
app.use('/', router);A lot of the time you'll utilise third party middleware
const morgan = require('morgan');
// morgan for logging
app.use('/', morgan());
// express.static to serve our static files
app.use('/static', express.static('client'));Respond with a file using res.sendFile()
// send index.html
router.get('/', (req, res) => {
res.sendFile(__dirname + '/client/index.html', {}, (err) => {
if (err) {
res.status(err.status).end();
}
});
});Pass the Express server to socket.io
// create an express app instance
// and an HTTP server that listens for it.
// pass the server to socket.io
const app = express();
const server = http.Server(app);
const io = socketio(server);Some basic JS to log things to the page
// log a string
// we have a div with id #console on the page
function log(str) {
const pre = document.createElement('pre');
pre.textContent = str;
document.querySelector('#console').appendChild(pre);
}
log('now you have a console');
Connect and start logging events
// in our index.html we're adding
// <script src="/socket.io/socket.io.js"></script>
// which socket.io automatically provides us via Express
// meanwhile, in our client JS, we'll connect to that and
// start logging events...
const socket = io();
socket.on('connect', () => {
log('connected to socket');
});
socket.on('disconnect', () => {
log('disconnected from socket');
});Log connections on the server
const io = socketio(server);
// listen for socket events
io.on('connection', (socket) => {
console.log('socket connected');
});Emit events from the server to the client
const io = socketio(server);
// listen for socket events
io.on('connection', (socket) => {
console.log('socket connected');
// `socket` argument is the socket connection
// to that specific client
socket.emit('message', 'hey there');
});
And log them on the client
// messages. log them.
socket.on('message', str => {
log(str);
});Now let's emit a message to ALL clients
// listen for socket events
io.on('connection', (socket) => {
console.log('socket connected');
// `socket` is our connection to that user
socket.emit('message', 'hey there');
// tell everybody that we just connected
io.emit('message', 'someone connected');
});Emit a message to all other clients, with broadcast
// listen for socket events
io.on('connection', (socket) => {
console.log('socket connected');
// `socket` is our connection to that user
socket.emit('message', 'hey there');
// tell everybody else that we just connected
socket.broadcast.emit('message', 'someone connected');
});Emit different events to do different things.
// listen for socket events
io.on('connection', (socket) => {
console.log('socket connected');
// `socket` is our connection to that user
socket.emit('message', 'hey there');
socket.emit('alert', 'KAPOW');
// tell everybody else that we just connected
socket.broadcast.emit('message', 'someone connected');
});// this won't annoy anybody
socket.on('alert', (str) => {
alert(str)
});Let's emit an event from the client to the server
// server
// listen for socket events
io.on('connection', (socket) => {
socket.on('ayo', () => {
console.log('ayo!');
});
});// client
document.querySelector('button').addEventListener('click', (evt) => {
socket.emit('ayo');
});Client to server and back again
// server
// listen for socket events
io.on('connection', (socket) => {
socket.on('ayo', (payload, callback) => {
console.log('ayo!');
callback('right back at you');
});
});// client
document.querySelector('button').addEventListener('click', (evt) => {
socket.emit('ayo', {}, response => {
log(response);
});
});A simple abstraction for grouping connections
// listen for socket events
io.on('connection', (socket) => {
// join a room and tell everyone.
socket.join('secretlol');
io.to('secretlol').emit('message', {
str: 'somebody joined secretlol',
});
// or you could broadcast...
socket.broadcast.to('secretlol').emit('message', {
str: 'someone else joined secretlol',
});
});