Comment servir correctement index.html, client.js et server.js ?

Liaison index.html, client.js et server.js

Dans votre scénario, vous rencontrez des problèmes pour lier les trois fichiers : index.html, client.js et serveur.js. Décomposons le problème et fournissons une solution complète.

1. Demande d'index.html :

   • Le navigateur lance une demande de client.js.

2. Réponse du serveur :

   • Votre fonction serveur (réponse) gère cette requête et effectue les actions suivantes :

     • Récupère index.html du système de fichiers.
     • Envoie le contenu de index.html au navigateur.

3. Problème de type de contenu :

   • Puisque index.html commence par "<", le navigateur l'interprète comme JavaScript, menant aux erreurs de syntaxe.
   • En effet, le serveur doit envoyer client.js sous forme de texte/javascript et index.html sous forme de texte/html.

Pour résoudre ce problème, vous devez implémenter une gestion appropriée des requêtes dans le code de votre serveur. Vous pouvez déterminer l'URL demandée et répondre avec le type de contenu approprié.

Utilisation d'Express pour le service de fichiers :
Au lieu d'implémenter la logique manuellement, envisagez d'utiliser Express pour le traitement des demandes. Express inclut le middleware statique, qui simplifie le processus de diffusion de fichiers statiques, tels que HTML, CSS et JavaScript.

Voici un exemple utilisant Express :

const express = require('express');
const app = express();

// Serve client.js as JavaScript
app.get('/client.js', (req, res) => {
    res.sendFile('path/to/client.js', { contentType: 'text/javascript' });
});

// Serve index.html as HTML
app.get('/', (req, res) => {
    res.sendFile('path/to/index.html', { contentType: 'text/html' });
});

app.listen(3000, () => console.log('Server listening on port 3000'));
Ce code configure un Serveur express qui gère les requêtes pour "/client.js" avec le type de contenu correct et répond également aux requêtes pour "/" (index.html) avec le type de contenu approprié.


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!