Créer et exécuter un projet Socket.io

Qu'est-ce que Socket.io ?

Socket.io est une bibliothèque JavaScript pour la communication bidirectionnelle en temps réel basée sur des événements. Elle permet d'établir un canal de communication efficace avec une faible latence entre le navigateur et le serveur. Socket.io supporte le protocole WebSocket, mais n'est pas limité à cela; il peut également choisir automatiquement le meilleur mécanisme de transport (comme le long-polling) pour assurer la stabilité de la connexion.

Caractéristiques principales et avantages de Socket.io

Communication en temps réel : Supporte la communication bidirectionnelle en temps réel, idéale pour des cas d'utilisation comme les salles de chat, les jeux en ligne, et les notifications en temps réel.
Support multiplateforme : Peut être exécuté dans le navigateur, Node.js, et d'autres plateformes.
Reconnexion automatique : Tente automatiquement de se reconnecter en cas de déconnexion.
Basé sur les événements : Communication via un mécanisme d'événements, simplifiant le modèle de programmation.
Haute compatibilité : Supporte divers mécanismes de transport comme WebSocket, XHR long-polling, etc., garantissant une opération correcte dans toutes les conditions de réseau.

Utiliser Socket.io aide les développeurs à construire rapidement des applications de communication en temps réel efficaces.

Créer et exécuter un projet Socket.io avec ServBay

Dans cet article, nous utiliserons l'environnement Node.js fourni par ServBay pour créer et exécuter un projet Socket.io. Nous utiliserons la fonctionnalité « hôte » de ServBay pour configurer le serveur web et accéder au projet via un proxy inversé.

Créer un projet Socket.io

Initialiser le projet
Tout d'abord, assurez-vous d'avoir installé l'environnement Node.js fourni par ServBay. Puis, créez un nouveau projet Socket.io dans le répertoire racine du site conseillé par ServBay /Applications/ServBay/www :
bash
```
cd /Applications/ServBay/www
mkdir servbay-socketio-app
cd servbay-socketio-app
npm init -y
npm install express socket.io
```
1
2
3
4
5

Créer le fichier serveur

Créez un fichier server.js à la racine du projet et ajoutez le code suivant :

javascript

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

const port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Créer le fichier client

Créez un fichier index.html à la racine du projet et ajoutez le code suivant :

html

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Chat with ServBay</title>
  <style>
    ul { list-style-type: none; padding: 0; }
    li { padding: 8px; margin-bottom: 10px; background-color: #f3f3f3; }
    input { padding: 10px; width: 300px; }
    button { padding: 10px; }
    .servbay-banner {
      background-color: #4CAF50;
      color: white;
      text-align: center;
      padding: 10px 0;
      font-size: 20px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="servbay-banner">Welcome to ServBay Socket.io Chat!</div>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
    var form = document.getElementById('form');
    var input = document.getElementById('input');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });

    socket.on('chat message', function(msg) {
      var item = document.createElement('li');
      item.textContent = msg;
      document.getElementById('messages').appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</body>
</html>

Entrer en mode développement

Exécuter le serveur de développement
Démarrez le serveur de développement et spécifiez le port (par exemple : 8585) :
bash
```
PORT=8585 node server.js
```
1
Cela va lancer un serveur de développement local et exposer le port 8585.
Configurer le proxy inversé « Hôte » ServBay
Utilisez la fonctionnalité « Hôte » de ServBay pour accéder au serveur de développement via un proxy inversé. Dans les paramètres de l'hôte de ServBay, ajoutez un nouveau proxy inversé.
- Nom : My first Socket.io dev site
- Domaine : servbay-socketio-test.dev
- Type d'hôte : Proxy inversé
- IP : 127.0.0.1
- Port : 8585
Consultez les étapes détaillées pour ajouter un site de développement Nodejs.
Accéder au mode développement
Ouvrez un navigateur et allez à https://servbay-socketio-test.dev pour voir le projet en temps réel. Grâce au support de ServBay pour les noms de domaine personnalisés et les certificats SSL gratuits, vous bénéficiez d'une sécurité accrue.

Déployer la version de production

Préparer l'environnement de production
Assurez-vous que votre projet fonctionne correctement en environnement de production. D'habitude, un projet Socket.io ne nécessite pas de étapes de construction particulières, mais vous pourriez devoir configurer certaines variables d'environnement ou d'autres paramètres.
Exécuter le serveur de production
Démarrez le serveur de production et spécifiez le port (par exemple : 8586) :
bash
```
PORT=8586 NODE_ENV=production node server.js
```
1
Configurer le proxy inversé « Hôte » ServBay
Utilisez la fonctionnalité « Hôte » de ServBay pour accéder au serveur de production via un proxy inversé. Dans les paramètres de l'hôte de ServBay, ajoutez un nouveau proxy inversé.
- Nom : My first Socket.io production site
- Domaine : servbay-socketio-test.prod
- Type d'hôte : Proxy inversé
- IP : 127.0.0.1
- Port : 8586
Accéder au mode production
Ouvrez un navigateur et allez à https://servbay-socketio-test.prod pour voir la version de production. Grâce au support de ServBay pour les noms de domaine personnalisés et les certificats SSL gratuits, votre site bénéficiera d'une sécurité et d'une fiabilité accrues.

Connexion aux bases de données

ServBay supporte Redis, MariaDB, PostgreSQL, et MongoDB. Voici un exemple de comment se connecter à ces bases de données.

Connexion à MongoDB

Installez mongoose :

bash

npm install mongoose

Ensuite, importez et connectez :

javascript

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/servbay-socketio-app', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

Connexion à Redis

Installez redis :

bash

npm install redis

Ensuite, importez et connectez :

javascript

const redis = require('redis');
const client = redis.createClient();

client.on('error', function (err) {
  console.log('Error ' + err);
});

client.on('connect', function () {
  console.log('Redis client connected');
});

Connexion à MariaDB

Installez mariadb :

bash

npm install mariadb

Ensuite, importez et connectez :

javascript

const mariadb = require('mariadb');
const pool = mariadb.createPool({
  host: 'localhost', 
  user: 'root', 
  password: 'password',
  database: 'servbay_socketio_app'
});

pool.getConnection()
  .then(conn => {
    console.log("Connected to MariaDB");
    conn.release(); //release to pool
  })
  .catch(err => {
    console.log("Not connected due to error: " + err);
  });

Connexion à PostgreSQL

Installez pg :

bash

npm install pg

Ensuite, importez et connectez :

javascript

const { Pool } = require('pg');
const pool = new Pool({
  user: 'user',
  host: 'localhost',
  database: 'servbay_socketio_app',
  password: 'password',
  port: 5432,
});

pool.connect((err, client, done) => {
  if (err) throw err;
  console.log('Connected to PostgreSQL');
  done();
});

En suivant ces étapes, vous avez réussi à créer et exécuter un projet Socket.io, en utilisant les fonctionnalités fournies par ServBay pour gérer et accéder à votre projet, tout en se connectant à différentes bases de données.

Créer et exécuter un projet Socket.io ​

Qu'est-ce que Socket.io ? ​

Caractéristiques principales et avantages de Socket.io ​

Créer et exécuter un projet Socket.io avec ServBay ​

Créer un projet Socket.io ​

Entrer en mode développement ​

Déployer la version de production ​

Connexion aux bases de données ​

Créer et exécuter un projet Socket.io

Qu'est-ce que Socket.io ?

Caractéristiques principales et avantages de Socket.io

Créer et exécuter un projet Socket.io avec ServBay

Créer un projet Socket.io

Entrer en mode développement

Déployer la version de production

Connexion aux bases de données