Démarrer avec Node.js et TypeScript

1-installation.md

Installer un environnement de développement Node.js et TypeScript

Node.js

Installer depuis http://nodejs.org/

• Initialiser un nouveau projet : npm init
• Installer une dépendance : npm install socket.io --save (NOTE: si vous voyez plein de rouge pendant l'installation de socket.io, ne vous inquiétez pas, il essaie de compiler le module avec votre compilateur C++ et s'il échoue, il télécharge une version précompilée à la place)

TypeScript

Différents éditeurs ont du support :

• Atom avec le plugin atom-typescript
• Sublime Text avec le plugin officiel Microsoft
• Visual Studio Code, Webstorm...

Créer un fichier tsconfig.json à la racine du code avec le contenu suivant :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

Pour gérer vos définitions TypeScript pour les modules externes :

• Installer TSD : npm install -g tsd@next
• tsd init à la racine du projet
• tsd install node --save pour installer les définitions pour les APIs de base Node.js
• Installer les définitions pour un module donné tsd install socket.io --save

Dans votre index.ts, rajouter :

 /// <reference path="typings/tsd.d.ts" />

 import * as sio from "socket.io";
 // Bien joué, sio est maintenant correctement typé
 // et votre éditeur propose de la complétion automatique intelligente

2-server-socketio.md

Voici un exemple minimal d'un serveur socket.io, enregistrez-le dans server.ts :

/// <reference path="typings/tsd.d.ts" />

import * as sio from "socket.io";
import * as http from "http";

let httpServer = http.createServer();
// Notre serveur écoutera sur le port TCP 8123 (vous pouvez choisir un autre port bien entendu)
httpServer.listen(8123);

// Je préfère activer le mode websocket uniquement pour les jeux, c'est le plus rapide et fiable
let sioServer = sio(httpServer, { transports: [ "websocket" ] });

sioServer.on("connection", (socket) => {
  console.log(`${socket.id} vient de se connecter (${socket.handshake.address})`);

  socket.on("disconnect", () => { console.log(`${socket.id} vient de se déconnecter (${socket.handshake.address})`); });
  socket.on("hello", onHello);
});

function onHello(callback) {
  console.log(`${this.id} a envoyé le message "hello"`);
  if (typeof callback === "function") {
    // Si le client nous a passé une fonction callback, on lui répond :
    callback("bonjour");
  }
}

Pour lancer le serveur :

• Si votre éditeur n'a pas déjà compiler le .ts en .js pour vous, lancez tsc server.ts
• Pour lancer le serveur, tapez node server.js

Vous pouvez utiliser node-dev (npm install -g node-dev) pour que votre serveur redémarre automatiquement chaque fois que server.js change. Il suffit de le lancer avec node-dev server.js.

3-client-socketio.md

Côté client, si vous bossez avec un client Node.js ou NW.js, vous pouvez installer socket.io-client (npm install socket.io-client --save et tsd install socket.io-client --save).

Si vous voulez travailler dans le navigateur, vous pouvez inclure socket.io avec <script src="/socket.io/socket.io.js"></script> dans votre fichier HTML. Le serveur socket.io sert automatiquement ce fichier sur votre serveur HTTP. Vous pouvez utiliser Express pour servir vos pages HTML et scripts JS facilement (et remplacer le simple serveur http utilisé plus haut par une application express).

Créez un fichier client.ts :

/// <reference path="typings/tsd.d.ts" />

// La ligne qui suit est uniquement nécessaire sous Node.js / NW.js.
// Dans le navigateur, le fichier inclus `socket.io.js` créé automatiquement la variable io pour vous.
import * as io from "socket.io-client";

let socket = io.connect("http://127.0.0.1:8123", { transports: [ "websocket"] });

socket.emit("hello", (result) => {
  console.log(`Le serveur a répondu: ${result}`);
});

Sous Node.js, lancez votre client avec node client.js dans un second terminal. Votre serveur devrait détecter la connexion, recevoir le message "hello" et répondre avec "bonjour".

Super tuto ! Merci encore !!

Super, Merci pour la doc