Dans ce chapitre, nous allons développé la partie front-end d'un chat web en HTML5 / CSS3.

## Pré-requis : 
- Une

Développer la partie front-end d'un chat web avec socket.io

Dans ce chapitre, nous allons développé la partie back-end d'un chat web

## Pré-requis : 
- Une maitrise du HTML/CSS
- Une

Développer la partie back-end d'un chat web avec socket.io

Dans ce chapitre, nous allons développé la base de données d'un chat web avec la librairie better-sqlite3.

## Pré-requis : 
-

Ajouter la base de données d'un chat web avec SQLite3

HTML/CSS

Javascript

Dans ce chapitre, nous allons développé la partie back-end d'un chat web

## Pré-requis : 
- Une maitrise du HTML/CSS
- Une maitrise de JavaScript 
- Une maitrise de Node.JS

## Qu’est-ce qu'un web socket ?

Un web socket est un protocole permettant de créer des canaux de communications entre le client et le server. Il va permettre de partager des données sans utiliser des requètes. On peut l'utiliser pour faire un chat comme ceux de Discord, SnapChat, ... 

## Créer notre socket

### La partie serveur
>Durant cette partie, nous allons utiliser l'ESM.
>
Pour commencer ce chapitre, on va venir créer un dossier pour notre serveur, on va ajouter un dossier public pour ajouter nos fichiers html/css qu'on a fait dans le chapitre précédent, ensuite on va insérer un fichier `index.js` à la racine de notre dossier du serveur.

On va initialiser notre package et installer le module `express` (optionnel) et `socket.io` : 

```
npm init -y
npm install express
npm install socket.io
```

Ensuite, on va ajouter une ligne dans notre `package.json` pour utiliser l'ESM : 

```json
{
	"..."
	"type": "module",
}
```

**Parfait !** Maintenant, on va importer tous les modules dans notre fichier `index.js`.

```js
import express from 'express';
import { Server } from "socket.io";
import { createServer } from 'node:http';
```

On va ensuite les appeler pour créer le serveur avec express et le relié avec le web socket en utilisant `socket.io` et le module `http` intégré dans Node.JS.

```js
const app = express();
const server = createServer(app)
const io = new Server(server)
```

Suite à cela, il faudra préciser le dossier statique qui est `public` contenant nos fichiers HTML/CSS :

```js
app.use(express.static("public"));
```

Ensuite, nous allons utilisé la fonction d'écoute du module `http` pour connecter notre serveur sur le port qui est `8000`.

> Vous pouvez modifier le port à votre guise.
>

```js
server.listen(8000);
```

**Ok!** On peut enfin passer à l'élément le plus important qui est le web socket !

On va venir se connecter à l'événement connection pour savoir quand l'utilisateur va se connecter sur le web socket.

```js
io.on("connection", (socket) => {
    console.log('user connected');
});
```

On va aussi écouter l'événement new message pour les messages qu'on recevra et l'événement disconnect quand l'utilisateur aura quitté le web socket. Pour l'événement new message, on va faire en sorte qu'on reçoit en paramètre un object contenant une clé message et pseudo  pour ensuite les émettre à tous les clients connectés sauf celui qui a créer le message.

```js
io.on("connection", (socket) => {
    console.log('user connected');

    socket.on("new message", (args) => {
        socket.broadcast.emit("new message", args);
    });

    socket.on('disconnect', function () {
        console.log('user disconnected');
    });
});
```

Le code de la partie serveur se trouve sur [le github du projet](https://github.com/creators-area/WebChatSocket).


### La partie client

Pour cette partie, on va retourner dans notre dossier `html`, on va ajouter le module `socket.io` en ajoutant dans la balise head :

```html
<script src = "/socket.io/socket.io.js"></script>
```

Ensuite dans le body, on va venir ajouter une balise script avec une ligne qui va se connecter au web socket :

> Modifier l'adresse selon votre nom de domaine/ip et le port que vous avez.
>
```html
<script>
		const socket = io("ws://localhost:8000");
</script>
```

On va venir créer une fonction `newMessage` pour créer un nouveau message et l'ajouter dans notre chat box.

```js
function newMessage(message, pseudo, type) {
		const div = document.createElement("div");
    div.classList.add("message");
    if(type === "user") div.classList.add(type);

    const p = document.createElement("p");
    p.innerText = message;
    const a = document.createElement("a");
    a.innerText = pseudo;

    div.appendChild(p);
    div.appendChild(a);
    document.getElementById("message_body").appendChild(div);
};
```

Ensuite, on va créer une fonction `sendMessage` pour envoyer un nouveau message au serveur qui va l'envoyer aux autres utilisateurs et aussi le créer côté client.

```js
function sendMessage() {
		const messageInput = document.getElementById("message");
    const pseudoInput = document.getElementById("pseudo");
            
    socket.emit("new message", {message: messageInput.value, pseudo: pseudoInput.value});
    newMessage(messageInput.value, pseudoInput.value, "");
    messageInput.value = "";
};
```

On va aussi connecter la fonction `sendMessage` au boutton qui se trouve dans la classe input :

```js
<button class="inputMessage" onclick="sendMessage()">></button>
```

Pour terminer, on va écouter l'événement new message et créer le message dans la chat box quand on recevra un nouveau message.

```js
socket.on("new message", (args) => {
		newMessage(args.message, args.pseudo, "user")
});
```

> Vous pouvez supprimé les exemples dans la div message_body 
>

``` html
<div class="body" id="message_body"> 
</div>
```

Le code de la partie client se trouve sur [le github du projet](https://github.com/creators-area/WebChatSocket/).

Voici le résultat :

Client 1 : 
![client1](https://i.imgur.com/T11kwbn.png)

Client 2 : 
![client2](https://i.imgur.com/NLUDNTm.png)

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

Développer un chat web en HTML/CSS et connexion socket.io