Question

我一直在尝试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”

未捕获的ReferenceError：io未定义“[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作为我的node.js开发的IDE。另外，我使用“[localserver]”来表示localhost）

Answer 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>

它必须帮助你。

Answer 2

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

尝试移动此行：

chatServer.listen(server);

到脚本 server.js
的末尾

无法加载资源 - Socket.IO

2 个答案: