简体   繁体   English

静态文件,带有Node.js和Express的样式表

[英]Static file, stylesheet with Node.js and Express

I'm new to Nodejs and I'm having troubles to make my stylesheet (and js files) works with my Node.js server. 我是Nodejs的新手,因此无法使样式表(和js文件)与Node.js服务器一起使用。 I tried many things but nothing worked. 我尝试了很多事情,但没有任何效果。 Could you help me please ? 请问你能帮帮我吗 ? My stylesheet is in a "public" folder. 我的样式表位于“公共”文件夹中。

Server-side : 
    var http = require('http');
    var fs = require('fs');
    var express = require('express');
    var path = require('path');

var app = express();
// Chargement du fichier index.html affiché au client
var server = http.createServer(function(req, res) {
    fs.readFile('./index.html', 'utf-8', function(error, content) {
        res.writeHead(200, {"Content-Type": "text/html"});
        res.end(content);
    });
});

app.use(express.static(path.join(__dirname, 'public')));

// Chargement de socket.io
var io = require('socket.io').listen(server);

io.sockets.on('connection', function (socket, pseudo) {
    // Quand on client se connecte, on lui envoie un message
    socket.emit('message', 'Vous êtes bien connecté !');
    // On signale aux autres clients qu'il y a un nouveau venu
    socket.broadcast.emit('message', 'Un autre client vient de se connecter ! ');

    // Dès qu'on nous donne un pseudo, on le stocke en variable de session
    socket.on('petit_nouveau', function(pseudo) {
        socket.set('pseudo', pseudo);
    });

    // Dès qu'on reçoit un "message" (clic sur le bouton), on le note dans la console
    socket.on('message', function (message) {
        // On récupère le pseudo de celui qui a cliqué dans les variables de session
        socket.get('pseudo', function (error, pseudo) {
            console.log(pseudo + ' me parle ! Il me dit : ' + message);
        });
    }); 
});
server.listen(8080);

Client-side : 客户端 :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Chat par navigateur</title>
  <link rel="stylesheet" href="public/css/stylesheet.css">
  <!-- <link rel="icon" type="image/png" href="img/favicon.png" /> -->
</head>
<body>
    <h1>SALUTATIONS</h1>
    <p><input type="button" value="Parler au serveur" id="poke" /></p>

    <!-- <script type="text/javascript" src="js/jQuery.js"></script> -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect('http://localhost:8080');
        socket.on('message', function(message) {
            alert('Le serveur a un message pour vous : ' + message);
        })

        $('#poke').click(function () {
            alert("ok");
            socket.emit('message', 'Salut serveur, ça va ?');
        })
    </script>
</body>
</html>

If you are using Express 3.x, try this: 如果您使用的是Express 3.x,请尝试以下操作:

var http = require('http');
var express = require('express');
var path = require('path');

var app = express();
app.get('/', function(req, res) {
  res.sendfile('/index.html');
});
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

var server = http.createServer(app);

var io = require('socket.io').listen(server);

/* Your socket event handlers are here.*/

server.listen(8080);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM