Question

我正在尝试让服务器（node）与html网页进行通信。一切都在为双方工作，但由于我试图将双方联系起来，我得到了以下非常不方便的错误：

/home/gaga/js/index.js
window.onload = setTimeout(mainFile.start, 1);
^
ReferenceError: window is not defined

这是index.js：

var Message={};
var serv = "localhost:1337";

Message.start = function () {
    document.addEventListener("click", Message.click);
    document.addEventListener("change", Message.onChange);
    Message.getStatus();
};

Message.click = function (ev) {
    var src = ev.target;

    if (src.has_class("navbar-brand")) {
        window.location.reload();
    } else if (src.has_class("btn-confirm-registration")) {
        Message.register();
    } else if (src.has_class("btn-register")) {
        Message.confirmRegistrationInputDisplay();
    } else if (src.has_class("btn-login")) {
        Message.login();
    } else if (src.has_class("btn-send-file")) {
        Message.sendFile();
    } else if (src.has_class("btn-success")) {
        Message.cleanUploadInfo();
    } else if (src.has_class("btn-failure")) {
        Message.cleanUploadInfo();
    } else {
        console.log("else");
    }
};

Message.onChange = function (ev) {
    var src = ev.target;

    if(src.has_class("input-upload")) {
        Message.displayInputFile(src);
    } else {
        console.log("onChange-else");
    }

}

Message.register = function () {
    var logIn = document.getElementsByClassName("login-input")[0];
    var pswIn = document.getElementsByClassName("password-input")[0];

    if (pswIn.value != "" && logIn.value != "") {
        logIn.remove_class("alert-danger");
        pswIn.remove_class("alert-danger");

        var registrationModule = document.getElementsByClassName("confirm-registration")[0];
        registrationModule.innerHTML = "<input type=\"password\" class=\"input confirm-password-input form-control\" style=\"width: 150px; display: inline; margin-left: 160px;\" placeholder=\"Confirm password...\"></input><button class=\"btn btn-primary btn-confirm-    registration\">Confirm Registration</input>";
    } else {
        logIn.add_class("alert-danger");
        pswIn.add_class("alert-danger");
    }
}

Message.checkPasswords = function () {
    var logIn = document.getElementsByClassName("login-input")[0];
    var pswIn = document.getElementsByClassName("password-input")[0];
    var pswConf = document.getElementsByClassName("confirm-password-input")[0];

    if (pswIn.value == pswConf.value && pswIn.value != "" && logIn.value != "") {
        pswConf.remove_class("alert-danger");
        pswIn.remove_class("alert-danger");
        logIn.value = "";
        pswIn.value = "";
        return 1;
    } else {
        pswConf.add_class("alert-danger");
        pswIn.add_class("alert-danger");
        return 0;
    }
}

Message.login = function () {
    var logIn = document.getElementsByClassName("login-input")[0];
    var pswIn = document.getElementsByClassName("password-input")[0];

    if (pswIn.value != "" && logIn.value != "") {
        logIn.remove_class("alert-danger");
        pswIn.remove_class("alert-danger");
        //here send request
        logIn.value = "";
        pswIn.value = "";
    } else {
        logIn.add_class("alert-danger");
        pswIn.add_class("alert-danger");
    }
}

Message.sendFile = function () {//todo: arnaud
    var sendFile = document.getElementsByClassName("doc-input")[0];

    if (sendFile.value != "") {
        sendFile.remove_class("alert-danger");
        var data = serv + "?fileName=" + sendFile.value;
        Message.post(data, Message.cb_sendFile);
    } else {
        sendFile.add_class("alert-danger");
    }
}

Message.cb_sendFile = function () {
    if (this.readyState == 4 && this.status == 200) {
        var resp = JSON.parse(this.responseText);
        var el = document.getElementsByClassName("upload-info")[0];
        if (resp.status == "ok") {
            el.innerHTML = "<button type=\"button\" class=\"btn btn-success glyphicon glyphicon-ok\"> Success</button>";
        } else {
            el.innerHTML = "<button type=\"button\" class=\"btn btn-danger glyphicon glyphicon-remove\"> Failure</button>";
        }
    }
}

Message.displayInputFile = function (src) {
    var file = src.value;
    var fileInput = document.getElementsByClassName("doc-input")[0];
    fileInput.remove_class("alert-danger");
    fileInput.value = file.replace("C:\\fakepath\\", "");
}

Message.getStatus = function () {
    console.log("do nothing");
}

window.onload = setTimeout(Message.start, 1);

这是index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"></meta>
        <title>aboudabi</title>
        <link rel="stylesheet" href="./css/bootstrap.min.css"></link>
        <link rel="stylesheet" href="./css/main.css"></link>
    </head>

    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">aboudabi</a>
                </div>

                <div class="login-registration-input">
                    <ul class="nav navbar-nav navbar-right navbar-user-status">
                    </ul>
                </div>
            </div>
        </nav>

        <div class="row col-lg-12">
            <div class="file-input col-lg-6 col-lg-offset-1">
                <input class="form-control doc-input" style="width: 400px; display: inline;" placeholder="Your file..."></input>
                <div class="file-upload btn btn-default">
                    <span>Browse</span>
                    <input class="upload input-upload" type="file"/>
                </div>
                <button type="button" class="btn btn-primary glyphicon glyphicon-upload btn-send-file"> Send</button>
                <br>
                <div class="upload-info col-lg-6">
                </div>
            </div>

            <div class="confirm-registration col-lg-5">
            </div>          
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="./js/index.js"></script>
    </body>
</html>

Answer 1

由于您似乎无法理解如何设置节点服务器，因此我将演示最基本的设置，并在每个示例中添加另一层复杂性。

/** Make a server that responds to all requests with index.html **/

var http = require('http');
var fs   = require('fs'); // interact with file system

http.createServer(function (req, res) {
  // this is how the server will respond to requests
  res.writeHead(200, {'Content-Type': 'text/html'});
  fs.createReadStream('index.html').pipe(res); // read the file and pipe it to the response
}).listen(80);


/** serve index.html for `/` or x.html for `/x` **/

var http = require('http');
var fs   = require('fs');

http.createServer(function (req, res) {
  var file = req.url.split('/')[1] || 'index'; // get the first word from the url
  res.writeHead(200, {'Content-Type': 'text/html'});
  var readStream = fs.createReadStream(file+'.html');
  readStream.on('error', function(err) {
    // file doesn't exist
    res.writeHead(404, {'Content-Type': 'text/plain'});
    res.end("This page doesn't exist."); // simple text error message as response
  });
  readStream.pipe(res);
}).listen(80);

如您所见，您必须编写代码以赋予请求意义。如果请求进入服务器/js/myFile.js，那么在某种程度上，服务器必须考虑这样的事情：

if (req.url === '/js/myFile.js') {
   var readStream = fs.createReadSteam('/js/myFile.js');
   // set headers, handle errors and such, then
   readStream.pipe(res);
 }

当然，您可以编写可以更一般地处理此问题的代码，这样您就不会一遍又一遍地重复相同的代码，当然，有人已经编写了您需要的代码。 Express内置了路由器和静态文件服务器。它使上述过程更加出色。

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

// serve all files in `js` folder
app.use(express.static('/js'));

// respond with `index.html` for all other requests
app.get('*', function(req, res) {
  res.sendfile('index.html');
});

app.listen(80);

窗口对象无法识别

1 个答案: