无法加载资源 - Socket.IO答案

【问题标题】：Failed to load resource - Socket.IO无法加载资源 - Socket.IO
【发布时间】：2014-07-26 09:23:28
【问题描述】：

我一直在尝试使用 node.js 和 socket.io，并按照教程进行操作。我不断从我正在构建的应用程序中收到错误消息。这是我的 server.js 文件：

var http = require('http');
var fs = require('fs');
var path = require('path');
var mime = require('mime');
var cache = {};
var chatServer = require('./lib/chat_server.js');
chatServer.listen(server);

//file doesn't exist
function send404(response) {
    response.writeHead(404, {'Content-Type': 'text/plain'});
    response.write('Error 404: resource not found.');
    response.end();
}

//handles serving file data
function sendFile(response, filePath, fileContents) {
    response.writeHead(
    200,
    {"content-type": mime.lookup(path.basename(filePath))}
    );
    response.end(fileContents);
}

//cache static files to memory
function serveStatic(response, cache, absPath) {
    if (cache[absPath]) {
        sendFile(response, absPath, cache[absPath]);
    } else {
        fs.exists(absPath, function(exists) {
            if (exists) {
            fs.readFile(absPath, function(err, data) {
                if (err) {
                    send404(response);
                } 
                else {
                    cache[absPath] = data;
                    sendFile(response, absPath, data);
                }
            });
           } 
           else {
            send404(response);
           }
        });
    }
}

var server = http.createServer(function(request, response) {
    var filePath = false;
    if (request.url == '/') {
        filePath = 'public/index.html';
        } 
    else {
        filePath = 'public' + request.url;  
    }
    var absPath = './' + filePath;
    serveStatic(response, cache, absPath);
});

server.listen(3001, function() {
    console.log("Server listening on port 3001.");
});

这是我的 index.html 文件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Chat</title>
    <meta name="description" content="An interactive chat application using websockets.">
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    <div id='content'>
        <div id='room'></div>
        <div id='room-list'></div>
        <div id='messages'></div>
        <form id='send-form'>
            <input id='send-message' />
            <input id='send-button' type='submit' value='Send'/>
            <div id='help'>
                Chat commands:
                <ul>
                    <li>Change nickname: <code>/nick [username]</code></li>
                    <li>Join/create room: <code>/join [room name]</code></li>
                </ul>
            </div>
        </form>
    </div>
    <script src="[localserver here]:3001/socket.io/socket.io.js" type="text/javascript"></script>
    <script src="/javascripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="/javascripts/chat.js" type="text/javascript"></script>
    <script src="/javascripts/chat_ui.js" type="text/javascript"></script>
</body>
</html>

从浏览器加载“[localserver here]:3001”后，索引页面会出现，并带有随后的 CSS。但是当我尝试一个事件时，比如发送一条消息，我得到了这个错误：

错误 404：找不到资源。

我在 Chrome 浏览器中右键单击并检查了元素，并收到以下两条消息：

加载资源失败：服务器响应状态为 404（未找到）“[localserver here]:3001/socket.io/socket.io.js”

Uncaught ReferenceError: io is not defined "[localserver here]:3001/javascripts/chat_ui.js:26"

这是我的 chat_ui.js 文件中的第 26 行：

var socket = io.connect('[localserver here]:3001');
$(document).ready(function() {

   var chatApp = new Chat(socket);
   socket.on('nameResult', function(result) {
       var message;
       if (result.success) {
           message = 'You are now known as ' + result.name + '.';
       } else {
           message = result.message;
       }
       $('#messages').append(divSystemContentElement(message));
   });

   socket.on('joinResult', function(result) {
       $('#room').text(result.room);
       $('#messages').append(divSystemContentElement('Room changed.'));
   });

   socket.on('message', function (message) {
       var newElement = $('<div></div>').text(message.text);
       $('#messages').append(newElement);
   });

   socket.on('rooms', function(rooms) {
       $('#room-list').empty();
       for(var room in rooms) {
           room = room.substring(1, room.length);
           if (room != '') {
               $('#room-list').append(divEscapedContentElement(room));
           }
       }
       $('#room-list div').click(function() {
           chatApp.processCommand('/join ' + $(this).text());
           $('#send-message').focus();
       });
   });

   setInterval(function() {
       socket.emit('rooms');
   }, 1000);
   $('#send-message').focus();
   $('#send-form').submit(function() {
       processUserInput(chatApp, socket);
       return false;
   });
})

我已经尝试了各种方法。最初第 26 行是 var socket = io.connect();我把它改成了上面的那个。我还将index.html文件中socket.io.js的目录从：

到

...我认为这是问题所在，但它仍然给我同样的错误。

请问我该如何解决？

（PS - 我使用 Brackets 作为我的 IDE 进行 node.js 开发。另外，我使用“[localserver]”表示本地主机）

【问题讨论】：

抱歉，我将 html 文件中的目录从 /socket.io/socket.io.js 更改为 localhost:3001/socket.io/socket.io.js 但我仍然遇到相同的错误...

标签： javascript node.js socket.io

【解决方案1】：

试试这个：

<script type="text/javascript" src='http://localhost:3001/socket.io/socket.io.js'>
</script>

<script type="text/javascript">

var socket = io.connect('http://localhost:3001');

socket.on('connect',function(){
console.log("connect");
});
</script>

它必须帮助你。

【讨论】：

我已经尝试了你的建议。我仍然遇到同样的错误。
你安装了socket.io包吗？当您尝试连接时，您的服务器是否正在运行？
是的，我已经安装了 socket.io，尤其是在我的文件目录中。它位于 node_modules 文件夹中，当我运行 server.js 时，我收到消息：“信息：socket.io 已启动服务器侦听端口 3001。”在我的控制台中
好的。然后尝试移动 chatServer.listen(server); server.listen(3001, function() { console.log("服务器监听 3001 端口"); });在你的 server.js 文件中。
或者把这个移到head标签中你的 index.html 文件。

【解决方案2】：

chatServer.listen(server); 行应该在您运行服务器之后。 chartServer 正在监听服务器，但尚未运行。

尝试移动这条线：

chatServer.listen(server);

到你的脚本结尾server.js

【讨论】：