连接到socket.io服务器时,Web浏览器永远不会停止“加载”?

时间:2014-04-15 22:45:00

标签: javascript node.js socket.io

我遇到socket.io的问题。我有一个nodejs服务器,它充当web服务器,同时还运行socket.io服务器。另外,我有一个连接到socket.io服务器的网页。该网页有一个按钮,单击该按钮时会发出时间更新请求。然后socket.io服务器将时间(以毫秒为单位)发送回网页,然后更新div以显示时间。

这很好用,但是,我注意到我的网页浏览器(Chrome)在标签中有旋转加载图标,就像网页从未完全加载一样。它还会显示“X”以停止加载页面。

如果我点击'X'停止加载页面,我的软件继续正常工作,但我无法弄清楚为什么页面永远不会完全加载。

服务器代码:

var http = require("http");
var wrHandler = require("./webRequestHandler");
var io = require("socket.io");
var parser = require("./messageParser");

function start() {
    function onRequest(request, response){
        wrHandler.handle(request, response);        
    }

    var webserver = http.createServer(onRequest).listen(8888);
    console.log("Server has started.");



    var ioserver = io.listen(webserver);
    ioserver.set('log level', 3);
    ioserver.sockets.on('connection', function(socket){
        parser.parse(socket);
    });

}

exports.start = start;

Web请求处理程序:

var url = require("url");
var fs = require("fs");

function handle(request, response){
    var pathname = url.parse(request.url).pathname;
    console.log(pathname);

        switch(pathname){
            case '/':
                fs.readFile("../html/index.html", function(error, data){
                    if(error){
                        response.writeHead(404);
                        response.write("This file does not exist.");
                    }
                    else{
                        response.writeHead(200, {"Content-Type": "text/html"});
                        response.write(data, "utf8");
                    }
                });
                break;
            default:
                fs.readFile("../html" + pathname, function(error, data){
                    if(error){
                        response.writeHead(404, {"Content-Type": "text/html"});
                        response.write("<html><body>This file does not exist!</body></html>");
                        console.log("Test");
                    }
                    else{
                        response.writeHead(200, {"Content-Type": "text/html"});
                        response.write(data, "utf8");
                    }
                });
        }
}

exports.handle = handle;

消息解析器:

function parseMessage(socket){
    socket.on('client_msg',function(data){
        var msgID = data.msgID;

        switch(msgID){
            case "gettime": 
                socket.emit('timeupdate', {"time": new Date().getTime()});
                break;
            default: break;
        }
    });
}

exports.parse = parseMessage;

HTML页面:

<html>
    <head>
        <script src="/socket.io/socket.io.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
        <script>
            var socket = io.connect();

            function getTime(){
                socket.emit('client_msg', {"msgID": "gettime"});
            }

            socket.on('timeupdate', function(data){
                $("#time").text(data.time);
            });
        </script>
    </head>
    <body>

        <input type="button" value="Get Server Time" onclick="getTime()"/>
        <div id="time">

        </div>
    </body>
</html>

我应该承认我对node.js不是新手,也不是最强大的javascript开发人员。任何批评/建议/提示都非常感谢。

1 个答案:

答案 0 :(得分:1)

在您的Web请求处理程序中,最后,在您的交换机块之外执行response.end()。

编辑:您必须在每次写入结束时执行此操作,因为您正在执行异步文件读取。如果你使用readFileSync,你可以在最后写一次。

http://nodejs.org/api/http.html#http_response_end_data_encoding

所以你的文件看起来像:

    var url = require("url");
    var fs = require("fs");

    function handle(request, response){
        var pathname = url.parse(request.url).pathname;
        console.log(pathname);

            switch(pathname){
                case '/':
                    fs.readFile("../html/index.html", function(error, data){
                        if(error){
                            response.writeHead(404);
                            response.write("This file does not exist.");
                            response.end();
                        }
                        else{
                            response.writeHead(200, {"Content-Type": "text/html"});
                            response.write(data, "utf8");
                            response.end();
                        }
                    });
                    break;
                default:
                    fs.readFile("../html" + pathname, function(error, data){
                        if(error){
                            response.writeHead(404, {"Content-Type": "text/html"});
                            response.write("<html><body>This file does not exist!</body></html>");
                            response.end();
                            console.log("Test");
                        }
                        else{
                            response.writeHead(200, {"Content-Type": "text/html"});
                            response.write(data, "utf8");
                            response.end();
                        }
                    });
            }
    }

    exports.handle = handle;

请注意response.end(&#39; foo&#39;);相当于response.write(&#39; foo&#39;);到Response.End();

另外,我知道这有点偏离主题,但你应该试试node的快速框架。它使很多Web请求处理变得容易,而不会过于自以为是。