连接到 socket.io 服务器时，Web 浏览器永远不会停止“加载”？答案

【问题标题】：Web browser never stops 'loading' when connecting to socket.io server?连接到 socket.io 服务器时，Web 浏览器永远不会停止“加载”？
【发布时间】：2014-05-30 12:38:38
【问题描述】：

我遇到了 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 开发人员。非常感谢任何批评/建议/提示。

【问题讨论】：

标签： javascript node.js socket.io

【解决方案1】：

在您的网络请求处理程序中，~~最后，在您的 switch 块之外执行 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('foo');相当于 response.write('foo'); response.end();

另外，我知道这有点离题，但你应该试试 node.js 的 express 框架。它使许多 Web 请求的处理变得容易，而不会过于固执己见。

【讨论】：

成功了！！感谢您对 express 框架的建议。现在调查一下。
@RevMuun 很高兴为您提供帮助。您也不会后悔选择 Express！
@RevMuun 如何在服务器发送事件的情况下停止无限加载？如果我结束响应，客户端将无法连接，因此无法接收数据流......