chore(release): 4.7.5

Diff: https://github.com/socketio/socket.io/compare/4.7.4...4.7.5

.github/ISSUE_TEMPLATE.md

@@ -1,32 +0,0 @@
-
-**Note**: for support questions, please use one of these channels: [stackoverflow](http://stackoverflow.com/questions/tagged/socket.io) or [slack](https://socketio.slack.com)
-
-For bug reports and feature requests for the **Swift client**, please open an issue [there](https://github.com/socketio/socket.io-client-swift).
-
-For bug reports and feature requests for the **Java client**, please open an issue [there](https://github.com/socketio/socket.io-client-java).
-
-### You want to:
-
-* [x] report a *bug*
-* [ ] request a *feature*
-
-### Current behaviour
-
-*What is actually happening?*
-
-### Steps to reproduce (if the current behaviour is a bug)
-
-**Note**: the best way (and by that we mean **the only way**) to get a quick answer is to provide a failing test case by forking the following [fiddle](https://github.com/socketio/socket.io-fiddle).
-
-### Expected behaviour
-
-*What is expected?*
-
-### Setup
-- OS:
-- browser:
-- socket.io version:
-
-### Other information (e.g. stacktraces, related issues, suggestions how to fix)
-
-

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,61 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: 'to triage'
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+
+Please fill the following code example:
+
+Socket.IO server version: `x.y.z`
+
+*Server*
+
+```js
+import { Server } from "socket.io";
+
+const io = new Server(3000, {});
+
+io.on("connection", (socket) => {
+  console.log(`connect ${socket.id}`);
+
+  socket.on("disconnect", () => {
+    console.log(`disconnect ${socket.id}`);
+  });
+});
+```
+
+Socket.IO client version: `x.y.z`
+
+*Client*
+
+```js
+import { io } from "socket.io-client";
+
+const socket = io("ws://localhost:3000/", {});
+
+socket.on("connect", () => {
+  console.log(`connect ${socket.id}`);
+});
+
+socket.on("disconnect", () => {
+  console.log("disconnect");
+});
+```
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Platform:**
+ - Device: [e.g. Samsung S8]
+ - OS: [e.g. Android 9.2]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Ask a Question
+    url: https://github.com/socketio/socket.io/discussions/new?category=q-a
+    about: Ask the community for help

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: 'enhancement'
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -7,10 +7,10 @@
 * [ ] a code change that improves performance
 * [ ] other
 
-### Current behaviour
+### Current behavior
 
 
-### New behaviour
+### New behavior
 
 
 ### Other information (e.g. related issues)

.github/workflows/ci.yml

@@ -0,0 +1,72 @@
+name: CI
+
+on:
+  push:
+  pull_request:
+  schedule:
+    - cron: '0 0 * * 0'
+
+permissions:
+  contents: read
+
+jobs:
+  test-node:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    strategy:
+      matrix:
+        node-version:
+          - 16
+          - 20
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install TypeScript 4.2
+        run: npm i typescript@4.2
+        if: ${{ matrix.node-version == '16' }}
+
+      - name: Run tests
+        run: npm test
+        env:
+          CI: true
+
+  build-examples:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    strategy:
+      fail-fast: false
+      matrix:
+        example:
+          - custom-parsers
+          - typescript
+          - webpack-build
+          - webpack-build-server
+          - basic-crud-application/angular-client
+          - basic-crud-application/vue-client
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Build ${{ matrix.example }}
+        run: |
+          cd examples/${{ matrix.example }}
+          npm install
+          npm run build

.gitignore

@@ -10,5 +10,5 @@ benchmarks/*.png
 node_modules
 coverage
 .idea
-dist
-.nyc_output
+.nyc_output
+dist/

.replit

@@ -0,0 +1,2 @@
+language = "nodejs"
+run = "npm start"

.travis.yml

@@ -1,12 +0,0 @@
-language: node_js
-sudo: false
-node_js:
-  - '8'
-  - '10'
-notifications:
-  irc: "irc.freenode.org#socket.io"
-git:
-  depth: 1
-cache:
-  directories:
-    - node_modules

Readme.md

@@ -1,10 +1,7 @@
-
 # socket.io
-
+[![Run on Repl.it](https://repl.it/badge/github/socketio/socket.io)](https://replit.com/@socketio/socketio-minimal-example)
 [![Backers on Open Collective](https://opencollective.com/socketio/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/socketio/sponsors/badge.svg)](#sponsors)
-[![Build Status](https://secure.travis-ci.org/socketio/socket.io.svg?branch=master)](https://travis-ci.org/socketio/socket.io)
-[![Dependency Status](https://david-dm.org/socketio/socket.io.svg)](https://david-dm.org/socketio/socket.io)
-[![devDependency Status](https://david-dm.org/socketio/socket.io/dev-status.svg)](https://david-dm.org/socketio/socket.io#info=devDependencies)
+[![Build Status](https://github.com/socketio/socket.io/workflows/CI/badge.svg)](https://github.com/socketio/socket.io/actions)
 [![NPM version](https://badge.fury.io/js/socket.io.svg)](https://www.npmjs.com/package/socket.io)
 ![Downloads](https://img.shields.io/npm/dm/socket.io.svg?style=flat)
 [![](https://slackin-socketio.now.sh/badge.svg)](https://slackin-socketio.now.sh)
@@ -22,6 +19,10 @@ Some implementations in other languages are also available:
 - [C++](https://github.com/socketio/socket.io-client-cpp)
 - [Swift](https://github.com/socketio/socket.io-client-swift)
 - [Dart](https://github.com/rikulo/socket.io-client-dart)
+- [Python](https://github.com/miguelgrinberg/python-socketio)
+- [.NET](https://github.com/doghappy/socket.io-client-csharp)
+- [Rust](https://github.com/1c3t3a/rust-socketio)
+- [PHP](https://github.com/ElephantIO/elephant.io)
 
 Its main features are:
 
@@ -35,7 +36,7 @@ For this purpose, it relies on [Engine.IO](https://github.com/socketio/engine.io
 
 #### Auto-reconnection support
 
-Unless instructed otherwise a disconnected client will try to reconnect forever, until the server is available again. Please see the available reconnection options [here](https://github.com/socketio/socket.io-client/blob/master/docs/API.md#new-managerurl-options).
+Unless instructed otherwise a disconnected client will try to reconnect forever, until the server is available again. Please see the available reconnection options [here](https://socket.io/docs/v3/client-api/#new-Manager-url-options).
 
 #### Disconnection detection
 
@@ -64,7 +65,7 @@ io.on('connection', socket => {
 
 #### Cross-browser
 
-Browser support is tested in Saucelabs:
+Browser support is tested in Sauce Labs:
 
 [![Sauce Test Status](https://saucelabs.com/browser-matrix/socket.svg)](https://saucelabs.com/u/socket)
 
@@ -84,7 +85,11 @@ This is a useful feature to send notifications to a group of users, or to a give
 ## Installation
 
 ```bash
+// with npm
 npm install socket.io
+
+// with yarn
+yarn add socket.io
 ```
 
 ## How to use
@@ -110,11 +115,19 @@ io.on('connection', client => { ... });
 io.listen(3000);
 ```
 
+### Module syntax 
+
+```js
+import { Server } from "socket.io";
+const io = new Server(server);
+io.listen(3000);
+```
+
 ### In conjunction with Express
 
 Starting with **3.0**, express applications have become request handler
 functions that you pass to `http` or `http` `Server` instances. You need
-to pass the `Server` to `socket.io`, and not the express application
+to pass the `Server` to `socket.io`, not the express application
 function. Also make sure to call `.listen` on the `server`, not the `app`.
 
 ```js
@@ -138,9 +151,24 @@ io.on('connection', () => { /* … */ });
 server.listen(3000);
 ```
 
+### In conjunction with Fastify
+
+To integrate Socket.io in your Fastify application you just need to
+register `fastify-socket.io` plugin. It will create a `decorator`
+called `io`.
+
+```js
+const app = require('fastify')();
+app.register(require('fastify-socket.io'));
+app.io.on('connection', () => { /* … */ });
+app.listen(3000);
+```
+
 ## Documentation
 
-Please see the documentation [here](/docs/README.md). Contributions are welcome!
+Please see the documentation [here](https://socket.io/docs/).
+
+The source code of the website can be found [here](https://github.com/socketio/socket.io-website). Contributions are welcome!
 
 ## Debug / logging
 

SECURITY.md

@@ -0,0 +1,22 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+|---------|--------------------|
+| 4.x     | :white_check_mark: |
+| 3.x     | :white_check_mark: |
+| 2.4.x   | :white_check_mark: |
+| < 2.4.0 | :x:                |
+
+## Reporting a Vulnerability
+
+To report a security vulnerability in this package, please send an email to [@darrachequesne](https://github.com/darrachequesne) (see address in profile) describing the vulnerability and how to reproduce it.
+
+We will get back to you as soon as possible and publish a fix if necessary.
+
+:warning: IMPORTANT :warning: please do not create an issue in this repository, as attackers might take advantage of it. Thank you in advance for your responsible disclosure.
+
+## History
+
+No security vulnerability were reported yet.

docs/API.md

@@ -1,880 +0,0 @@
-
-## Table of Contents
-
-  - [Class: Server](#server)
-    - [new Server(httpServer[, options])](#new-serverhttpserver-options)
-    - [new Server(port[, options])](#new-serverport-options)
-    - [new Server(options)](#new-serveroptions)
-    - [server.sockets](#serversockets)
-    - [server.engine.generateId](#serverenginegenerateid)
-    - [server.serveClient([value])](#serverserveclientvalue)
-    - [server.path([value])](#serverpathvalue)
-    - [server.adapter([value])](#serveradaptervalue)
-    - [server.origins([value])](#serveroriginsvalue)
-    - [server.origins(fn)](#serveroriginsfn)
-    - [server.attach(httpServer[, options])](#serverattachhttpserver-options)
-    - [server.attach(port[, options])](#serverattachport-options)
-    - [server.listen(httpServer[, options])](#serverlistenhttpserver-options)
-    - [server.listen(port[, options])](#serverlistenport-options)
-    - [server.bind(engine)](#serverbindengine)
-    - [server.onconnection(socket)](#serveronconnectionsocket)
-    - [server.of(nsp)](#serverofnsp)
-    - [server.close([callback])](#serverclosecallback)
-  - [Class: Namespace](#namespace)
-    - [namespace.name](#namespacename)
-    - [namespace.connected](#namespaceconnected)
-    - [namespace.adapter](#namespaceadapter)
-    - [namespace.to(room)](#namespacetoroom)
-    - [namespace.in(room)](#namespaceinroom)
-    - [namespace.emit(eventName[, ...args])](#namespaceemiteventname-args)
-    - [namespace.clients(callback)](#namespaceclientscallback)
-    - [namespace.use(fn)](#namespaceusefn)
-    - [Event: 'connect'](#event-connect)
-    - [Event: 'connection'](#event-connect)
-    - [Flag: 'volatile'](#flag-volatile)
-    - [Flag: 'local'](#flag-local)
-    - [Flag: 'binary'](#flag-binary)
-  - [Class: Socket](#socket)
-    - [socket.id](#socketid)
-    - [socket.rooms](#socketrooms)
-    - [socket.client](#socketclient)
-    - [socket.conn](#socketconn)
-    - [socket.request](#socketrequest)
-    - [socket.handshake](#sockethandshake)
-    - [socket.use(fn)](#socketusefn)
-    - [socket.send([...args][, ack])](#socketsendargs-ack)
-    - [socket.emit(eventName[, ...args][, ack])](#socketemiteventname-args-ack)
-    - [socket.on(eventName, callback)](#socketoneventname-callback)
-    - [socket.once(eventName, listener)](#socketonceeventname-listener)
-    - [socket.removeListener(eventName, listener)](#socketremovelistenereventname-listener)
-    - [socket.removeAllListeners([eventName])](#socketremovealllistenerseventname)
-    - [socket.eventNames()](#socketeventnames)
-    - [socket.join(room[, callback])](#socketjoinroom-callback)
-    - [socket.join(rooms[, callback])](#socketjoinrooms-callback)
-    - [socket.leave(room[, callback])](#socketleaveroom-callback)
-    - [socket.to(room)](#sockettoroom)
-    - [socket.in(room)](#socketinroom)
-    - [socket.compress(value)](#socketcompressvalue)
-    - [socket.disconnect(close)](#socketdisconnectclose)
-    - [Flag: 'broadcast'](#flag-broadcast)
-    - [Flag: 'volatile'](#flag-volatile-1)
-    - [Flag: 'binary'](#flag-binary-1)
-    - [Event: 'disconnect'](#event-disconnect)
-    - [Event: 'error'](#event-error)
-    - [Event: 'disconnecting'](#event-disconnecting)
-  - [Class: Client](#client)
-    - [client.conn](#clientconn)
-    - [client.request](#clientrequest)
-
-
-### Server
-
-Exposed by `require('socket.io')`.
-
-#### new Server(httpServer[, options])
-
-  - `httpServer` _(http.Server)_ the server to bind to.
-  - `options` _(Object)_
-    - `path` _(String)_: name of the path to capture (`/socket.io`)
-    - `serveClient` _(Boolean)_: whether to serve the client files (`true`)
-    - `adapter` _(Adapter)_: the adapter to use. Defaults to an instance of the `Adapter` that ships with socket.io which is memory based. See [socket.io-adapter](https://github.com/socketio/socket.io-adapter)
-    - `origins` _(String)_: the allowed origins (`*:*`)
-    - `parser` _(Parser)_: the parser to use. Defaults to an instance of the `Parser` that ships with socket.io. See [socket.io-parser](https://github.com/socketio/socket.io-parser).
-
-Works with and without `new`:
-
-```js
-const io = require('socket.io')();
-// or
-const Server = require('socket.io');
-const io = new Server();
-```
-
-The same options passed to socket.io are always passed to the `engine.io` `Server` that gets created. See engine.io [options](https://github.com/socketio/engine.io#methods-1) as reference.
-
-Among those options:
-
-  - `pingTimeout` _(Number)_: how many ms without a pong packet to consider the connection closed (`60000`)
-  - `pingInterval` _(Number)_: how many ms before sending a new ping packet (`25000`).
-
-Those two parameters will impact the delay before a client knows the server is not available anymore. For example, if the underlying TCP connection is not closed properly due to a network issue, a client may have to wait up to `pingTimeout + pingInterval` ms before getting a `disconnect` event.
-
-  - `transports` _(Array<String>)_: transports to allow connections to (`['polling', 'websocket']`).
-
-**Note:** The order is important. By default, a long-polling connection is established first, and then upgraded to WebSocket if possible. Using `['websocket']` means there will be no fallback if a WebSocket connection cannot be opened.
-
-```js
-const server = require('http').createServer();
-
-const io = require('socket.io')(server, {
-  path: '/test',
-  serveClient: false,
-  // below are engine.IO options
-  pingInterval: 10000,
-  pingTimeout: 5000,
-  cookie: false
-});
-
-server.listen(3000);
-```
-
-#### new Server(port[, options])
-
-  - `port` _(Number)_ a port to listen to (a new `http.Server` will be created)
-  - `options` _(Object)_
-
-See [above](#new-serverhttpserver-options) for available options.
-
-```js
-const server = require('http').createServer();
-
-const io = require('socket.io')(3000, {
-  path: '/test',
-  serveClient: false,
-  // below are engine.IO options
-  pingInterval: 10000,
-  pingTimeout: 5000,
-  cookie: false
-});
-```
-
-#### new Server(options)
-
-  - `options` _(Object)_
-
-See [above](#new-serverhttpserver-options) for available options.
-
-```js
-const io = require('socket.io')({
-  path: '/test',
-  serveClient: false,
-});
-
-// either
-const server = require('http').createServer();
-
-io.attach(server, {
-  pingInterval: 10000,
-  pingTimeout: 5000,
-  cookie: false
-});
-
-server.listen(3000);
-
-// or
-io.attach(3000, {
-  pingInterval: 10000,
-  pingTimeout: 5000,
-  cookie: false
-});
-```
-
-#### server.sockets
-
-  * _(Namespace)_
-
-The default (`/`) namespace.
-
-#### server.serveClient([value])
-
-  - `value` _(Boolean)_
-  - **Returns** `Server|Boolean`
-
-If `value` is `true` the attached server (see `Server#attach`) will serve the client files. Defaults to `true`. This method has no effect after `attach` is called. If no arguments are supplied this method returns the current value.
-
-```js
-// pass a server and the `serveClient` option
-const io = require('socket.io')(http, { serveClient: false });
-
-// or pass no server and then you can call the method
-const io = require('socket.io')();
-io.serveClient(false);
-io.attach(http);
-```
-
-#### server.path([value])
-
-  - `value` _(String)_
-  - **Returns** `Server|String`
-
-Sets the path `value` under which `engine.io` and the static files will be served. Defaults to `/socket.io`. If no arguments are supplied this method returns the current value.
-
-```js
-const io = require('socket.io')();
-io.path('/myownpath');
-
-// client-side
-const socket = io({
-  path: '/myownpath'
-});
-```
-
-#### server.adapter([value])
-
-  - `value` _(Adapter)_
-  - **Returns** `Server|Adapter`
-
-Sets the adapter `value`. Defaults to an instance of the `Adapter` that ships with socket.io which is memory based. See [socket.io-adapter](https://github.com/socketio/socket.io-adapter). If no arguments are supplied this method returns the current value.
-
-```js
-const io = require('socket.io')(3000);
-const redis = require('socket.io-redis');
-io.adapter(redis({ host: 'localhost', port: 6379 }));
-```
-
-#### server.origins([value])
-
-  - `value` _(String|String[])_
-  - **Returns** `Server|String`
-
-Sets the allowed origins `value`. Defaults to any origins being allowed. If no arguments are supplied this method returns the current value.
-
-```js
-io.origins(['https://foo.example.com:443']);
-```
-
-#### server.origins(fn)
-
-  - `fn` _(Function)_
-  - **Returns** `Server`
-
-Provides a function taking two arguments `origin:String` and `callback(error, success)`, where `success` is a boolean value indicating whether origin is allowed or not.  If `success` is set to `false`, `error` must be provided as a string value that will be appended to the server response, e.g. "Origin not allowed".
-
-__Potential drawbacks__:
-* in some situations, when it is not possible to determine `origin` it may have value of `*`
-* As this function will be executed for every request, it is advised to make this function work as fast as possible
-* If `socket.io` is used together with `Express`, the CORS headers will be affected only for `socket.io` requests. For Express you can use [cors](https://github.com/expressjs/cors).
-
-```js
-io.origins((origin, callback) => {
-  if (origin !== 'https://foo.example.com') {
-    return callback('origin not allowed', false);
-  }
-  callback(null, true);
-});
-```
-
-#### server.attach(httpServer[, options])
-
-  - `httpServer` _(http.Server)_ the server to attach to
-  - `options` _(Object)_
-
-Attaches the `Server` to an engine.io instance on `httpServer` with the supplied `options` (optionally).
-
-#### server.attach(port[, options])
-
-  - `port` _(Number)_ the port to listen on
-  - `options` _(Object)_
-
-Attaches the `Server` to an engine.io instance on a new http.Server with the supplied `options` (optionally).
-
-#### server.listen(httpServer[, options])
-
-Synonym of [server.attach(httpServer[, options])](#serverattachhttpserver-options).
-
-#### server.listen(port[, options])
-
-Synonym of [server.attach(port[, options])](#serverattachport-options).
-
-#### server.bind(engine)
-
-  - `engine` _(engine.Server)_
-  - **Returns** `Server`
-
-Advanced use only. Binds the server to a specific engine.io `Server` (or compatible API) instance.
-
-#### server.onconnection(socket)
-
-  - `socket` _(engine.Socket)_
-  - **Returns** `Server`
-
-Advanced use only. Creates a new `socket.io` client from the incoming engine.io (or compatible API) `Socket`.
-
-#### server.of(nsp)
-
-  - `nsp` _(String|RegExp|Function)_
-  - **Returns** `Namespace`
-
-Initializes and retrieves the given `Namespace` by its pathname identifier `nsp`. If the namespace was already initialized it returns it immediately.
-
-```js
-const adminNamespace = io.of('/admin');
-```
-
-A regex or a function can also be provided, in order to create namespace in a dynamic way:
-
-```js
-const dynamicNsp = io.of(/^\/dynamic-\d+$/).on('connect', (socket) => {
-  const newNamespace = socket.nsp; // newNamespace.name === '/dynamic-101'
-
-  // broadcast to all clients in the given sub-namespace
-  newNamespace.emit('hello');
-});
-
-// client-side
-const socket = io('/dynamic-101');
-
-// broadcast to all clients in each sub-namespace
-dynamicNsp.emit('hello');
-
-// use a middleware for each sub-namespace
-dynamicNsp.use((socket, next) => { /* ... */ });
-```
-
-With a function:
-
-```js
-io.of((name, query, next) => {
-  next(null, checkToken(query.token));
-}).on('connect', (socket) => { /* ... */ });
-```
-
-#### server.close([callback])
-
-  - `callback` _(Function)_
-
-Closes the socket.io server. The `callback` argument is optional and will be called when all connections are closed.
-
-```js
-const Server = require('socket.io');
-const PORT   = 3030;
-const server = require('http').Server();
-
-const io = Server(PORT);
-
-io.close(); // Close current server
-
-server.listen(PORT); // PORT is free to use
-
-io = Server(server);
-```
-
-#### server.engine.generateId
-
-Overwrites the default method to generate your custom socket id.
-
-The function is called with a node request object (`http.IncomingMessage`) as first parameter.
-
-```js
-io.engine.generateId = (req) => {
-  return "custom:id:" + custom_id++; // custom id must be unique
-}
-```
-
-### Namespace
-
-Represents a pool of sockets connected under a given scope identified
-by a pathname (eg: `/chat`).
-
-A client always connects to `/` (the main namespace), then potentially connect to other namespaces (while using the same underlying connection).
-
-#### namespace.name
-
-  * _(String)_
-
-The namespace identifier property.
-
-#### namespace.connected
-
-  * _(Object<Socket>)_
-
-The hash of `Socket` objects that are connected to this namespace, indexed by `id`.
-
-#### namespace.adapter
-
-  * _(Adapter)_
-
-The `Adapter` used for the namespace. Useful when using the `Adapter` based on [Redis](https://github.com/socketio/socket.io-redis), as it exposes methods to manage sockets and rooms accross your cluster.
-
-**Note:** the adapter of the main namespace can be accessed with `io.of('/').adapter`.
-
-#### namespace.to(room)
-
-  - `room` _(String)_
-  - **Returns** `Namespace` for chaining
-
-Sets a modifier for a subsequent event emission that the event will only be _broadcasted_ to clients that have joined the given `room`.
-
-To emit to multiple rooms, you can call `to` several times.
-
-```js
-const io = require('socket.io')();
-const adminNamespace = io.of('/admin');
-
-adminNamespace.to('level1').emit('an event', { some: 'data' });
-```
-
-#### namespace.in(room)
-
-Synonym of [namespace.to(room)](#namespacetoroom).
-
-#### namespace.emit(eventName[, ...args])
-
-  - `eventName` _(String)_
-  - `args`
-
-Emits an event to all connected clients. The following two are equivalent:
-
-```js
-const io = require('socket.io')();
-io.emit('an event sent to all connected clients'); // main namespace
-
-const chat = io.of('/chat');
-chat.emit('an event sent to all connected clients in chat namespace');
-```
-
-**Note:** acknowledgements are not supported when emitting from namespace.
-
-#### namespace.clients(callback)
-
-  - `callback` _(Function)_
-
-Gets a list of client IDs connected to this namespace (across all nodes if applicable).
-
-```js
-const io = require('socket.io')();
-io.of('/chat').clients((error, clients) => {
-  if (error) throw error;
-  console.log(clients); // => [PZDoMHjiu8PYfRiKAAAF, Anw2LatarvGVVXEIAAAD]
-});
-```
-
-An example to get all clients in namespace's room:
-
-```js
-io.of('/chat').in('general').clients((error, clients) => {
-  if (error) throw error;
-  console.log(clients); // => [Anw2LatarvGVVXEIAAAD]
-});
-```
-
-As with broadcasting, the default is all clients from the default namespace ('/'):
-
-```js
-io.clients((error, clients) => {
-  if (error) throw error;
-  console.log(clients); // => [6em3d4TJP8Et9EMNAAAA, G5p55dHhGgUnLUctAAAB]
-});
-```
-
-#### namespace.use(fn)
-
-  - `fn` _(Function)_
-
-Registers a middleware, which is a function that gets executed for every incoming `Socket`, and receives as parameters the socket and a function to optionally defer execution to the next registered middleware.
-
-Errors passed to middleware callbacks are sent as special `error` packets to clients.
-
-```js
-io.use((socket, next) => {
-  if (socket.request.headers.cookie) return next();
-  next(new Error('Authentication error'));
-});
-```
-
-#### Event: 'connect'
-
-  - `socket` _(Socket)_ socket connection with client
-
-Fired upon a connection from client.
-
-```js
-io.on('connect', (socket) => {
-  // ...
-});
-
-io.of('/admin').on('connect', (socket) => {
-  // ...
-});
-```
-
-#### Event: 'connection'
-
-Synonym of [Event: 'connect'](#event-connect).
-
-#### Flag: 'volatile'
-
-Sets a modifier for a subsequent event emission that the event data may be lost if the clients are not ready to receive messages (because of network slowness or other issues, or because they’re connected through long polling and is in the middle of a request-response cycle).
-
-```js
-io.volatile.emit('an event', { some: 'data' }); // the clients may or may not receive it
-```
-
-#### Flag: 'binary'
-
-Specifies whether there is binary data in the emitted data. Increases performance when specified. Can be `true` or `false`.
-
-```js
-io.binary(false).emit('an event', { some: 'data' });
-```
-
-#### Flag: 'local'
-
-Sets a modifier for a subsequent event emission that the event data will only be _broadcast_ to the current node (when the [Redis adapter](https://github.com/socketio/socket.io-redis) is used).
-
-```js
-io.local.emit('an event', { some: 'data' });
-```
-
-### Socket
-
-A `Socket` is the fundamental class for interacting with browser clients. A `Socket` belongs to a certain `Namespace` (by default `/`) and uses an underlying `Client` to communicate.
-
-It should be noted the `Socket` doesn't relate directly to the actual underlying TCP/IP `socket` and it is only the name of the class.
-
-Within each `Namespace`, you can also define arbitrary channels (called `room`) that the `Socket` can join and leave. That provides a convenient way to broadcast to a group of `Socket`s (see `Socket#to` below).
-
-The `Socket` class inherits from [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter). The `Socket` class overrides the `emit` method, and does not modify any other `EventEmitter` method. All methods documented here which also appear as `EventEmitter` methods (apart from `emit`) are implemented by `EventEmitter`, and documentation for `EventEmitter` applies.
-
-#### socket.id
-
-  * _(String)_
-
-A unique identifier for the session, that comes from the underlying `Client`.
-
-#### socket.rooms
-
-  * _(Object)_
-
-A hash of strings identifying the rooms this client is in, indexed by room name.
-
-```js
-io.on('connection', (socket) => {
-  socket.join('room 237', () => {
-    let rooms = Object.keys(socket.rooms);
-    console.log(rooms); // [ <socket.id>, 'room 237' ]
-  });
-});
-```
-
-#### socket.client
-
-  * _(Client)_
-
-A reference to the underlying `Client` object.
-
-#### socket.conn
-
-  * _(engine.Socket)_
-
-A reference to the underlying `Client` transport connection (engine.io `Socket` object). This allows access to the IO transport layer, which still (mostly) abstracts the actual TCP/IP socket.
-
-#### socket.request
-
-  * _(Request)_
-
-A getter proxy that returns the reference to the `request` that originated the underlying engine.io `Client`. Useful for accessing request headers such as `Cookie` or `User-Agent`.
-
-#### socket.handshake
-
-  * _(Object)_
-
-The handshake details:
-
-```js
-{
-  headers: /* the headers sent as part of the handshake */,
-  time: /* the date of creation (as string) */,
-  address: /* the ip of the client */,
-  xdomain: /* whether the connection is cross-domain */,
-  secure: /* whether the connection is secure */,
-  issued: /* the date of creation (as unix timestamp) */,
-  url: /* the request URL string */,
-  query: /* the query object */
-}
-```
-
-Usage:
-
-```js
-io.use((socket, next) => {
-  let handshake = socket.handshake;
-  // ...
-});
-
-io.on('connection', (socket) => {
-  let handshake = socket.handshake;
-  // ...
-});
-```
-
-#### socket.use(fn)
-
-  - `fn` _(Function)_
-
-Registers a middleware, which is a function that gets executed for every incoming `Packet` and receives as parameter the packet and a function to optionally defer execution to the next registered middleware.
-
-Errors passed to middleware callbacks are sent as special `error` packets to clients.
-
-```js
-io.on('connection', (socket) => {
-  socket.use((packet, next) => {
-    if (packet.doge === true) return next();
-    next(new Error('Not a doge error'));
-  });
-});
-```
-
-#### socket.send([...args][, ack])
-
-  - `args`
-  - `ack` _(Function)_
-  - **Returns** `Socket`
-
-Sends a `message` event. See [socket.emit(eventName[, ...args][, ack])](#socketemiteventname-args-ack).
-
-#### socket.emit(eventName[, ...args][, ack])
-
-*(overrides `EventEmitter.emit`)*
-  - `eventName` _(String)_
-  - `args`
-  - `ack` _(Function)_
-  - **Returns** `Socket`
-
-Emits an event to the socket identified by the string name. Any other parameters can be included. All serializable datastructures are supported, including `Buffer`.
-
-```js
-socket.emit('hello', 'world');
-socket.emit('with-binary', 1, '2', { 3: '4', 5: Buffer.alloc(6) });
-```
-
-The `ack` argument is optional and will be called with the client's answer.
-
-```js
-io.on('connection', (socket) => {
-  socket.emit('an event', { some: 'data' });
-
-  socket.emit('ferret', 'tobi', (data) => {
-    console.log(data); // data will be 'woot'
-  });
-
-  // the client code
-  // client.on('ferret', (name, fn) => {
-  //   fn('woot');
-  // });
-
-});
-```
-
-#### socket.on(eventName, callback)
-
-*(inherited from `EventEmitter`)*
-  - `eventName` _(String)_
-  - `callback` _(Function)_
-  - **Returns** `Socket`
-
-Register a new handler for the given event.
-
-```js
-socket.on('news', (data) => {
-  console.log(data);
-});
-// with several arguments
-socket.on('news', (arg1, arg2, arg3) => {
-  // ...
-});
-// or with acknowledgement
-socket.on('news', (data, callback) => {
-  callback(0);
-});
-```
-
-#### socket.once(eventName, listener)
-#### socket.removeListener(eventName, listener)
-#### socket.removeAllListeners([eventName])
-#### socket.eventNames()
-
-Inherited from `EventEmitter` (along with other methods not mentioned here). See Node.js documentation for the `events` module.
-
-#### socket.join(room[, callback])
-
-  - `room` _(String)_
-  - `callback` _(Function)_
-  - **Returns** `Socket` for chaining
-
-Adds the client to the `room`, and fires optionally a callback with `err` signature (if any).
-
-```js
-io.on('connection', (socket) => {
-  socket.join('room 237', () => {
-    let rooms = Object.keys(socket.rooms);
-    console.log(rooms); // [ <socket.id>, 'room 237' ]
-    io.to('room 237').emit('a new user has joined the room'); // broadcast to everyone in the room
-  });
-});
-```
-
-The mechanics of joining rooms are handled by the `Adapter` that has been configured (see `Server#adapter` above), defaulting to [socket.io-adapter](https://github.com/socketio/socket.io-adapter).
-
-For your convenience, each socket automatically joins a room identified by its id (see `Socket#id`). This makes it easy to broadcast messages to other sockets:
-
-```js
-io.on('connection', (socket) => {
-  socket.on('say to someone', (id, msg) => {
-    // send a private message to the socket with the given id
-    socket.to(id).emit('my message', msg);
-  });
-});
-```
-
-#### socket.join(rooms[, callback])
-
-  - `rooms` _(Array)_
-  - `callback` _(Function)_
-  - **Returns** `Socket` for chaining
-
-Adds the client to the list of room, and fires optionally a callback with `err` signature (if any).
-
-#### socket.leave(room[, callback])
-
-  - `room` _(String)_
-  - `callback` _(Function)_
-  - **Returns** `Socket` for chaining
-
-Removes the client from `room`, and fires optionally a callback with `err` signature (if any).
-
-**Rooms are left automatically upon disconnection**.
-
-#### socket.to(room)
-
-  - `room` _(String)_
-  - **Returns** `Socket` for chaining
-
-Sets a modifier for a subsequent event emission that the event will only be _broadcasted_ to clients that have joined the given `room` (the socket itself being excluded).
-
-To emit to multiple rooms, you can call `to` several times.
-
-```js
-io.on('connection', (socket) => {
-  // to one room
-  socket.to('others').emit('an event', { some: 'data' });
-  // to multiple rooms
-  socket.to('room1').to('room2').emit('hello');
-  // a private message to another socket
-  socket.to(/* another socket id */).emit('hey');
-});
-```
-
-**Note:** acknowledgements are not supported when broadcasting.
-
-#### socket.in(room)
-
-Synonym of [socket.to(room)](#sockettoroom).
-
-#### socket.compress(value)
-
-  - `value` _(Boolean)_ whether to following packet will be compressed
-  - **Returns** `Socket` for chaining
-
-Sets a modifier for a subsequent event emission that the event data will only be _compressed_ if the value is `true`. Defaults to `true` when you don't call the method.
-
-```js
-io.on('connection', (socket) => {
-  socket.compress(false).emit('uncompressed', "that's rough");
-});
-```
-
-#### socket.disconnect(close)
-
-  - `close` _(Boolean)_ whether to close the underlying connection
-  - **Returns** `Socket`
-
-Disconnects this client. If value of close is `true`, closes the underlying connection. Otherwise, it just disconnects the namespace.
-
-```js
-io.on('connection', (socket) => {
-  setTimeout(() => socket.disconnect(true), 5000);
-});
-```
-
-#### Flag: 'broadcast'
-
-Sets a modifier for a subsequent event emission that the event data will only be _broadcast_ to every sockets but the sender.
-
-```js
-io.on('connection', (socket) => {
-  socket.broadcast.emit('an event', { some: 'data' }); // everyone gets it but the sender
-});
-```
-
-#### Flag: 'volatile'
-
-Sets a modifier for a subsequent event emission that the event data may be lost if the client is not ready to receive messages (because of network slowness or other issues, or because they’re connected through long polling and is in the middle of a request-response cycle).
-
-```js
-io.on('connection', (socket) => {
-  socket.volatile.emit('an event', { some: 'data' }); // the client may or may not receive it
-});
-```
-
-#### Flag: 'binary'
-
-Specifies whether there is binary data in the emitted data. Increases performance when specified. Can be `true` or `false`.
-
-```js
-var io = require('socket.io')();
-io.on('connection', function(socket){
-  socket.binary(false).emit('an event', { some: 'data' }); // The data to send has no binary data
-});
-```
-
-#### Event: 'disconnect'
-
-  - `reason` _(String)_ the reason of the disconnection (either client or server-side)
-
-Fired upon disconnection.
-
-```js
-io.on('connection', (socket) => {
-  socket.on('disconnect', (reason) => {
-    // ...
-  });
-});
-```
-
-#### Event: 'error'
-
-  - `error` _(Object)_ error object
-
-Fired when an error occurs.
-
-```js
-io.on('connection', (socket) => {
-  socket.on('error', (error) => {
-    // ...
-  });
-});
-```
-
-#### Event: 'disconnecting'
-
-  - `reason` _(String)_ the reason of the disconnection (either client or server-side)
-
-Fired when the client is going to be disconnected (but hasn't left its `rooms` yet).
-
-```js
-io.on('connection', (socket) => {
-  socket.on('disconnecting', (reason) => {
-    let rooms = Object.keys(socket.rooms);
-    // ...
-  });
-});
-```
-
-These are reserved events (along with `connect`, `newListener` and `removeListener`) which cannot be used as event names.
-
-### Client
-
-The `Client` class represents an incoming transport (engine.io) connection. A `Client` can be associated with many multiplexed `Socket`s that belong to different `Namespace`s.
-
-#### client.conn
-
-  * _(engine.Socket)_
-
-A reference to the underlying `engine.io` `Socket` connection.
-
-#### client.request
-
-  * _(Request)_
-
-A getter proxy that returns the reference to the `request` that originated the engine.io connection. Useful for accessing request headers such as `Cookie` or `User-Agent`.

docs/README.md

@@ -1,15 +1,2 @@
 
-## Table of Contents
-
-#### Getting started
-
-  - [Write a chat application](http://socket.io/get-started/chat/)
-
-#### API Reference
-
-  - [Server API](API.md)
-  - [Client API](https://github.com/socketio/socket.io-client/blob/master/docs/API.md)
-
-#### Advanced topics
-
-  - [Emit cheatsheet](emit.md)
+The documentation has been moved to the website [here](https://socket.io/docs/).

docs/emit.md

@@ -1,64 +0,0 @@
-
-## Emit cheatsheet
-
-```js
-
-io.on('connect', onConnect);
-
-function onConnect(socket){
-
-  // sending to the client
-  socket.emit('hello', 'can you hear me?', 1, 2, 'abc');
-
-  // sending to all clients except sender
-  socket.broadcast.emit('broadcast', 'hello friends!');
-
-  // sending to all clients in 'game' room except sender
-  socket.to('game').emit('nice game', "let's play a game");
-
-  // sending to all clients in 'game1' and/or in 'game2' room, except sender
-  socket.to('game1').to('game2').emit('nice game', "let's play a game (too)");
-
-  // sending to all clients in 'game' room, including sender
-  io.in('game').emit('big-announcement', 'the game will start soon');
-
-  // sending to all clients in namespace 'myNamespace', including sender
-  io.of('myNamespace').emit('bigger-announcement', 'the tournament will start soon');
-
-  // sending to a specific room in a specific namespace, including sender
-  io.of('myNamespace').to('room').emit('event', 'message');
-
-  // sending to individual socketid (private message)
-  io.to(<socketid>).emit('hey', 'I just met you');
-
-  // sending with acknowledgement
-  socket.emit('question', 'do you think so?', function (answer) {});
-
-  // sending without compression
-  socket.compress(false).emit('uncompressed', "that's rough");
-
-  // sending a message that might be dropped if the client is not ready to receive messages
-  socket.volatile.emit('maybe', 'do you really need it?');
-
-  // specifying whether the data to send has binary data
-  socket.binary(false).emit('what', 'I have no binaries!');
-
-  // sending to all clients on this node (when using multiple nodes)
-  io.local.emit('hi', 'my lovely babies');
-
-  // sending to all connected clients
-  io.emit('an event sent to all connected clients');
-
-};
-
-```
-
-**Note:** The following events are reserved and should not be used as event names by your application:
-- `error`
-- `connect`
-- `disconnect`
-- `disconnecting`
-- `newListener`
-- `removeListener`
-- `ping`
-- `pong`

examples/.gitignore

@@ -0,0 +1 @@
+package-lock.json

examples/angular-todomvc/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

examples/angular-todomvc/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

examples/angular-todomvc/.gitignore

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

examples/angular-todomvc/README.md

@@ -0,0 +1,35 @@
+# Angular TodoMVC + Socket.IO
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.4.
+
+Inspired from the [TodoMVC](http://todomvc.com/) [angular example](https://github.com/tastejs/todomvc/tree/master/examples/angular2).
+
+![demo](assets/demo.gif)
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Socket.IO server
+
+Run `npm run start:server` to start the Socket.IO server.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

examples/angular-todomvc/angular.json

@@ -0,0 +1,128 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-todomvc": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular-todomvc",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-todomvc:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-todomvc:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular-todomvc:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular-todomvc:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "angular-todomvc:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "angular-todomvc"
+}

examples/angular-todomvc/e2e/protractor.conf.js

@@ -0,0 +1,37 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome'
+  },
+  directConnect: true,
+  SELENIUM_PROMISE_MANAGER: false,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({
+      spec: {
+        displayStacktrace: StacktraceOption.PRETTY
+      }
+    }));
+  }
+};

examples/angular-todomvc/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', async () => {
+    await page.navigateTo();
+    expect(await page.getTitleText()).toEqual('angular-todomvc app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});

examples/angular-todomvc/e2e/src/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  async navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl);
+  }
+
+  async getTitleText(): Promise<string> {
+    return element(by.css('app-root .content span')).getText();
+  }
+}

examples/angular-todomvc/e2e/tsconfig.json

@@ -0,0 +1,13 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es2018",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  }
+}

examples/angular-todomvc/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/angular-todomvc'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

examples/angular-todomvc/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "angular-todomvc",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "start:server": "ts-node -O '{\"module\":\"commonjs\"}' server.ts"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~11.0.4",
+    "@angular/common": "~11.0.4",
+    "@angular/compiler": "~11.0.4",
+    "@angular/core": "~11.0.4",
+    "@angular/forms": "~11.0.4",
+    "@angular/platform-browser": "~11.0.4",
+    "@angular/platform-browser-dynamic": "~11.0.4",
+    "@angular/router": "~11.0.4",
+    "rxjs": "~6.6.0",
+    "socket.io": "^4.0.0",
+    "socket.io-client": "^4.0.0",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.1100.4",
+    "@angular/cli": "~11.0.4",
+    "@angular/compiler-cli": "~11.0.4",
+    "@types/jasmine": "~3.6.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.1.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.0.2"
+  }
+}

examples/angular-todomvc/server.ts

@@ -0,0 +1,28 @@
+import { Server } from "socket.io";
+
+const io = new Server(8080, {
+  cors: {
+    origin: "http://localhost:4200",
+    methods: ["GET", "POST"]
+  }
+});
+
+interface Todo {
+  completed: boolean;
+  editing: boolean;
+  title: string;
+}
+
+let todos: Array<Todo> = [];
+
+io.on("connection", (socket) => {
+    socket.emit("todos", todos);
+
+    // note: we could also create a CRUD (create/read/update/delete) service for the todo list
+    socket.on("update-store", (updatedTodos) => {
+      // store it locally
+      todos = updatedTodos;
+      // broadcast to everyone but the sender
+      socket.broadcast.emit("todos", todos);
+    });
+});

examples/angular-todomvc/src/app/app.component.html

@@ -0,0 +1,23 @@
+<section class="todoapp">
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodoText" (keyup.enter)="addTodo()">
+  </header>
+  <section class="main" *ngIf="todoStore.todos.length > 0">
+    <input id="toggle-all" class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall.checked)">
+    <ul class="todo-list">
+      <li *ngFor="let todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
+        <div class="view">
+          <input class="toggle" type="checkbox" (click)="toggleCompletion(todo)" [checked]="todo.completed">
+          <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+          <button class="destroy" (click)="remove(todo)"></button>
+        </div>
+        <input class="edit" *ngIf="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo.value)" (keyup.enter)="updateEditingTodo(todo, editedtodo.value)" (keyup.escape)="cancelEditingTodo(todo)">
+      </li>
+    </ul>
+  </section>
+  <footer class="footer" *ngIf="todoStore.todos.length > 0">
+    <span class="todo-count"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>
+    <button class="clear-completed" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
+  </footer>
+</section>

examples/angular-todomvc/src/app/app.component.spec.ts

@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'angular-todomvc'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('angular-todomvc');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('angular-todomvc app is running!');
+  });
+});

examples/angular-todomvc/src/app/app.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { RemoteTodoStore, Todo } from './store';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  todoStore: RemoteTodoStore;
+  newTodoText = '';
+
+  constructor(todoStore: RemoteTodoStore) {
+    this.todoStore = todoStore;
+  }
+
+  stopEditing(todo: Todo, editedTitle: string) {
+    todo.title = editedTitle;
+    todo.editing = false;
+  }
+
+  cancelEditingTodo(todo: Todo) {
+    todo.editing = false;
+  }
+
+  updateEditingTodo(todo: Todo, editedTitle: string) {
+    editedTitle = editedTitle.trim();
+    todo.editing = false;
+
+    if (editedTitle.length === 0) {
+      return this.todoStore.remove(todo);
+    }
+
+    todo.title = editedTitle;
+  }
+
+  editTodo(todo: Todo) {
+    todo.editing = true;
+  }
+
+  removeCompleted() {
+    this.todoStore.removeCompleted();
+  }
+
+  toggleCompletion(todo: Todo) {
+    this.todoStore.toggleCompletion(todo);
+  }
+
+  remove(todo: Todo){
+    this.todoStore.remove(todo);
+  }
+
+  addTodo() {
+    if (this.newTodoText.trim().length) {
+      this.todoStore.add(this.newTodoText);
+      this.newTodoText = '';
+    }
+  }
+}

examples/angular-todomvc/src/app/app.module.ts

@@ -0,0 +1,19 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { RemoteTodoStore } from './store';
+import { FormsModule } from "@angular/forms";
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [RemoteTodoStore],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

examples/angular-todomvc/src/app/store.ts

@@ -0,0 +1,95 @@
+import { io, Socket } from "socket.io-client";
+
+export class Todo {
+  completed: boolean;
+  editing: boolean;
+
+  private _title: String = "";
+  get title() {
+    return this._title;
+  }
+  set title(value: String) {
+    this._title = value.trim();
+  }
+
+  constructor(title: String) {
+    this.completed = false;
+    this.editing = false;
+    this.title = title.trim();
+  }
+}
+
+export class TodoStore {
+  todos: Array<Todo>;
+
+  constructor() {
+    let persistedTodos = JSON.parse(localStorage.getItem('angular2-todos') || '[]');
+    // Normalize back into classes
+    this.todos = persistedTodos.map( (todo: {_title: String, completed: boolean}) => {
+      let ret = new Todo(todo._title);
+      ret.completed = todo.completed;
+      return ret;
+    });
+  }
+
+  protected updateStore() {
+    localStorage.setItem('angular2-todos', JSON.stringify(this.todos));
+  }
+
+  private getWithCompleted(completed: boolean) {
+    return this.todos.filter((todo: Todo) => todo.completed === completed);
+  }
+
+  allCompleted() {
+    return this.todos.length === this.getCompleted().length;
+  }
+
+  setAllTo(completed: boolean) {
+    this.todos.forEach((t: Todo) => t.completed = completed);
+    this.updateStore();
+  }
+
+  removeCompleted() {
+    this.todos = this.getWithCompleted(false);
+    this.updateStore();
+  }
+
+  getRemaining() {
+    return this.getWithCompleted(false);
+  }
+
+  getCompleted() {
+    return this.getWithCompleted(true);
+  }
+
+  toggleCompletion(todo: Todo) {
+    todo.completed = !todo.completed;
+    this.updateStore();
+  }
+
+  remove(todo: Todo) {
+    this.todos.splice(this.todos.indexOf(todo), 1);
+    this.updateStore();
+  }
+
+  add(title: String) {
+    this.todos.push(new Todo(title));
+    this.updateStore();
+  }
+}
+
+export class RemoteTodoStore extends TodoStore {
+  private socket: Socket;
+
+  constructor() {
+    super();
+    this.socket = io("http://localhost:8080");
+    this.socket.on("todos", (updatedTodos: Array<Todo>) => {
+      this.todos = updatedTodos;
+    });
+  }
+
+  protected updateStore() {
+    this.socket.emit("update-store", this.todos.map(({ title, editing, completed }) => ({ title, editing, completed })));
+  }
+}

examples/angular-todomvc/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

examples/angular-todomvc/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

examples/angular-todomvc/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Angular Todo MVC</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

examples/angular-todomvc/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

examples/angular-todomvc/src/polyfills.ts

@@ -0,0 +1,63 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

examples/angular-todomvc/src/styles.css

@@ -0,0 +1,381 @@
+/* imported from node_modules/todomvc-app-css/index.css */
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  background: #f5f5f5;
+  color: #111111;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+}
+
+:focus {
+  outline: 0;
+}
+
+.hidden {
+  display: none;
+}
+
+.todoapp {
+  background: #fff;
+  margin: 130px 0 40px 0;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+  0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::-moz-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp h1 {
+  position: absolute;
+  top: -140px;
+  width: 100%;
+  font-size: 80px;
+  font-weight: 200;
+  text-align: center;
+  color: #b83f45;
+  -webkit-text-rendering: optimizeLegibility;
+  -moz-text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+  position: relative;
+  margin: 0;
+  width: 100%;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: 1.4em;
+  color: inherit;
+  padding: 6px;
+  border: 1px solid #999;
+  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: rgba(0, 0, 0, 0.003);
+  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+  position: relative;
+  z-index: 2;
+  border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+  width: 1px;
+  height: 1px;
+  border: none; /* Mobile Safari */
+  opacity: 0;
+  position: absolute;
+  right: 100%;
+  bottom: 100%;
+}
+
+.toggle-all + label {
+  width: 60px;
+  height: 34px;
+  font-size: 0;
+  position: absolute;
+  top: -52px;
+  left: -13px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.toggle-all + label:before {
+  content: '❯';
+  font-size: 22px;
+  color: #e6e6e6;
+  padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked + label:before {
+  color: #737373;
+}
+
+.todo-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.todo-list li {
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+  border-bottom: none;
+}
+
+.todo-list li.editing {
+  border-bottom: none;
+  padding: 0;
+}
+
+.todo-list li.editing .edit {
+  display: block;
+  width: calc(100% - 43px);
+  padding: 12px 16px;
+  margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+  display: none;
+}
+
+.todo-list li .toggle {
+  text-align: center;
+  width: 40px;
+  /* auto, since non-WebKit browsers doesn't support input styling */
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  border: none; /* Mobile Safari */
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.todo-list li .toggle {
+  opacity: 0;
+}
+
+.todo-list li .toggle + label {
+  /*
+    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+  */
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+}
+
+.todo-list li label {
+  word-break: break-all;
+  padding: 15px 15px 15px 60px;
+  display: block;
+  line-height: 1.2;
+  transition: color 0.4s;
+  font-weight: 400;
+  color: #4d4d4d;
+}
+
+.todo-list li.completed label {
+  color: #cdcdcd;
+  text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+  margin: auto 0;
+  font-size: 30px;
+  color: #cc9a9a;
+  margin-bottom: 11px;
+  transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+  color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+  content: '×';
+}
+
+.todo-list li:hover .destroy {
+  display: block;
+}
+
+.todo-list li .edit {
+  display: none;
+}
+
+.todo-list li.editing:last-child {
+  margin-bottom: -1px;
+}
+
+.footer {
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  font-size: 15px;
+  border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 50px;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+  0 8px 0 -3px #f6f6f6,
+  0 9px 1px -3px rgba(0, 0, 0, 0.2),
+  0 16px 0 -6px #f6f6f6,
+  0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+  float: left;
+  text-align: left;
+}
+
+.todo-count strong {
+  font-weight: 300;
+}
+
+.filters {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+
+.filters li {
+  display: inline;
+}
+
+.filters li a {
+  color: inherit;
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.filters li a:hover {
+  border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+  border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+  float: right;
+  position: relative;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.clear-completed:hover {
+  text-decoration: underline;
+}
+
+.info {
+  margin: 65px auto 0;
+  color: #4d4d4d;
+  font-size: 11px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-align: center;
+}
+
+.info p {
+  line-height: 1;
+}
+
+.info a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.info a:hover {
+  text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  .toggle-all,
+  .todo-list li .toggle {
+    background: none;
+  }
+
+  .todo-list li .toggle {
+    height: 40px;
+  }
+}
+
+@media (max-width: 430px) {
+  .footer {
+    height: 50px;
+  }
+
+  .filters {
+    bottom: 10px;
+  }
+}

examples/angular-todomvc/src/test.ts

@@ -0,0 +1,25 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

examples/angular-todomvc/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

examples/angular-todomvc/tsconfig.json

@@ -0,0 +1,29 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

examples/angular-todomvc/tsconfig.spec.json

@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

examples/angular-todomvc/tslint.json

@@ -0,0 +1,152 @@
+{
+  "extends": "tslint:recommended",
+  "rulesDirectory": [
+    "codelyzer"
+  ],
+  "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
+    "array-type": false,
+    "arrow-return-shorthand": true,
+    "curly": true,
+    "deprecation": {
+      "severity": "warning"
+    },
+    "eofline": true,
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
+    "max-classes-per-file": false,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-empty": false,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-non-null-assertion": true,
+    "no-redundant-jsdoc": true,
+    "no-switch-case-fall-through": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
+    "typedef": [
+      true,
+      "call-signature"
+    ],
+    "typedef-whitespace": {
+      "options": [
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    },
+    "component-class-suffix": true,
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
+    "no-outputs-metadata-property": true,
+    "template-banana-in-box": true,
+    "template-no-negated-async": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ]
+  }
+}

examples/basic-crud-application/README.md

@@ -0,0 +1,26 @@
+# Basic CRUD application with Socket.IO
+
+Please read the related [guide](https://socket.io/get-started/basic-crud-application/).
+
+This repository contains several implementations of the server:
+
+| Directory                  | Language   | Database                                                                           | Cluster?                                                                                   |
+|----------------------------|------------|------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
+| `server/`                  | TypeScript | in-memory                                                                          | No                                                                                         |
+| `server-postgres-cluster/` | JavaScript | Postgres, with the [Postgres adapter](https://socket.io/docs/v4/postgres-adapter/) | Yes, with the [`@socket.io/sticky`](https://github.com/socketio/socket.io-sticky) module)  |
+
+## Running the frontend
+
+```
+cd angular-client
+npm install
+npm start
+```
+
+### Running the server
+
+```
+cd server
+npm install
+npm start
+```

examples/basic-crud-application/angular-client/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

examples/basic-crud-application/angular-client/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

examples/basic-crud-application/angular-client/README.md

@@ -0,0 +1,27 @@
+# AngularClient
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

examples/basic-crud-application/angular-client/angular.json

@@ -0,0 +1,101 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-client": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/angular-client",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular-client:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-client:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "angular-client:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

examples/basic-crud-application/angular-client/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "angular-client",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
+    "rxjs": "~7.8.0",
+    "socket.io-client": "^4.7.2",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.0.2",
+    "@angular/cli": "^17.0.2",
+    "@angular/compiler-cli": "^17.0.0",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^20.9.2",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.2.2"
+  }
+}

examples/basic-crud-application/angular-client/src/app/app.component.html

@@ -0,0 +1,24 @@
+<section class="todoapp">
+  <header class="header">
+    <h1>todos</h1>
+<!--    <input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodoText" (keyup.enter)="addTodo()">-->
+    <input class="new-todo" placeholder="What needs to be done?" autofocus="" [formControl]="newTodoText" (keyup.enter)="addTodo()">
+  </header>
+  <section class="main" *ngIf="todoStore.todos.length > 0">
+    <input id="toggle-all" class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall.checked)">
+    <ul class="todo-list">
+      <li *ngFor="let todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
+        <div class="view">
+          <input class="toggle" type="checkbox" (click)="toggleCompletion(todo)" [checked]="todo.completed">
+          <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+          <button class="destroy" (click)="remove(todo)"></button>
+        </div>
+        <input class="edit" *ngIf="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo.value)" (keyup.enter)="updateEditingTodo(todo, editedtodo.value)" (keyup.escape)="cancelEditingTodo(todo)">
+      </li>
+    </ul>
+  </section>
+  <footer class="footer" *ngIf="todoStore.todos.length > 0">
+    <span class="todo-count"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>
+    <button class="clear-completed" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
+  </footer>
+</section>

examples/basic-crud-application/angular-client/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'angular-client' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('angular-client');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-client');
+  });
+});

examples/basic-crud-application/angular-client/src/app/app.component.ts

@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import {type Todo, TodoStore} from "./store";
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, ReactiveFormsModule],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+  providers: [TodoStore]
+})
+export class AppComponent {
+  newTodoText = new FormControl('');
+
+  constructor(readonly todoStore: TodoStore) {
+  }
+
+  stopEditing(todo: Todo, editedTitle: string) {
+    todo.title = editedTitle;
+    todo.editing = false;
+  }
+
+  cancelEditingTodo(todo: Todo) {
+    todo.editing = false;
+  }
+
+  updateEditingTodo(todo: Todo, editedTitle: string) {
+    editedTitle = editedTitle.trim();
+    todo.editing = false;
+
+    if (editedTitle.length === 0) {
+      return this.todoStore.remove(todo);
+    }
+
+    todo.title = editedTitle;
+  }
+
+  editTodo(todo: Todo) {
+    todo.editing = true;
+  }
+
+  removeCompleted() {
+    this.todoStore.removeCompleted();
+  }
+
+  toggleCompletion(todo: Todo) {
+    this.todoStore.toggleCompletion(todo);
+  }
+
+  remove(todo: Todo){
+    this.todoStore.remove(todo);
+  }
+
+  addTodo() {
+    if (this.newTodoText.value?.trim().length) {
+      this.todoStore.add(this.newTodoText.value!);
+      this.newTodoText.setValue('');
+    }
+  }
+}

examples/basic-crud-application/angular-client/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};

