Socket.io with TypeScript

Using Socket.io with TypeScript can help catch errors early and provide better development experience with type checking.

Server-side Example (TypeScript):

1. Setup TypeScript:

npm install typescript @types/node @types/socket.io --save-dev

1. Create tsconfig.json:

{ "compilerOptions": { "target": "ES6", "module": "commonjs", "strict": true, "esModuleInterop": true } }

1. Create a TypeScript server (server.ts):

import express from 'express'; import http from 'http'; import socketIo from 'socket.io'; const app = express(); const server = http.createServer(app); const io = socketIo(server); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); io.on('connection', (socket) => { console.log('A user connected'); socket.on('chat message', (msg: string) => { io.emit('chat message', msg); }); socket.on('disconnect', () => { console.log('User disconnected'); }); }); server.listen(3000, () => { console.log('Server is listening on port 3000'); });

Client-side Example (TypeScript):

import io from 'socket.io-client';

const socket = io();

const form = document.querySelector('form') as HTMLFormElement;
const input = document.querySelector('input') as HTMLInputElement;
const messages = document.querySelector('#messages') as HTMLUListElement;

form.addEventListener('submit', (e) => {
  e.preventDefault();
  socket.emit('chat message', input.value);
  input.value = '';
  return false;
});

socket.on('chat message', (msg: string) => {
  const item = document.createElement('li');
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});