Better text encoding (option A)

.eslintrc.json

@@ -1,12 +1,12 @@
 {
     "env": {
         "browser": true,
-        "es6": true,
+        "es2021": true,
         "node": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {
-        "ecmaVersion": 2017,
+        "ecmaVersion": "latest",
         "sourceType": "module"
     },
     "rules": {
@@ -30,6 +30,10 @@
         "no-console": [
             "error",
             { "allow": ["info", "error"] }
+        ],
+        "spaced-comment": [
+            "error",
+            "always"
         ]
     }
 }

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Thomas Jarrand
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Makefile

@@ -1,22 +1,34 @@
+.SILENT:
+.PHONY: test
+
+# Install dependencies
 install:
 	npm install
 
+# Launch watch
 watch:
-	./node_modules/.bin/webpack --watch --mode=development
+	npx webpack --watch --mode=development
 
+# Build lib
 build:
-	./node_modules/.bin/webpack --mode=production
-
-start: demo-client demo-server
+	npx webpack --mode=production
 
+# Launch demo client
 demo-client:
 	php -S 0.0.0.0:8000 -t .
 
+# Launch demo server
 demo-server:
 	node ./demo-server.js 8002
 
+# Lint and code style fix
 lint:
-	./node_modules/.bin/eslint src/* --ext .js,.json --fix
+	npx eslint src/* --ext .js,.json --fix
+
+# Test
+test: build
+	npx mocha
 
+# Publish package
 publish: build
 	npm publish . --access public

README.md

@@ -1,18 +1,103 @@
 Netcode
 =======
 
-A simple client & server binary-encoded websocket communication system for web video games.
+> A simple JavaScript client & server binary-encoded websocket communication system aimed towards web video games development.
+
+Features:
+- 🔌 Server / Client duo, for node and the browser, that handle Websocket connection and communication.
+- ⚡️ Handle the binary encoding and decoding of your data, with performances in mind.
+- 📢 Listen for event dispatched over websocket with simple `on`/`off` event emitter system.
+- 💬 Fallback to JSON for easy debugging.
+
+## Requirements
+
+- Node >= v8.0.0
 
 ## Installation
 
 `npm add netcode`
 
-## Usage
+## Get started
+
+### Define a list of events
+
+The server and the client __must__ share the same events.
+An event is defined by its _unique_ name and the corresponding codec, responsible for encoding and decoding the data.
+
+```javascript
+// events.js
+import Int8Codec from 'netcode/src/encoder/codec/Int8Codec';
+import StringCodec from 'netcode/src/encoder/codec/StringCodec';
+
+export default [
+	['id', new Int8Codec()],
+	['say', new StringCodec()],
+];
+```
+
+In this example, the event list define how to send the following events over websocket:
+
+- `client.send('id', 255);`
+- `client.send('say', 'Hello world!');`
+
+Then you'll be able to listen to this events on the client as follow:
+
+- `client.on('id', id => { /* Do something */ });`
+- `client.on('say', sentence => { /* Do something */ });`
+
+Now let's create a server and an client that use this event list.
+
+### Setup a Server
+
+We setup a server specifying the port and host on which the server will listen and the type of encoder to use.
+Here we use a BinaryEncoder to communicate in binary over websocket, with the previously configured event list.
+
+```javascript
+import Server from 'netcode/src/server/Server';
+import BinaryEncoder from 'netcode/src/encoder/BinaryEncoder';
+import events from './events';
+
+// Listen on localhost:8080
+const server = new Server(8080, 'localhost', new BinaryEncoder(events));
+
+server.on('client:join', client => {
+	client.on('say', sentence => console.log(sentence));
+	client.send('id', client.id);
+});
+```
+
+Now we've got a server running at `localhost:8080` that listen for a `say` text event and send a `id` integer event to every client that connects.
+
+_See an [full example of server setup](demo-server.js)._
+
+### Write a Client
+
+Now we write a client, for the browser, that connects to our running server on `ws://localhost:8080` and use a BinaryEncoder with the same event list as the server.
+
+```javascript
+import Client from 'netcode/src/client/Client';
+import BinaryEncoder from 'netcode/src/encoder/BinaryEncoder';
+import events from './events';
+
+const client = new Client('ws://localhost:8080', new BinaryEncoder(events))
+
+client.on('open', () => {
+	client.on('id', id => console.log(`My id is ${id}.`));
+	client.send('say', 'Hello world!');
+});
+```
+
+Now we've got client that listen for the `id` event and sent a sentence in a `say` event.
+
+Connection is alive and well!
 
-### Server side (node)
+_See an [full example of client setup](demo-client.js)._
 
-See an [example of server setup](demo-server.js).
+## Complete documentation
 
-### Client side (browser)
+To go further, see in-depth documentation and how-to's.
 
-See an [example of client setup](demo-client.js).
+- [Full API reference](doc/API.md).
+- [Default codecs and how-to write your own](doc/codecs.md).
+- [About packaging and setting up your own webpack configuration](doc/packaging.md).
+- [Use netcode over a custom domain name and/or secured SSL connection](doc/ssl.md).

demo-client.js

@@ -1,52 +1,63 @@
-
 window.addEventListener('load', () => {
-    const { Client, BinaryEncoder, Codec, Int16Codec, LongIntCodec, BooleanCodec, StringCodec } = netcode;
+    const { Client, BinaryEncoder, Codec, Int8Codec, Int16Codec, LongIntCodec, BooleanCodec, StringCodec } = netcode;
 
     // Register your events
     const encoder = new BinaryEncoder([
-        ['open', new Codec()],
         ['id', new Int16Codec()],
         ['ping', new LongIntCodec(6)],
         ['pong', new LongIntCodec(6)],
         ['inverse', new BooleanCodec()],
         ['greeting', new StringCodec()],
+        ['total', new Int8Codec()],
     ]);
 
     // Create the client
-    const client = new Client('ws://localhost:8002', encoder);
+    const client = new Client('ws://127.0.0.1:8002', encoder);
     let ping;
 
     // Listen for a "pong" event
-    client.addEventListener('pong', pong => {
+    client.on('pong', ({ detail: pong }) => {
         console.info('pong: %s ms', pong - ping);
     });
 
     // Listen for an "id" event
-    client.addEventListener('id', id => {
+    client.on('id', ({ detail: id }) => {
         console.log('connected with id %s', id);
         ping = Date.now();
 
         // Send a "ping" event
         client.send('ping', ping);
     });
 
+    // Listen for a "total" event
+    client.on('total', ({ detail: total }) => {
+        console.log(`There is ${total} people connected.`)
+    });
+
     // Listen for an "inverse" event
-    client.addEventListener('inverse', status => {
+    client.on('inverse', ({ detail: status }) => {
         // Answer with an "inverse" event
         client.send('inverse', !status);
         console.log('Inverse received: %s', status);
 
         // Send a "greeting" event
-        client.send('greeting', 'Hello, I\'m client!');
+        client.send('greeting', 'Hello, I\'m client 😊!');
     });
 
     // Listen for a "greeting" event
-    client.addEventListener('greeting', message => {
+    client.on('greeting', ({ detail: message }) => {
         console.log('Servers geets you: "%s"', message);
     });
 
     // Listen for oppening connection
-    client.addEventListener('open', () => {
+    client.on('open', () => {
         console.info('Connection open.');
+
+        setTimeout(() => client.close(), 20 * 1000);
+    });
+
+    // Listen for connection close
+    client.on('close', () => {
+        console.info('Connection closed.');
     });
 });

demo-server.js

@@ -1,24 +1,25 @@
-const { Server, BinaryEncoder, Codec, Int16Codec, LongIntCodec, BooleanCodec, StringCodec } = require('./server');
+const { Server, BinaryEncoder, Codec, Int8Codec, Int16Codec, LongIntCodec, BooleanCodec, StringCodec } = require('./server');
 
 // Register your events
 const encoder = new BinaryEncoder([
-    ['open', new Codec()],
     ['id', new Int16Codec()],
     ['ping', new LongIntCodec(6)],
     ['pong', new LongIntCodec(6)],
     ['inverse', new BooleanCodec()],
     ['greeting', new StringCodec()],
+    ['total', new Int8Codec()],
 ]);
 
 // Create the server
-const server = new Server(process.argv[2], 'localhost', encoder);
+const port = process.argv[2];
+const server = new Server(port, '127.0.0.1', encoder, 3);
 
 // Listen for new clients
-server.addListener('client:join', client => {
+server.on('client:join', client => {
     console.log('Client %s joined.', client.id);
 
     // Listen for "ping" event
-    client.addListener('ping', ping => {
+    client.on('ping', ping => {
         // Answer with a "pong" event
         client.send('pong', Date.now());
         console.log('Client %s ping received: %s.', client.id, ping);
@@ -28,24 +29,34 @@ server.addListener('client:join', client => {
     });
 
     // Listen for "inverse" event
-    client.addListener('inverse', status => {
+    client.on('inverse', status => {
         console.log('Client %s inverse received: %s.', client.id, status);
     });
 
     // Listen for "greeting" event
-    client.addListener('greeting', message => {
+    client.on('greeting', message => {
         console.log('Client %s geets you: "%s"', client.id, message);
         // Send a "greeting" event
-        client.send('greeting', 'Hello, I\'m server!');
+        client.send('greeting', 'Hello, I\'m server 😊!');
     });
 
     // Send event "id" to the client
     client.send('id', client.id);
+
+    broadcastTotal();
 });
 
 // Listen for disconnecting clients
-server.addListener('client:leave', client => {
+server.on('client:leave', client => {
     console.log('Client %s left.', client.id);
+    broadcastTotal();
 });
 
+server.on('ready', () => console.log('Listening on port %s', port));
+
+function broadcastTotal() {
+    const { length } = server.clients;
+    server.clients.forEach(client => client.send('total', length));
+}
+
 module.exports = server;