examples/basic-crud-application/angular-client/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

examples/basic-crud-application/angular-client/src/app/store.ts

@@ -0,0 +1,142 @@
+import { io, Socket } from "socket.io-client";
+import { ClientEvents, ServerEvents } from "../../../common/events";
+import { environment } from '../environments/environment';
+import {Injectable} from "@angular/core";
+
+export interface Todo {
+  id: string,
+  title: string,
+  completed: boolean,
+  editing: boolean,
+  synced: boolean
+}
+
+const mapTodo = (todo: any) => {
+  return {
+    ...todo,
+    editing: false,
+    synced: true
+  }
+}
+
+@Injectable()
+export class TodoStore {
+  public todos: Array<Todo> = [];
+  private socket: Socket<ServerEvents, ClientEvents>;
+
+  constructor() {
+    this.socket = io(environment.serverUrl);
+
+    this.socket.on("connect", () => {
+      this.socket.emit("todo:list", (res) => {
+        if ("error" in res) {
+          // handle the error
+          return;
+        }
+        this.todos = res.data.map(mapTodo);
+      });
+    });
+
+    this.socket.on("todo:created", (todo) => {
+      this.todos.push(mapTodo(todo));
+    });
+
+    this.socket.on("todo:updated", (todo) => {
+      const existingTodo = this.todos.find(t => {
+        return t.id === todo.id
+      });
+      if (existingTodo) {
+        existingTodo.title = todo.title;
+        existingTodo.completed = todo.completed;
+      }
+    });
+
+    this.socket.on("todo:deleted", (id) => {
+      const index = this.todos.findIndex(t => {
+        return t.id === id
+      });
+      if (index !== -1) {
+        this.todos.splice(index, 1);
+      }
+    })
+  }
+
+  private getWithCompleted(completed: boolean) {
+    return this.todos.filter((todo: Todo) => todo.completed === completed);
+  }
+
+  allCompleted() {
+    return this.todos.length === this.getCompleted().length;
+  }
+
+  setAllTo(completed: boolean) {
+    this.todos.forEach(todo => {
+      todo.completed = completed;
+      todo.synced = false;
+      this.socket.emit("todo:update", todo, (res) => {
+        if (res && "error" in res) {
+          // handle the error
+          return;
+        }
+        todo.synced = true;
+      });
+    });
+  }
+
+  removeCompleted() {
+    this.getCompleted().forEach((todo) => {
+      this.socket.emit("todo:delete", todo.id, (res) => {
+        if (res && "error" in res) {
+          // handle the error
+        }
+      });
+    })
+    this.todos = this.getRemaining();
+  }
+
+  getRemaining() {
+    return this.getWithCompleted(false);
+  }
+
+  getCompleted() {
+    return this.getWithCompleted(true);
+  }
+
+  toggleCompletion(todo: Todo) {
+    todo.completed = !todo.completed;
+    todo.synced = false;
+    this.socket.emit("todo:update", todo, (res) => {
+      if (res && "error" in res) {
+        // handle the error
+        return;
+      }
+      todo.synced = true;
+    })
+  }
+
+  remove(todo: Todo) {
+    this.todos.splice(this.todos.indexOf(todo), 1);
+    this.socket.emit("todo:delete", todo.id, (res) => {
+      if (res && "error" in res) {
+        // handle the error
+      }
+    });
+  }
+
+  add(title: string) {
+    this.socket.emit("todo:create", { title, completed: false }, (res) => {
+      if ("error" in res) {
+        // handle the error
+        return;
+      }
+      this.todos.push({
+        id: res.data,
+        title,
+        completed: false,
+        editing: false,
+        synced: true
+      });
+    });
+  }
+}
+

