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 base de données d'un chat web avec la librairie better-sqlite3.

## Pré-requis : 
- Une maitrise de JavaScript 
- Une maitrise de Node.JS

## Qu’est-ce qu'une base de données ?

Une base de données permet de stocker et retrouver des données structurées. Il permet de contenir des informations telles que les messages dans un channel et pouvoir les retrouver. Les bases de données sont utilisées par tous les services pour stocker des comptes, des messages ou d'autres informations.

## Installer notre base de données

Pour commencer, installez la librairie **better-sqlite3** : 
```js
npm install better-sqlite3
```
## Créer notre base de données

Ensuite, on va venir importer et créer une nouvelle Database, on va créer une table qui stockera le pseudo et le message de la personne.

```js
import Database from 'better-sqlite3';
const db = new Database('chat.db');
db.prepare(`CREATE TABLE IF NOT EXISTS Chat(pseudo TEXT, message TEXT)`).run();
```

## Récuperer les messages 

Après cela, on peut enfin récupérer la table et faire une boucle pour envoyer tous les messages. On va retourner dans notre événement "connection" et insérer : 

```js
io.on("connection", (socket) => {
    const table = db.prepare('SELECT * FROM Chat').all()
    
    for(const message of table) {
        socket.emit("new message", message);
    }
});
```

## Ajouter un message dans la base de données

Pour envoyer les messages dans la base de données, on va insérer dans la table notre message avec le pseudo. Il faut aller dans l'événement new message.

```js
socket.on("new message", (args) => {
    db.prepare('INSERT INTO Chat(pseudo, message) VALUES (?, ?)').run(args.pseudo, args.message)
});
```

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

Dans le prochain chapitre, on fera un système d'identification pour reconnaitre les messages

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


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