Web浏览器从未停止'加载'连接到socket.io服务器时

Web browser never stops 'loading' when connecting to socket.io server?

本文关键字：socket io 服务器 连接 加载 Web 浏览器      更新时间：2023-09-26

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

在您的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（'fo'）；相当于response.write（'fo'）；response.end（）；

此外，我知道这有点偏离主题，但您应该尝试一下node的express框架。它使许多web请求处理变得简单，而不会过于固执己见。

相关文章：