examples/basic-crud-application/angular-client/src/environments/environment.development.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  serverUrl: "http://localhost:3000"
+};

examples/basic-crud-application/angular-client/src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  serverUrl: "https://my-custom-domain.com"
+};

examples/basic-crud-application/angular-client/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AngularClient</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

examples/basic-crud-application/angular-client/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

examples/basic-crud-application/angular-client/src/styles.css

@@ -0,0 +1,381 @@
+/* imported from node_modules/todomvc-app-css/index.css */
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  background: #f5f5f5;
+  color: #111111;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+}
+
+:focus {
+  outline: 0;
+}
+
+.hidden {
+  display: none;
+}
+
+.todoapp {
+  background: #fff;
+  margin: 130px 0 40px 0;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+  0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::-moz-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp h1 {
+  position: absolute;
+  top: -140px;
+  width: 100%;
+  font-size: 80px;
+  font-weight: 200;
+  text-align: center;
+  color: #b83f45;
+  -webkit-text-rendering: optimizeLegibility;
+  -moz-text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+  position: relative;
+  margin: 0;
+  width: 100%;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: 1.4em;
+  color: inherit;
+  padding: 6px;
+  border: 1px solid #999;
+  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: rgba(0, 0, 0, 0.003);
+  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+  position: relative;
+  z-index: 2;
+  border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+  width: 1px;
+  height: 1px;
+  border: none; /* Mobile Safari */
+  opacity: 0;
+  position: absolute;
+  right: 100%;
+  bottom: 100%;
+}
+
+.toggle-all + label {
+  width: 60px;
+  height: 34px;
+  font-size: 0;
+  position: absolute;
+  top: -52px;
+  left: -13px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.toggle-all + label:before {
+  content: '❯';
+  font-size: 22px;
+  color: #e6e6e6;
+  padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked + label:before {
+  color: #737373;
+}
+
+.todo-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.todo-list li {
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+  border-bottom: none;
+}
+
+.todo-list li.editing {
+  border-bottom: none;
+  padding: 0;
+}
+
+.todo-list li.editing .edit {
+  display: block;
+  width: calc(100% - 43px);
+  padding: 12px 16px;
+  margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+  display: none;
+}
+
+.todo-list li .toggle {
+  text-align: center;
+  width: 40px;
+  /* auto, since non-WebKit browsers doesn't support input styling */
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  border: none; /* Mobile Safari */
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.todo-list li .toggle {
+  opacity: 0;
+}
+
+.todo-list li .toggle + label {
+  /*
+    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+  */
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+}
+
+.todo-list li label {
+  word-break: break-all;
+  padding: 15px 15px 15px 60px;
+  display: block;
+  line-height: 1.2;
+  transition: color 0.4s;
+  font-weight: 400;
+  color: #4d4d4d;
+}
+
+.todo-list li.completed label {
+  color: #cdcdcd;
+  text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+  margin: auto 0;
+  font-size: 30px;
+  color: #cc9a9a;
+  margin-bottom: 11px;
+  transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+  color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+  content: '×';
+}
+
+.todo-list li:hover .destroy {
+  display: block;
+}
+
+.todo-list li .edit {
+  display: none;
+}
+
+.todo-list li.editing:last-child {
+  margin-bottom: -1px;
+}
+
+.footer {
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  font-size: 15px;
+  border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 50px;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+  0 8px 0 -3px #f6f6f6,
+  0 9px 1px -3px rgba(0, 0, 0, 0.2),
+  0 16px 0 -6px #f6f6f6,
+  0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+  float: left;
+  text-align: left;
+}
+
+.todo-count strong {
+  font-weight: 300;
+}
+
+.filters {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+
+.filters li {
+  display: inline;
+}
+
+.filters li a {
+  color: inherit;
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.filters li a:hover {
+  border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+  border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+  float: right;
+  position: relative;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.clear-completed:hover {
+  text-decoration: underline;
+}
+
+.info {
+  margin: 65px auto 0;
+  color: #4d4d4d;
+  font-size: 11px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-align: center;
+}
+
+.info p {
+  line-height: 1;
+}
+
+.info a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.info a:hover {
+  text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  .toggle-all,
+  .todo-list li .toggle {
+    background: none;
+  }
+
+  .todo-list li .toggle {
+    height: 40px;
+  }
+}
+
+@media (max-width: 430px) {
+  .footer {
+    height: 50px;
+  }
+
+  .filters {
+    bottom: 10px;
+  }
+}

examples/basic-crud-application/angular-client/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

examples/basic-crud-application/angular-client/tsconfig.json

@@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

examples/basic-crud-application/angular-client/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

examples/basic-crud-application/common/events.ts

@@ -0,0 +1,46 @@
+export type TodoID = string;
+
+export interface Todo {
+  id: TodoID;
+  completed: boolean;
+  title: string;
+}
+
+interface Error {
+  error: string;
+  errorDetails?: {
+    message: string;
+    path: Array<string | number>;
+    type: string;
+  }[];
+}
+
+interface Success<T> {
+  data: T;
+}
+
+export type Response<T> = Error | Success<T>;
+
+export interface ServerEvents {
+  "todo:created": (todo: Todo) => void;
+  "todo:updated": (todo: Todo) => void;
+  "todo:deleted": (id: TodoID) => void;
+}
+
+export interface ClientEvents {
+  "todo:list": (callback: (res: Response<Todo[]>) => void) => void;
+
+  "todo:create": (
+    payload: Omit<Todo, "id">,
+    callback: (res: Response<TodoID>) => void
+  ) => void;
+
+  "todo:read": (id: TodoID, callback: (res: Response<Todo>) => void) => void;
+
+  "todo:update": (
+    payload: Todo,
+    callback: (res?: Response<void>) => void
+  ) => void;
+
+  "todo:delete": (id: TodoID, callback: (res?: Response<void>) => void) => void;
+}

examples/basic-crud-application/server-postgres-cluster/README.md

@@ -0,0 +1,16 @@
+
+A basic TODO project.
+
+| Characteristic |                                                                                           |
+|----------------|-------------------------------------------------------------------------------------------|
+| Language       | plain JavaScript                                                                          |
+| Database       | Postgres, with the [Postgres adapter](https://socket.io/docs/v4/postgres-adapter/)        |
+| Cluster?       | Yes, with the [`@socket.io/sticky`](https://github.com/socketio/socket.io-sticky) module) |
+
+## Usage
+
+```
+$ docker-compose up -d
+$ npm install
+$ npm start
+```

examples/basic-crud-application/server-postgres-cluster/docker-compose.yml

@@ -0,0 +1,9 @@
+version: "3"
+
+services:
+  postgres:
+    image: postgres:12
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_PASSWORD: "changeit"

examples/basic-crud-application/server-postgres-cluster/lib/app.js

@@ -0,0 +1,26 @@
+import { Server } from "socket.io";
+import createTodoHandlers from "./todo-management/todo.handlers.js";
+import { setupWorker } from "@socket.io/sticky";
+import { createAdapter } from "@socket.io/postgres-adapter";
+
+export function createApplication(httpServer, components, serverOptions = {}) {
+  const io = new Server(httpServer, serverOptions);
+
+  const { createTodo, readTodo, updateTodo, deleteTodo, listTodo } =
+    createTodoHandlers(components);
+
+  io.on("connection", (socket) => {
+    socket.on("todo:create", createTodo);
+    socket.on("todo:read", readTodo);
+    socket.on("todo:update", updateTodo);
+    socket.on("todo:delete", deleteTodo);
+    socket.on("todo:list", listTodo);
+  });
+
+  // enable sticky session in the cluster (to remove in standalone mode)
+  setupWorker(io);
+
+  io.adapter(createAdapter(components.connectionPool));
+
+  return io;
+}

examples/basic-crud-application/server-postgres-cluster/lib/cluster.js

@@ -0,0 +1,28 @@
+import cluster from "cluster";
+import { createServer } from "http";
+import { setupMaster } from "@socket.io/sticky";
+import { cpus } from "os";
+
+if (cluster.isMaster) {
+  console.log(`Master ${process.pid} is running`);
+  const httpServer = createServer();
+
+  setupMaster(httpServer, {
+    loadBalancingMethod: "least-connection",
+  });
+
+  httpServer.listen(3000);
+
+  for (let i = 0; i < cpus().length; i++) {
+    cluster.fork();
+  }
+
+  cluster.on("exit", (worker) => {
+    console.log(`Worker ${worker.process.pid} died`);
+    cluster.fork();
+  });
+} else {
+  console.log(`Worker ${process.pid} started`);
+
+  import("./index.js");
+}

examples/basic-crud-application/server-postgres-cluster/lib/index.js

@@ -0,0 +1,51 @@
+import { createServer } from "http";
+import { createApplication } from "./app.js";
+import { Sequelize } from "sequelize";
+import pg from "pg";
+import { PostgresTodoRepository } from "./todo-management/todo.repository.js";
+
+const httpServer = createServer();
+
+const sequelize = new Sequelize("postgres", "postgres", "changeit", {
+  dialect: "postgres",
+});
+
+const connectionPool = new pg.Pool({
+  user: "postgres",
+  host: "localhost",
+  database: "postgres",
+  password: "changeit",
+  port: 5432,
+});
+
+createApplication(
+  httpServer,
+  {
+    connectionPool,
+    todoRepository: new PostgresTodoRepository(sequelize),
+  },
+  {
+    cors: {
+      origin: ["http://localhost:4200"],
+    },
+  }
+);
+
+const main = async () => {
+  // create the tables if they do not exist already
+  await sequelize.sync();
+
+  // create the table needed by the postgres adapter
+  await connectionPool.query(`
+    CREATE TABLE IF NOT EXISTS socket_io_attachments (
+        id          bigserial UNIQUE,
+        created_at  timestamptz DEFAULT NOW(),
+        payload     bytea
+    );
+  `);
+
+  // uncomment when running in standalone mode
+  // httpServer.listen(3000);
+};
+
+main();

examples/basic-crud-application/server-postgres-cluster/lib/todo-management/todo.handlers.js

@@ -0,0 +1,140 @@
+import { Errors, mapErrorDetails, sanitizeErrorMessage } from "../util.js";
+import { v4 as uuid } from "uuid";
+import Joi from "joi";
+
+const idSchema = Joi.string().guid({
+  version: "uuidv4",
+});
+
+const todoSchema = Joi.object({
+  id: idSchema.alter({
+    create: (schema) => schema.forbidden(),
+    update: (schema) => schema.required(),
+  }),
+  title: Joi.string().max(256).required(),
+  completed: Joi.boolean().required(),
+});
+
+export default function (components) {
+  const { todoRepository } = components;
+  return {
+    createTodo: async function (payload, callback) {
+      const socket = this;
+
+      // validate the payload
+      const { error, value } = todoSchema.tailor("create").validate(payload, {
+        abortEarly: false,
+        stripUnknown: true,
+      });
+
+      if (error) {
+        return callback({
+          error: Errors.INVALID_PAYLOAD,
+          errorDetails: mapErrorDetails(error.details),
+        });
+      }
+
+      value.id = uuid();
+
+      // persist the entity
+      try {
+        await todoRepository.save(value);
+      } catch (e) {
+        return callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+
+      // acknowledge the creation
+      callback({
+        data: value.id,
+      });
+
+      // notify the other users
+      socket.broadcast.emit("todo:created", value);
+    },
+
+    readTodo: async function (id, callback) {
+      const { error } = idSchema.validate(id);
+
+      if (error) {
+        return callback({
+          error: Errors.ENTITY_NOT_FOUND,
+        });
+      }
+
+      try {
+        const todo = await todoRepository.findById(id);
+        callback({
+          data: todo,
+        });
+      } catch (e) {
+        callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+    },
+
+    updateTodo: async function (payload, callback) {
+      const socket = this;
+
+      const { error, value } = todoSchema.tailor("update").validate(payload, {
+        abortEarly: false,
+        stripUnknown: true,
+      });
+
+      if (error) {
+        return callback({
+          error: Errors.INVALID_PAYLOAD,
+          errorDetails: mapErrorDetails(error.details),
+        });
+      }
+
+      try {
+        await todoRepository.save(value);
+      } catch (e) {
+        return callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+
+      callback();
+      socket.broadcast.emit("todo:updated", value);
+    },
+
+    deleteTodo: async function (id, callback) {
+      const socket = this;
+
+      const { error } = idSchema.validate(id);
+
+      if (error) {
+        return callback({
+          error: Errors.ENTITY_NOT_FOUND,
+        });
+      }
+
+      try {
+        await todoRepository.deleteById(id);
+      } catch (e) {
+        return callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+
+      callback();
+      socket.broadcast.emit("todo:deleted", id);
+    },
+
+    listTodo: async function (callback) {
+      try {
+        callback({
+          data: await todoRepository.findAll(),
+        });
+      } catch (e) {
+        callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+    },
+  };
+}

examples/basic-crud-application/server-postgres-cluster/lib/todo-management/todo.repository.js

@@ -0,0 +1,74 @@
+import { Errors } from "../util.js";
+import { Model, DataTypes } from "sequelize";
+
+class CrudRepository {
+  findAll() {}
+  findById(id) {}
+  save(entity) {}
+  deleteById(id) {}
+}
+
+export class TodoRepository extends CrudRepository {}
+
+class Todo extends Model {}
+
+export class PostgresTodoRepository extends TodoRepository {
+  constructor(sequelize) {
+    super();
+    this.sequelize = sequelize;
+
+    Todo.init(
+      {
+        id: {
+          type: DataTypes.STRING,
+          primaryKey: true,
+          allowNull: false,
+        },
+        title: {
+          type: DataTypes.STRING,
+        },
+        completed: {
+          type: DataTypes.BOOLEAN,
+        },
+      },
+      {
+        sequelize,
+        tableName: "todos",
+      }
+    );
+  }
+
+  findAll() {
+    return this.sequelize.transaction((transaction) => {
+      return Todo.findAll({ transaction });
+    });
+  }
+
+  async findById(id) {
+    return this.sequelize.transaction(async (transaction) => {
+      const todo = await Todo.findByPk(id, { transaction });
+
+      if (!todo) {
+        throw Errors.ENTITY_NOT_FOUND;
+      }
+
+      return todo;
+    });
+  }
+
+  save(entity) {
+    return this.sequelize.transaction((transaction) => {
+      return Todo.upsert(entity, { transaction });
+    });
+  }
+
+  async deleteById(id) {
+    return this.sequelize.transaction(async (transaction) => {
+      const count = await Todo.destroy({ where: { id }, transaction });
+
+      if (count === 0) {
+        throw Errors.ENTITY_NOT_FOUND;
+      }
+    });
+  }
+}

examples/basic-crud-application/server-postgres-cluster/lib/util.js

@@ -0,0 +1,22 @@
+export const Errors = {
+  ENTITY_NOT_FOUND: "entity not found",
+  INVALID_PAYLOAD: "invalid payload",
+};
+
+const errorValues = Object.values(Errors);
+
+export function sanitizeErrorMessage(message) {
+  if (typeof message === "string" && errorValues.includes(message)) {
+    return message;
+  } else {
+    return "an unknown error has occurred";
+  }
+}
+
+export function mapErrorDetails(details) {
+  return details.map((item) => ({
+    message: item.message,
+    path: item.path,
+    type: item.type,
+  }));
+}

examples/basic-crud-application/server-postgres-cluster/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "basic-crud-server",
+  "version": "0.0.1",
+  "description": "Server for the Basic CRUD Socket.IO example (with Postgres and multiple Socket.IO servers)",
+  "main": "lib/cluster.js",
+  "type": "module",
+  "scripts": {
+    "start": "node lib/cluster.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/socketio/socket.io.git"
+  },
+  "author": "Damien Arrachequesne <damien.arrachequesne@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/socketio/socket.io/issues"
+  },
+  "homepage": "https://github.com/socketio/socket.io#readme",
+  "dependencies": {
+    "@socket.io/postgres-adapter": "^0.2.0",
+    "@socket.io/sticky": "^1.0.1",
+    "joi": "^17.4.0",
+    "pg": "^8.7.3",
+    "pg-hstore": "^2.3.4",
+    "sequelize": "^6.18.0",
+    "socket.io": "^4.0.1",
+    "uuid": "^8.3.2"
+  }
+}

examples/basic-crud-application/server/lib/app.ts

@@ -0,0 +1,35 @@
+import { Server as HttpServer } from "http";
+import { Server, ServerOptions } from "socket.io";
+import { ClientEvents, ServerEvents } from "../../common/events";
+import { TodoRepository } from "./todo-management/todo.repository";
+import createTodoHandlers from "./todo-management/todo.handlers";
+
+export interface Components {
+  todoRepository: TodoRepository;
+}
+
+export function createApplication(
+  httpServer: HttpServer,
+  components: Components,
+  serverOptions: Partial<ServerOptions> = {}
+): Server<ClientEvents, ServerEvents> {
+  const io = new Server<ClientEvents, ServerEvents>(httpServer, serverOptions);
+
+  const {
+    createTodo,
+    readTodo,
+    updateTodo,
+    deleteTodo,
+    listTodo,
+  } = createTodoHandlers(components);
+
+  io.on("connection", (socket) => {
+    socket.on("todo:create", createTodo);
+    socket.on("todo:read", readTodo);
+    socket.on("todo:update", updateTodo);
+    socket.on("todo:delete", deleteTodo);
+    socket.on("todo:list", listTodo);
+  });
+
+  return io;
+}

examples/basic-crud-application/server/lib/index.ts

@@ -0,0 +1,19 @@
+import { createServer } from "http";
+import { createApplication } from "./app";
+import { InMemoryTodoRepository } from "./todo-management/todo.repository";
+
+const httpServer = createServer();
+
+createApplication(
+  httpServer,
+  {
+    todoRepository: new InMemoryTodoRepository(),
+  },
+  {
+    cors: {
+      origin: ["http://localhost:4200"],
+    },
+  }
+);
+
+httpServer.listen(3000);

examples/basic-crud-application/server/lib/todo-management/todo.handlers.ts

@@ -0,0 +1,163 @@
+import { Errors, mapErrorDetails, sanitizeErrorMessage } from "../util";
+import { v4 as uuid } from "uuid";
+import { Components } from "../app";
+import Joi = require("joi");
+import {
+  Todo,
+  TodoID,
+  ClientEvents,
+  Response,
+  ServerEvents,
+} from "../../../common/events";
+import { Socket } from "socket.io";
+
+const idSchema = Joi.string().guid({
+  version: "uuidv4",
+});
+
+const todoSchema = Joi.object({
+  id: idSchema.alter({
+    create: (schema) => schema.forbidden(),
+    update: (schema) => schema.required(),
+  }),
+  title: Joi.string().max(256).required(),
+  completed: Joi.boolean().required(),
+});
+
+export default function ({ todoRepository }: Components) {
+  return {
+    createTodo: async function (
+      payload: Omit<Todo, "id">,
+      callback: (res: Response<TodoID>) => void
+    ) {
+      // @ts-ignore
+      const socket: Socket<ClientEvents, ServerEvents> = this;
+
+      // validate the payload
+      const { error, value } = todoSchema.tailor("create").validate(payload, {
+        abortEarly: false,
+        stripUnknown: true,
+      });
+
+      if (error) {
+        return callback({
+          error: Errors.INVALID_PAYLOAD,
+          errorDetails: mapErrorDetails(error.details),
+        });
+      }
+
+      value.id = uuid();
+
+      // persist the entity
+      try {
+        await todoRepository.save(value);
+      } catch (e) {
+        return callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+
+      // acknowledge the creation
+      callback({
+        data: value.id,
+      });
+
+      // notify the other users
+      socket.broadcast.emit("todo:created", value);
+    },
+
+    readTodo: async function (
+      id: TodoID,
+      callback: (res: Response<Todo>) => void
+    ) {
+      const { error } = idSchema.validate(id);
+
+      if (error) {
+        return callback({
+          error: Errors.ENTITY_NOT_FOUND,
+        });
+      }
+
+      try {
+        const todo = await todoRepository.findById(id);
+        callback({
+          data: todo,
+        });
+      } catch (e) {
+        callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+    },
+
+    updateTodo: async function (
+      payload: Todo,
+      callback: (res?: Response<void>) => void
+    ) {
+      // @ts-ignore
+      const socket: Socket<ClientEvents, ServerEvents> = this;
+
+      const { error, value } = todoSchema.tailor("update").validate(payload, {
+        abortEarly: false,
+        stripUnknown: true,
+      });
+
+      if (error) {
+        return callback({
+          error: Errors.INVALID_PAYLOAD,
+          errorDetails: mapErrorDetails(error.details),
+        });
+      }
+
+      try {
+        await todoRepository.save(value);
+      } catch (e) {
+        return callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+
+      callback();
+      socket.broadcast.emit("todo:updated", value);
+    },
+
+    deleteTodo: async function (
+      id: TodoID,
+      callback: (res?: Response<void>) => void
+    ) {
+      // @ts-ignore
+      const socket: Socket<ClientEvents, ServerEvents> = this;
+
+      const { error } = idSchema.validate(id);
+
+      if (error) {
+        return callback({
+          error: Errors.ENTITY_NOT_FOUND,
+        });
+      }
+
+      try {
+        await todoRepository.deleteById(id);
+      } catch (e) {
+        return callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+
+      callback();
+      socket.broadcast.emit("todo:deleted", id);
+    },
+
+    listTodo: async function (callback: (res: Response<Todo[]>) => void) {
+      try {
+        callback({
+          data: await todoRepository.findAll(),
+        });
+      } catch (e) {
+        callback({
+          error: sanitizeErrorMessage(e),
+        });
+      }
+    },
+  };
+}

examples/basic-crud-application/server/lib/todo-management/todo.repository.ts

@@ -0,0 +1,42 @@
+import { Errors } from "../util";
+import { Todo, TodoID } from "../../../common/events";
+
+abstract class CrudRepository<T, ID> {
+  abstract findAll(): Promise<T[]>;
+  abstract findById(id: ID): Promise<T>;
+  abstract save(entity: T): Promise<void>;
+  abstract deleteById(id: ID): Promise<void>;
+}
+
+export abstract class TodoRepository extends CrudRepository<Todo, TodoID> {}
+
+export class InMemoryTodoRepository extends TodoRepository {
+  private readonly todos: Map<TodoID, Todo> = new Map();
+
+  findAll(): Promise<Todo[]> {
+    const entities = Array.from(this.todos.values());
+    return Promise.resolve(entities);
+  }
+
+  findById(id: TodoID): Promise<Todo> {
+    if (this.todos.has(id)) {
+      return Promise.resolve(this.todos.get(id)!);
+    } else {
+      return Promise.reject(Errors.ENTITY_NOT_FOUND);
+    }
+  }
+
+  save(entity: Todo): Promise<void> {
+    this.todos.set(entity.id, entity);
+    return Promise.resolve();
+  }
+
+  deleteById(id: TodoID): Promise<void> {
+    const deleted = this.todos.delete(id);
+    if (deleted) {
+      return Promise.resolve();
+    } else {
+      return Promise.reject(Errors.ENTITY_NOT_FOUND);
+    }
+  }
+}

examples/basic-crud-application/server/lib/util.ts

@@ -0,0 +1,24 @@
+import { ValidationErrorItem } from "joi";
+
+export enum Errors {
+  ENTITY_NOT_FOUND = "entity not found",
+  INVALID_PAYLOAD = "invalid payload",
+}
+
+const errorValues: string[] = Object.values(Errors);
+
+export function sanitizeErrorMessage(message: any) {
+  if (typeof message === "string" && errorValues.includes(message)) {
+    return message;
+  } else {
+    return "an unknown error has occurred";
+  }
+}
+
+export function mapErrorDetails(details: ValidationErrorItem[]) {
+  return details.map((item) => ({
+    message: item.message,
+    path: item.path,
+    type: item.type,
+  }));
+}

examples/basic-crud-application/server/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "basic-crud-server",
+  "version": "0.0.1",
+  "description": "Server for the Basic CRUD Socket.IO example",
+  "main": "dist/lib/index.js",
+  "scripts": {
+    "start": "ts-node lib/index.ts",
+    "build": "tsc",
+    "test": "nyc mocha --require ts-node/register test/**/*.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/socketio/socket.io.git"
+  },
+  "author": "Damien Arrachequesne <damien.arrachequesne@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/socketio/socket.io/issues"
+  },
+  "homepage": "https://github.com/socketio/socket.io#readme",
+  "dependencies": {
+    "joi": "^17.4.0",
+    "socket.io": "^4.0.1",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.2.16",
+    "@types/mocha": "^10.0.0",
+    "@types/uuid": "^8.3.0",
+    "chai": "^4.3.4",
+    "mocha": "^10.0.0",
+    "nyc": "^15.1.0",
+    "socket.io-client": "^4.0.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.2.4"
+  }
+}

examples/basic-crud-application/server/test/todo-management/todo.tests.ts

@@ -0,0 +1,309 @@
+import { createApplication } from "../../lib/app";
+import { createServer, Server } from "http";
+import {
+  InMemoryTodoRepository,
+  TodoRepository,
+} from "../../lib/todo-management/todo.repository";
+import { AddressInfo } from "net";
+import { io, Socket } from "socket.io-client";
+import { ClientEvents, ServerEvents } from "../../lib/events";
+import { expect } from "chai";
+
+const createPartialDone = (count: number, done: () => void) => {
+  let i = 0;
+  return () => {
+    if (++i === count) {
+      done();
+    }
+  };
+};
+
+describe("todo management", () => {
+  let httpServer: Server,
+    socket: Socket<ServerEvents, ClientEvents>,
+    otherSocket: Socket<ServerEvents, ClientEvents>,
+    todoRepository: TodoRepository;
+
+  beforeEach((done) => {
+    const partialDone = createPartialDone(2, done);
+
+    httpServer = createServer();
+    todoRepository = new InMemoryTodoRepository();
+
+    createApplication(httpServer, {
+      todoRepository,
+    });
+
+    httpServer.listen(() => {
+      const port = (httpServer.address() as AddressInfo).port;
+      socket = io(`http://localhost:${port}`);
+      socket.on("connect", partialDone);
+
+      otherSocket = io(`http://localhost:${port}`);
+      otherSocket.on("connect", partialDone);
+    });
+  });
+
+  afterEach(() => {
+    httpServer.close();
+    socket.disconnect();
+    otherSocket.disconnect();
+  });
+
+  describe("create todo", () => {
+    it("should create a todo entity", (done) => {
+      const partialDone = createPartialDone(2, done);
+
+      socket.emit(
+        "todo:create",
+        {
+          title: "lorem ipsum",
+          completed: false,
+        },
+        async (res) => {
+          if ("error" in res) {
+            return done(new Error("should not happen"));
+          }
+          expect(res.data).to.be.a("string");
+
+          const storedEntity = await todoRepository.findById(res.data);
+          expect(storedEntity).to.eql({
+            id: res.data,
+            title: "lorem ipsum",
+            completed: false,
+          });
+
+          partialDone();
+        }
+      );
+
+      otherSocket.on("todo:created", (todo) => {
+        expect(todo.id).to.be.a("string");
+        expect(todo.title).to.eql("lorem ipsum");
+        expect(todo.completed).to.eql(false);
+        partialDone();
+      });
+    });
+
+    it("should fail with an invalid entity", (done) => {
+      const incompleteTodo = {
+        completed: "false",
+        description: true,
+      };
+      // @ts-ignore
+      socket.emit("todo:create", incompleteTodo, (res) => {
+        if (!("error" in res)) {
+          return done(new Error("should not happen"));
+        }
+        expect(res.error).to.eql("invalid payload");
+        expect(res.errorDetails).to.eql([
+          {
+            message: '"title" is required',
+            path: ["title"],
+            type: "any.required",
+          },
+        ]);
+        done();
+      });
+
+      otherSocket.on("todo:created", () => {
+        done(new Error("should not happen"));
+      });
+    });
+  });
+
+  describe("read todo", () => {
+    it("should return a todo entity", (done) => {
+      todoRepository.save({
+        id: "254dbf85-f5b9-4675-b913-acab5d600884",
+        title: "lorem ipsum",
+        completed: true,
+      });
+
+      socket.emit(
+        "todo:read",
+        "254dbf85-f5b9-4675-b913-acab5d600884",
+        (res) => {
+          if ("error" in res) {
+            return done(new Error("should not happen"));
+          }
+          expect(res.data.id).to.eql("254dbf85-f5b9-4675-b913-acab5d600884");
+          expect(res.data.title).to.eql("lorem ipsum");
+          expect(res.data.completed).to.eql(true);
+          done();
+        }
+      );
+    });
+
+    it("should fail with an invalid ID", (done) => {
+      socket.emit("todo:read", "123", (res) => {
+        if ("error" in res) {
+          expect(res.error).to.eql("entity not found");
+          done();
+        } else {
+          done(new Error("should not happen"));
+        }
+      });
+    });
+
+    it("should fail with an unknown entity", (done) => {
+      socket.emit(
+        "todo:read",
+        "6edcf81e-7049-40e0-8497-9cdd52414f75",
+        (res) => {
+          if ("error" in res) {
+            expect(res.error).to.eql("entity not found");
+            done();
+          } else {
+            done(new Error("should not happen"));
+          }
+        }
+      );
+    });
+  });
+
+  describe("update todo", () => {
+    it("should update a todo entity", (done) => {
+      const partialDone = createPartialDone(2, done);
+
+      todoRepository.save({
+        id: "c7790b35-6bbb-45dd-8d67-a281ca407b43",
+        title: "lorem ipsum",
+        completed: true,
+      });
+
+      socket.emit(
+        "todo:update",
+        {
+          id: "c7790b35-6bbb-45dd-8d67-a281ca407b43",
+          title: "dolor sit amet",
+          completed: true,
+        },
+        async () => {
+          const storedEntity = await todoRepository.findById(
+            "c7790b35-6bbb-45dd-8d67-a281ca407b43"
+          );
+          expect(storedEntity).to.eql({
+            id: "c7790b35-6bbb-45dd-8d67-a281ca407b43",
+            title: "dolor sit amet",
+            completed: true,
+          });
+          partialDone();
+        }
+      );
+
+      otherSocket.on("todo:updated", (todo) => {
+        expect(todo.title).to.eql("dolor sit amet");
+        expect(todo.completed).to.eql(true);
+        partialDone();
+      });
+    });
+
+    it("should fail with an invalid entity", (done) => {
+      const incompleteTodo = {
+        id: "123",
+        completed: "false",
+        description: true,
+      };
+      // @ts-ignore
+      socket.emit("todo:update", incompleteTodo, (res) => {
+        if (!(res && "error" in res)) {
+          return done(new Error("should not happen"));
+        }
+        expect(res.error).to.eql("invalid payload");
+        expect(res.errorDetails).to.eql([
+          {
+            message: '"id" must be a valid GUID',
+            path: ["id"],
+            type: "string.guid",
+          },
+          {
+            message: '"title" is required',
+            path: ["title"],
+            type: "any.required",
+          },
+        ]);
+        done();
+      });
+
+      otherSocket.on("todo:updated", () => {
+        done(new Error("should not happen"));
+      });
+    });
+  });
+
+  describe("delete todo", () => {
+    it("should delete a todo entity", (done) => {
+      const partialDone = createPartialDone(2, done);
+      const id = "58960ab2-4e78-4ced-8079-134f12179d46";
+
+      todoRepository.save({
+        id,
+        title: "lorem ipsum",
+        completed: true,
+      });
+
+      socket.emit("todo:delete", id, async () => {
+        try {
+          await todoRepository.findById(id);
+        } catch (e) {
+          partialDone();
+        }
+      });
+
+      otherSocket.on("todo:deleted", (id) => {
+        expect(id).to.eql("58960ab2-4e78-4ced-8079-134f12179d46");
+        partialDone();
+      });
+    });
+
+    it("should fail with an invalid ID", (done) => {
+      socket.emit("todo:delete", "123", (res) => {
+        if (!(res && "error" in res)) {
+          return done(new Error("should not happen"));
+        }
+        expect(res.error).to.eql("entity not found");
+        done();
+      });
+
+      otherSocket.on("todo:deleted", () => {
+        done(new Error("should not happen"));
+      });
+    });
+  });
+
+  describe("list todo", () => {
+    it("should return a list of entities", (done) => {
+      todoRepository.save({
+        id: "d445db6d-9d55-4ff2-88ae-bd1f81c299d2",
+        title: "lorem ipsum",
+        completed: false,
+      });
+
+      todoRepository.save({
+        id: "5f56fb59-a887-4984-93bf-eb39b4170a35",
+        title: "dolor sit amet",
+        completed: true,
+      });
+
+      socket.emit("todo:list", (res) => {
+        if ("error" in res) {
+          return done(new Error("should not happen"));
+        }
+        expect(res.data).to.eql([
+          {
+            id: "d445db6d-9d55-4ff2-88ae-bd1f81c299d2",
+            title: "lorem ipsum",
+            completed: false,
+          },
+          {
+            id: "5f56fb59-a887-4984-93bf-eb39b4170a35",
+            title: "dolor sit amet",
+            completed: true,
+          },
+        ]);
+        done();
+      });
+    });
+  });
+});

examples/basic-crud-application/server/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "module": "commonjs",
+    "target": "es2017",
+    "strict": true
+  },
+  "include": [
+    "./lib/**/*"
+  ]
+}

examples/basic-crud-application/vue-client/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/basic-crud-application/vue-client/README.md

@@ -0,0 +1,24 @@
+# vue-client
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

examples/basic-crud-application/vue-client/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}